Action Button Replacement

moved the action button so it does not jump around when streaming.
lastmile-ai · Jan 10, 2024 · 43fbc07 · 43fbc07
1 parent 21c1f86
commit 43fbc07
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/python/src/aiconfig/editor/client/src/LocalEditor.tsx b/python/src/aiconfig/editor/client/src/LocalEditor.tsx
@@ -280,8 +280,12 @@ export default function Editor() {
               ".mantine-InputWrapper-label": {
                 display: "none",
               },
+              ".cellInputField": {
+                width: "-webkit-fill-available",
+              },
             },
             ".sidePanel": {
+              minWidth: "32px",
               border: "1px solid rgba(226,232,255,.1)",
               borderLeft: "none",
               borderTopRightRadius: "4px",
@@ -311,8 +315,10 @@ export default function Editor() {
             ".runPromptButton": {
               background: "#ff1cf7",
               color: "white",
-              borderRadius: "0",
-              height: "auto",
+              borderRadius: "4px",
+              marginLeft: "4px",
+              width: "44px",
+              height: "44px",
               "&:hover": {
                 background: "#ff46f8",
               },

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx
@@ -102,12 +102,12 @@ export default memo(function PromptActionBar({
               )}
             </Tabs>
           </Container>
-          <RunPromptButton
+          {/* <RunPromptButton
             isRunning={prompt._ui.isRunning}
             cancel={onCancel}
             runPrompt={onRunPrompt}
             size="full"
-          />
+          /> */}
         </>
       ) : (
         <Flex direction="column" justify="space-between" h="100%">
@@ -116,12 +116,12 @@ export default memo(function PromptActionBar({
               <IconClearAll />
             </ActionIcon>
           </Flex>
-          <RunPromptButton
+          {/* <RunPromptButton
             isRunning={prompt._ui.isRunning}
             cancel={onCancel}
             runPrompt={onRunPrompt}
             size="compact"
-          />
+          /> */}
         </Flex>
       )}
     </Flex>

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx
@@ -9,6 +9,7 @@ import { memo, useCallback } from "react";
 import PromptOutputBar from "./PromptOutputBar";
 import PromptName from "./PromptName";
 import ModelSelector from "./ModelSelector";
+import RunPromptButton from "./RunPromptButton";
 
 type Props = {
   prompt: ClientPrompt;
@@ -83,6 +84,18 @@ export default memo(function PromptContainer({
   const promptSchema = getPromptSchema(prompt, defaultConfigModelName);
   const inputSchema = promptSchema?.input;
 
+  const onCancel = useCallback(async () => {
+    if (prompt._ui.cancellationToken) {
+      return await cancel(prompt._ui.cancellationToken);
+    } else {
+      // TODO: saqadri - Maybe surface an error to the user, or explicitly throw an error in this case.
+      console.log(
+        `Warning: No cancellation token found for prompt: ${prompt.name}`
+      );
+      return;
+    }
+  }, [prompt.name, prompt._ui.cancellationToken, cancel]);
+
   return (
     <Flex justify="space-between" w="100%">
       <Card withBorder className="cellStyle">
@@ -100,11 +113,20 @@ export default memo(function PromptContainer({
               defaultConfigModelName={defaultConfigModelName}
             />
           </Flex>
-          <PromptInputRenderer
-            input={prompt.input}
-            schema={inputSchema}
-            onChangeInput={onChangeInput}
-          />
+          <Flex>
+            <PromptInputRenderer
+              input={prompt.input}
+              schema={inputSchema}
+              onChangeInput={onChangeInput}
+            />
+            <RunPromptButton
+              isRunning={prompt._ui.isRunning}
+              cancel={onCancel}
+              runPrompt={runPrompt}
+              size="compact"
+            />
+          </Flex>
+
           <PromptOutputBar />
           {prompt.outputs && <PromptOutputsRenderer outputs={prompt.outputs} />}
         </Flex>

diff --git a/...r/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx b/...r/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx
@@ -75,6 +75,7 @@ export default memo(function PromptInputSchemaRenderer(props: Props) {
         onChange={(e) => props.onChangeInput(e.target.value)}
         placeholder="Type a prompt"
         autosize
+        className="cellInputField"
       />
     );
   } else {