UI_redesign_pt1

package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
     "react-simple-code-editor": "^0.13.1",
+    "tailwind-merge": "^2.0.0",
     "tailwindcss": "3.3.3",
     "zustand": "^4.4.1"
   },
@@ -42,6 +43,4 @@
     "printWidth": 120,
     "tabWidth": 4
   }
-
-
 }

src/app/components/Container.tsx

@@ -1,15 +1,17 @@
+import { twMerge } from 'tailwind-merge';
+
 interface ContainerTypes {
     className?: string;
     children: React.JSX.Element[] | React.JSX.Element;
 }
 
 const Container = ({ children, className }: ContainerTypes) => {
-    const classesName = `${className} flex-auto flex flex-col flex-initial 
-                                    bg-gray-400 px-5 py-3 h-5/6
-                                    rounded-lg bg-opacity-20 
-                                    backdrop-blur-lg
-                                    hover:shadow-lg hover:shadow-blue-950`;
+    const classesName = twMerge('min-h-full', className);
     return <div className={classesName}>{children}</div>;
 };
 
+Container.defaultProps = {
+    className: '',
+};
+
 export default Container;

src/app/components/Examples.tsx

@@ -1,52 +1,17 @@
-import { ShotsTypes, userInputsArr } from '@/store/inputStore';
+import { userInputsArr } from '@/store/inputStore';
 import Shots from './Shots';
-import ButtonsEx from './ExamplesButtons';
-
-interface ExampleTypes {
-    send: (examples: ShotsTypes[], lastPrompt: string) => Promise<void>;
-    isLoading: boolean;
-}
 
 // examples are built with one user input and result
-const Examples = ({ send, isLoading }: ExampleTypes) => {
-    const [deleteUserInputArr, examples, userInputs, updateUserInput, updateUserResults] = userInputsArr((state) => [
-        state.deleteUserInputArr,
-        state.examples,
-        state.userInputs,
-        state.updateUserInput,
-        state.updateUserResults,
-    ]);
-
-    const handleDeleteAll = () => {
-        deleteUserInputArr();
-        updateUserInput('');
-        updateUserResults('');
-    };
-
-    const onClickHandler = async () => {
-        await send(examples, userInputs);
-    };
-
-    // 1 shot minimun must be added to send a response request to GPT
-    const disabled = !(examples.length >= 1 && userInputs !== '' && !isLoading);
-    const classNameForSend = disabled ? ' text-gray-400' : ' hover:bg-yellow-800';
-    const classNameForButton = isLoading ? ' text-gray-400' : ' hover:bg-red-900';
+const Examples = () => {
+    const [examples] = userInputsArr((state) => [state.examples]);
 
     return (
-        <>
-            <h1 className='flex-inital basis-1/12 ml-0 pr-0 '>Examples</h1>
-            <div className='flex flex-col justify-start items-stretch basis-10/12 w-full bg-white text-black rounded overflow-y-auto'>
+        <div className='flex flex-col h-full grow border border-gray-700'>
+            <h1 className='basis-[2%] ml-2'>Examples</h1>
+            <div className='basis-[98%] bg-white text-black overflow-y-auto grow'>
                 <Shots examples={examples} />
             </div>
-            <ButtonsEx
-                handleDeleteAll={handleDeleteAll}
-                disabled={disabled}
-                classNameForButton={classNameForButton}
-                classNameForSend={classNameForSend}
-                isLoading={isLoading}
-                onClickHandler={onClickHandler}
-            />
-        </>
+        </div>
     );
 };
 

src/app/components/Inputs.tsx

@@ -1,5 +1,5 @@
 import Model from './Model';
 import Result from './Result';
 import Container from './Container';
 import { userInputsArr } from '../../store/inputStore';
 
@@ -9,28 +9,18 @@
 }
 
 const Inputs = ({ data, isLoading }: InputsType) => {
-    const [updateUserInputArr, userInput, updateUserInput, userResults, updateUserResults] = userInputsArr((state) => [
-        state.updateUserInputArr,
+    const [userInput, updateUserInput, userResults, updateUserResults] = userInputsArr((state) => [
         state.userInputs,
         state.updateUserInput,
         state.userResults,
         state.updateUserResults,
     ]);
 
-    const clickedAdd = () => {
-        if (userInput.trim() !== '' && userResults.trim() !== '') {
-            updateUserInputArr({ input: userInput, result: userResults });
-            updateUserInput('');
-            updateUserResults('');
-        }
-    };
-
     return (
-        <Container className='md:max-h-96 lg:max-h-[30rem] xl:max-h-[36rem] 2xl:max-h-[50rem] min-[2000px]:max-h-[64.7rem] min-[3000px]:max-h-[132rem] w-7/12'>
+        <Container className='flex flex-row w-7/12 grow'>
             <Model userInput={userInput} updateUserInput={updateUserInput} disabled={isLoading} />
             <Result
                 data={data}
-                clickedAdd={clickedAdd}
                 userResults={userResults}
                 updateUserResults={updateUserResults}
                 disabled={isLoading}

src/app/components/Model.tsx

@@ -14,25 +14,22 @@ interface ModelTypes {
 
 // model are the inputs from the user, these are part of the prompt
 export const Model = ({ userInput, updateUserInput, disabled }: ModelTypes) => (
-    <>
-        <h1 className='basis-1/12'>Input</h1>
-        <div className='basis-5/12 lg:max-h-96 xl:max-h-[28rem] 2xl:max-h-[50rem] overflow-auto rounded bg-white text-black w-full whitespace-pre-wrap'>
+    <div className='flex flex-col w-[50%] h-full grow border border-gray-700'>
+        <h1 className='basis-[2%] ml-2'>Model</h1>
+        <div className='basis-[98%] overflow-auto bg-white text-black whitespace-pre-wrap grow font-mono'>
             <Editor
                 value={userInput}
                 highlight={(userInputWritten) => highlight(userInputWritten, languages.tsx, 'tsx')}
                 onValueChange={(userInputWritten) => updateUserInput(userInputWritten)}
-                className='resize-none'
-                style={{
-                    minHeight: '100%',
-                }}
+                className='min-h-full'
                 preClassName='!break-all '
                 textareaClassName='!break-all '
                 padding={7}
                 disabled={disabled}
                 placeholder='Input some code...'
             />
         </div>
-    </>
+    </div>
 );
 
 export default Model;

src/app/components/Result.tsx

@@ -8,51 +8,39 @@ import 'prismjs/themes/prism-tomorrow.css';
 
 interface ResultTypes {
     data: string | undefined | null;
-    clickedAdd: () => void;
     userResults: string;
     updateUserResults: (input: string) => void;
     disabled: boolean;
     isLoading: boolean;
 }
 
 // results are GPT responses exemplified by the user
-export const Result = ({ data, clickedAdd, userResults, updateUserResults, disabled, isLoading }: ResultTypes) => {
+export const Result = ({ data, userResults, updateUserResults, disabled, isLoading }: ResultTypes) => {
     useEffect(() => {
         if (typeof data === 'string') {
             updateUserResults(data);
         }
-    }, [data]);
+    }, [data, updateUserResults]);
 
     const textAreaClassName = isLoading ? 'animate-pulse' : '';
-    const buttonClassName = disabled ? ' text-gray-400' : ' hover:bg-slate-600';
 
     return (
-        <>
-            <h1 className='basis-1/12'>Result</h1>
-            <div className='basis-5/12 lg:max-h-96 xl:max-h-[28rem] 2xl:max-h-[50rem] rounded overflow-auto'>
+        <div className='flex flex-col w-[50%] h-full grow border border-gray-700'>
+            <h1 className='basis-[2%] ml-2'>Result</h1>
+            <div className='basis-[98%] overflow-auto font-mono'>
                 <Editor
                     value={userResults}
                     highlight={(userResultsWritten) => highlight(userResultsWritten, languages.tsx, 'tsx')}
                     onValueChange={(userResultsWritten) => updateUserResults(userResultsWritten)}
-                    className={`min-h-full text-black bg-white w-full rounded p-2 ${textAreaClassName}`}
+                    className={`min-h-full text-black bg-white ${textAreaClassName}`}
                     padding={7}
                     preClassName='!break-all'
                     textareaClassName='!break-all'
                     disabled={disabled}
                     placeholder='Input a result...'
                 />
             </div>
-            <div className='basis-1/12'>
-                <button
-                    type='button'
-                    className={`py-2 px-2 rounded ${buttonClassName}`}
-                    onClick={() => clickedAdd()}
-                    disabled={disabled}
-                >
-                    Add
-                </button>
-            </div>
-        </>
+        </div>
     );
 };
 

src/app/components/Shots.tsx

@@ -15,15 +15,15 @@
 
     if (!(examples.length > 0)) {
         return (
-            <div className='flex items-center justify-center content-center rounded text-gray-200 h-full flex-auto w-full'>
-                <code className='select-none'>No examples registered</code>
+            <div className='flex items-center justify-center content-center rounded text-gray-300 h-full flex-auto w-full'>
+                <code className='select-none'>No examples added</code>
             </div>
         );
     } else {
         return examples.map((shot, index) => (
             <div
                 className='flex flex-row bg-slate-300 m-2 p-3 rounded text-xs max-h-44 shadow-lg gap-1 hide-scroll-bar-me-setting-big'
                 key={index}
             >
                 <pre className='overflow-auto basis-2/5 grow whitespace-pre-wrap hide-scroll-bar-me-setting-big'>
                     <code className='language-tsx'>{shot.input}</code>