Skip to content
This repository has been archived by the owner on Dec 5, 2023. It is now read-only.

UI_redesign_pt1 #19

Merged
merged 3 commits into from
Nov 10, 2023
Merged

UI_redesign_pt1 #19

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7dcf2e1
UI_redisign_pt1
Nov 10, 2023
f39ccb4
default examples added, button to load them too
Nov 10, 2023
e3d377c
comments resolved
Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/app/components/Container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ interface ContainerTypes {
}

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 = `${className} min-h-full`;
return <div className={classesName}>{children}</div>;
geoperez marked this conversation as resolved.
Show resolved Hide resolved
};

Container.defaultProps = {
className: '',
};

export default Container;
49 changes: 7 additions & 42 deletions src/app/components/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
40 changes: 0 additions & 40 deletions src/app/components/ExamplesButtons.tsx
View file
Open in desktop

This file was deleted.

14 changes: 2 additions & 12 deletions src/app/components/Inputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,18 @@ interface InputsType {
}

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-[115vh] max-h-[28vh] grow'>
<Model userInput={userInput} updateUserInput={updateUserInput} disabled={isLoading} />
<Result
data={data}
clickedAdd={clickedAdd}
userResults={userResults}
updateUserResults={updateUserResults}
disabled={isLoading}
Expand Down
13 changes: 5 additions & 8 deletions src/app/components/Model.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
26 changes: 7 additions & 19 deletions src/app/components/Result.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down
4 changes: 2 additions & 2 deletions src/app/components/Shots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const Shots = ({ examples }: ShotsType) => {

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 {
Expand Down
129 changes: 129 additions & 0 deletions src/app/components/ToolBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
/* eslint-disable @typescript-eslint/no-misused-promises */
import React, { useState } from 'react';
import { ShotsTypes, userInputsArr } from '../../store/inputStore';

interface toolBarInter {
isLoading: boolean;
send: (examples: ShotsTypes[], userInputs: string) => Promise<void>;
}

export const ToolBar = ({ isLoading, send }: toolBarInter) => {
const [
updateUserInputArr,
userInput,
updateUserInput,
userResults,
updateUserResults,
examples,
deleteUserInputArr,
loadDefaultExample,
] = userInputsArr((state) => [
state.updateUserInputArr,
state.userInputs,
state.updateUserInput,
state.userResults,
state.updateUserResults,
state.examples,
state.deleteUserInputArr,
state.loadDefaultExample,
]);

const [mode, useMode] = useState(true);

const buttonClassName = isLoading ? ' text-gray-400' : ' hover:bg-slate-600';

const disabledSendRequest = !(examples.length >= 1 && userInput !== '' && !isLoading);
const classNameForSend = disabledSendRequest ? ' text-gray-400' : ' hover:bg-yellow-800';
const classNameForButton = isLoading ? ' text-gray-400' : ' hover:bg-red-900';

const clickedAdd = () => {
if (userInput.trim() !== '' && userResults.trim() !== '') {
updateUserInputArr({ input: userInput, result: userResults });
updateUserInput('');
updateUserResults('');
}
};

const handleDeleteAll = () => {
deleteUserInputArr();
updateUserInput('');
updateUserResults('');
};

const onClickHandler = async () => {
await send(examples, userInput);
};

const useTheMode = (bol: boolean) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rename and avoid using useXXX for methods that aren't hooks. You are triggering some checks because of this.

useMode(bol);
};

return (
<div className=' flex flex-row basis-1/12 justify-between grow'>
<div className='flex flex-row gap-3 ml-10'>
{mode ? (
<>
<button
type='button'
className={`px-3 rounded ${buttonClassName}`}
onClick={loadDefaultExample}
disabled={isLoading}
>
Load example
</button>
<button
type='button'
className={`px-3 rounded ${buttonClassName}`}
onClick={() => clickedAdd()}
disabled={isLoading}
>
Add example
</button>
</>
) : (
<button
onClick={onClickHandler}
type='button'
className={`px-3 mr-[141px] rounded ${classNameForSend}`}
disabled={disabledSendRequest}
>
Send request
</button>
)}

<div className='flex flex-col gap-3 items-center'>
<h4>Input mode</h4>
<div className='flex flex-row gap-4'>
<button
className='px-3 rounded hover:bg-yellow-100 hover:text-black'
type='button'
onClick={() => useTheMode(true)}
disabled={isLoading}
>
Example
</button>
<button
className='px-3 rounded hover:bg-blue-200 hover:text-black'
type='button'
onClick={() => useTheMode(false)}
disabled={isLoading}
>
Request
</button>
</div>
</div>
</div>

<button
type='button'
className={`px-3 rounded ${classNameForButton}`}
onClick={handleDeleteAll}
disabled={isLoading}
>
Delete everything
</button>
</div>
);
};

export default ToolBar;
17 changes: 17 additions & 0 deletions src/app/examples.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"examples":[
{
"input":"const rows = [\n\t{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },\n\t{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },\n\t{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },\n\t{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },\n\t{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },\n\t{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },\n\t{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },\n\t{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },\n\t{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },\n];",
"result":"const columns: GridColDef[] = [\n\t{ field: 'id', headerName: 'ID', width: 90 },\n\t{\n\t\tfield: 'firstName',\n\t\theaderName: 'First name',\n\t\twidth: 150,\n\t\teditable: true,\n\t},\n\t{\n\t\tfield: 'lastName',\n\t\theaderName:'Last name',\n\t\twidth: 150,\n\t\teditable: true,\n\t},\n\t{\n\t\tfield: 'age',\n\t\theaderName: 'Age',\n\t\ttype: 'number',\n\t\twidth: 110,\n\t\teditable: true,\n\t},\n\t{\n\t\tfield: 'fullName',\n\t\theaderName: 'Full name',\n\t\tdescription: 'This column has a value getter and is not sortable.',\n\t\tsortable: false,\n\t\twidth: 160,\n\t\tvalueGetter: (params: GridValueGetterParams) =>\n\t\t\t`${params.row.firstName || ''}${params.row.lastName || ''}`,\n\t},\n];"
},
{
"input":"type CsCapacity = {\n\tName: string;\n\tSeniority: string;\n\tAccountsAssigned: number;\n\tBaselineCapacity: number;\n\tDpsSupported: number;\n\tCurrentCapacity: number;\n};",
"result":"const getCapacityData = (data?: CsCapacity[]) =>\n\tsafeMap(data, (entry) => [\n\t\tentry.Name,\n\t\tentry.Seniority,\n\t\tentry.AccountsAssigned,\n\t\tentry.BaselineCapacity,\n\t\tentry.DpsSupported,\n\t\tentry.CurrentCapacity,\n\t]);"

},
{
"input":"const cerealsObj:any[] = [\n\t{\n\t\taddItemsSold:function (addUp:number){\n\t\t\tthis.attributes[0].itemsSold += addUp;\n\t\t},\n\t\tname:'Zucaritas',\n\t\tattributes:[\n\t\t\t{\n\t\t\t\t\tindex:0,\n\t\t\t\t\titemsSold:90,\n\t\t\t\t}\n\t\t]\n\t},\n\t{\n\t\taddItemsSold:function (addUp:number){\n\t\t\tthis.attributes[0].itemsSold += addUp;\n\t\t},\n\t\tname:'Frootloops',\n\t\tattributes:[\n\t\t\t\t{\n\t\t\t\t\tindex:1,\n\t\t\t\t\titemsSold:10,\n\t\t\t\t}\n\t\t]\n\t},\n\t{\n\t\taddItemsSold:function (addUp:number){\n\t\t\tthis.attributes[0].itemsSold += addUp;\n\t\t},\n\t\tname:'Cornpops',\n\t\tattributes:[\n\t\t\t\t{\n\t\t\t\t\tindex:2,\n\t\t\t\t\titemsSold:1000,\n\t\t\t\t}\n\t\t]\n\t}\n];",
"result":"function cerealsTable():{headers:React.JSX.Element[], content:React.JSX.Element[]}{\n\tconst headers = cerealsObj.map((cereal,key) => {\n\t\treturn <th key={key}>{cereal.name}</th>\n\t});\n\n\tconst content = cerealsObj.map((cereal, key)=>{\n\t\treturn(\n\t\t\t<tr key={key}>\n\t\t\t\t<td>{Object.keys(cereal.attributes[0])[0]}</td>\n\t\t\t\t<td>{Object.keys(cereal.attributes[0])[1]}</td>\n\t\t\t\t<td> <button onClick={()=>cereal.addItemsSold(1)} >Add 1</button> </td>\n\t\t\t</tr>\n\t\t)\n\t});\n\n\treturn {headers, content};\n}"
}
]
}
Loading