-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[editor] Move Over Client Files & Fix Import Paths (#572)
# Move Over Client Files & Fix Import Paths Copy over all of the client files from existing editor directory. Fix all imports to relative (we can look into making them absolute again, just wasn't able to make it work within a few minutes) so that the modules can be found. Load the page without any JS errors (spinner showing since no config is loaded yet due to endpoint being 3000 by default):  --- Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/lastmile-ai/aiconfig/pull/572). * __->__ #572 * #571
- Loading branch information
Showing
63 changed files
with
4,647 additions
and
601 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| declare module "ufetch" { | ||
| export namespace ufetch { | ||
| function setCookie(key: string, value: string, expiry: number): void; | ||
| function getCookie(key: string): string; | ||
|
|
||
| function post(path: string, data: any, options?: any); | ||
| function get(path: string, options?: any); | ||
| function put(path: string, data: any, options?: any); | ||
| function _delete(path: string, data: any, options?: any); | ||
|
|
||
| export { _delete as delete, setCookie, getCookie, post, get, put }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,8 @@ | ||
| { | ||
| "short_name": "React App", | ||
| "name": "Create React App Sample", | ||
| "icons": [ | ||
| { | ||
| "src": "favicon.ico", | ||
| "sizes": "64x64 32x32 24x24 16x16", | ||
| "type": "image/x-icon" | ||
| }, | ||
| { | ||
| "src": "logo192.png", | ||
| "type": "image/png", | ||
| "sizes": "192x192" | ||
| }, | ||
| { | ||
| "src": "logo512.png", | ||
| "type": "image/png", | ||
| "sizes": "512x512" | ||
| } | ||
| ], | ||
| "short_name": "AIConfig Editor", | ||
| "name": "Editor for AIConfig JSON files", | ||
| "start_url": ".", | ||
| "display": "standalone", | ||
| "theme_color": "#000000", | ||
| "background_color": "#ffffff" | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import EditorContainer from "./components/EditorContainer"; | ||
| import { ClientAIConfig } from "./shared/types"; | ||
| import { Flex, Loader } from "@mantine/core"; | ||
| import { AIConfig } from "aiconfig"; | ||
| import { useCallback, useEffect, useState } from "react"; | ||
| import { ufetch } from "ufetch"; | ||
|
|
||
| export default function Editor() { | ||
| const [aiconfig, setAiConfig] = useState<ClientAIConfig | undefined>(); | ||
|
|
||
| const loadConfig = useCallback(async () => { | ||
| const res = await ufetch.post(`/api/load`, {}); | ||
|
|
||
| setAiConfig(res.aiconfig); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| loadConfig(); | ||
| }, [loadConfig]); | ||
|
|
||
| const onBackNavigation = useCallback(() => { | ||
| // TODO: Handle file back navigation | ||
| }, []); | ||
|
|
||
| const onSave = useCallback(async (aiconfig: AIConfig) => { | ||
| const res = await ufetch.post(`/api/aiconfig/save`, { | ||
| // path: file path, | ||
| aiconfig, | ||
| }); | ||
| return res; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div> | ||
| {!aiconfig ? ( | ||
| <Flex justify="center" mt="xl"> | ||
| <Loader size="xl" /> | ||
| </Flex> | ||
| ) : ( | ||
| <EditorContainer | ||
| aiconfig={aiconfig} | ||
| onBackNavigation={onBackNavigation} | ||
| onSave={onSave} | ||
| /> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
109 changes: 109 additions & 0 deletions
109
python/src/aiconfig/editor/client/src/components/EditorContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import PromptContainer from "./prompt/PromptContainer"; | ||
| import { Container, Group, Button, createStyles } from "@mantine/core"; | ||
| import { showNotification } from "@mantine/notifications"; | ||
| import { AIConfig, PromptInput } from "aiconfig"; | ||
| import { useCallback, useReducer, useState } from "react"; | ||
| import aiconfigReducer from "./aiconfigReducer"; | ||
| import { ClientAIConfig, clientConfigToAIConfig } from "../shared/types"; | ||
|
|
||
| type Props = { | ||
| aiconfig: ClientAIConfig; | ||
| onBackNavigation: () => void; | ||
| onSave: (aiconfig: AIConfig) => Promise<void>; | ||
| }; | ||
|
|
||
| const useStyles = createStyles((theme) => ({ | ||
| promptsContainer: { | ||
| [theme.fn.smallerThan("sm")]: { | ||
| padding: "0 0 200px 0", | ||
| }, | ||
| paddingBottom: 400, | ||
| }, | ||
| })); | ||
|
|
||
| export default function EditorContainer({ | ||
| aiconfig: initialAIConfig, | ||
| onBackNavigation, | ||
| onSave, | ||
| }: Props) { | ||
| const [isSaving, setIsSaving] = useState(false); | ||
| const [aiconfigState, dispatch] = useReducer( | ||
| aiconfigReducer, | ||
| initialAIConfig | ||
| ); | ||
|
|
||
| const save = useCallback(async () => { | ||
| setIsSaving(true); | ||
| try { | ||
| await onSave(clientConfigToAIConfig(aiconfigState)); | ||
| } catch (err: any) { | ||
| showNotification({ | ||
| title: "Error saving", | ||
| message: err.message, | ||
| color: "red", | ||
| }); | ||
| } finally { | ||
| setIsSaving(false); | ||
| } | ||
| }, [aiconfigState, onSave]); | ||
|
|
||
| const onChangePromptInput = useCallback( | ||
| async (promptIndex: number, newPromptInput: PromptInput) => { | ||
| dispatch({ | ||
| type: "UPDATE_PROMPT_INPUT", | ||
| index: promptIndex, | ||
| input: newPromptInput, | ||
| }); | ||
| // TODO: Call server-side endpoint to update prompt input | ||
| }, | ||
| [dispatch] | ||
| ); | ||
|
|
||
| const onUpdatePromptModelSettings = useCallback( | ||
| async (promptIndex: number, newModelSettings: any) => { | ||
| dispatch({ | ||
| type: "UPDATE_PROMPT_MODEL_SETTINGS", | ||
| index: promptIndex, | ||
| modelSettings: newModelSettings, | ||
| }); | ||
| // TODO: Call server-side endpoint to update model settings | ||
| }, | ||
| [dispatch] | ||
| ); | ||
|
|
||
| const { classes } = useStyles(); | ||
|
|
||
| // TODO: Implement editor context for callbacks, readonly state, etc. | ||
|
|
||
| return ( | ||
| <> | ||
| <Container maw="80rem"> | ||
| <Group grow m="sm"> | ||
| <Button onClick={onBackNavigation} variant="default" mr="lg"> | ||
| Back | ||
| </Button> | ||
| {/* <Text sx={{ textOverflow: "ellipsis", overflow: "hidden" }} size={14}> | ||
| {path || "No path specified"} | ||
| </Text> */} | ||
| <Button loading={isSaving} ml="lg" onClick={save}> | ||
| Save | ||
| </Button> | ||
| </Group> | ||
| </Container> | ||
| <Container maw="80rem" className={classes.promptsContainer}> | ||
| {aiconfigState.prompts.map((prompt: any, i: number) => { | ||
| return ( | ||
| <PromptContainer | ||
| index={i} | ||
| prompt={prompt} | ||
| key={prompt.name} | ||
| onChangePromptInput={onChangePromptInput} | ||
| onUpdateModelSettings={onUpdatePromptModelSettings} | ||
| defaultConfigModelName={aiconfigState.metadata.default_model} | ||
| /> | ||
| ); | ||
| })} | ||
| </Container> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.