From bd301f820f34962b335989300893c93ca245c374 Mon Sep 17 00:00:00 2001 From: Xiaoyun Zhang Date: Sat, 14 Dec 2024 05:54:10 +0900 Subject: [PATCH] update version (#122) --- eng/MetaInfo.props | 2 +- .../components/chat-controlbar.tsx | 53 +++-- stepwise-studio/components/chat-history.tsx | 66 +++++-- .../components/chat-navigation-bar.tsx | 94 +++++++++ .../components/checkpoint-selector.tsx | 186 +++++++++--------- stepwise-studio/components/control-bar.tsx | 1 - .../components/llm-configuration.tsx | 1 - .../components/step-run-sidebar.tsx | 39 ++-- stepwise-studio/pages/_app.tsx | 5 +- 9 files changed, 287 insertions(+), 160 deletions(-) create mode 100644 stepwise-studio/components/chat-navigation-bar.tsx diff --git a/eng/MetaInfo.props b/eng/MetaInfo.props index ee30d11..d00ae82 100644 --- a/eng/MetaInfo.props +++ b/eng/MetaInfo.props @@ -1,7 +1,7 @@ - 0.0.9 + 0.0.10 LittleLittleCloud git false diff --git a/stepwise-studio/components/chat-controlbar.tsx b/stepwise-studio/components/chat-controlbar.tsx index cb087d0..390636a 100644 --- a/stepwise-studio/components/chat-controlbar.tsx +++ b/stepwise-studio/components/chat-controlbar.tsx @@ -1,4 +1,4 @@ -import { Loader2, SendHorizonal, Variable } from "lucide-react"; +import { Bot, Loader2, SendHorizonal, Variable } from "lucide-react"; import React, { useEffect } from "react"; import { Button } from "./ui/button"; import { useChatBoxStore } from "./chatbox"; @@ -47,6 +47,7 @@ export const ChatControlBar: React.FC = () => { const claudeApiKey = useClaudeConfiguration((state) => state.apiKey); const setMessage = useChatBoxStore((state) => state.setMessage); const addMessage = useChatHistoryStore((state) => state.addMessage); + const deleteMessage = useChatHistoryStore((state) => state.deleteMessage); const configuration = useStepwiseServerConfiguration(); const [busy, setBusy] = React.useState(false); const { user } = useAuth0(); @@ -229,8 +230,6 @@ ${ content: systemMessagePrompt, }; - toast.info(systemMessagePrompt); - setBusy(true); const chatCompletion = await openAIClient.chat.completions.create({ @@ -248,13 +247,7 @@ ${ message: chatCompletion.choices[0].message.content!, sender: llmName, fromUser: false, - avatar: ( - avatar - ), + avatar: , type: "text", }); } else { @@ -303,6 +296,17 @@ ${ (a) => a.result?.name === v.result?.name, ), ); + // add tool message + let toolMessage: ChatTool = { + type: "tool", + id: tool.id, + name: toolName, + arguments: argumentJson, + displayValue: "", + values: [], + isExecuting: true, + }; + addMessage(toolMessage); const newStepRunHistory = await executeStep(step, [ ...contextVariables, ...mergedVariables, @@ -321,27 +325,16 @@ ${ ) .join("\n"); - const toolMessage: ChatTool = { - type: "tool", - id: tool.id, - name: toolName, - arguments: argumentJson, - displayValue: values, - values: newStepRunHistory - .filter( - (v) => - v.result !== undefined && - v.status === "Completed", - ) - .map((v) => v.result!), - }; - - console.log(toolMessage); + toolMessage.isExecuting = false; + toolMessage.displayValue = values; + toolMessage.values = newStepRunHistory + .filter( + (v) => + v.result !== undefined && + v.status === "Completed", + ) + .map((v) => v.result!); - toast.info( - `Tool ${toolName} invoked with arguments ${argumentJson} and returned values ${values}`, - ); - addMessage(toolMessage); await sendMessage( "", workflow, diff --git a/stepwise-studio/components/chat-history.tsx b/stepwise-studio/components/chat-history.tsx index 8fb5e23..a97bb21 100644 --- a/stepwise-studio/components/chat-history.tsx +++ b/stepwise-studio/components/chat-history.tsx @@ -1,6 +1,15 @@ import { create } from "zustand"; import { Markdown } from "./markdown"; -import { ChevronDown, ChevronUp, SquareFunction, X } from "lucide-react"; +import { + Bot, + CheckCircle2, + ChevronDown, + ChevronUp, + Loader2, + RotateCcw, + SquareFunction, + X, +} from "lucide-react"; import { Button } from "./ui/button"; import React from "react"; import { useWorkflowStore } from "@/hooks/useWorkflow"; @@ -25,6 +34,7 @@ export interface ChatTool { arguments: string; displayValue: string; values?: VariableDTO[]; + isExecuting: boolean; // whether the tool is currently executing } export type ChatMessageContent = ChatMessage | ChatTool; @@ -55,14 +65,7 @@ export const useChatHistoryStore = create((set) => ({ set(() => ({ messages, })), - messages: [ - { - id: "123", - name: "shit", - displayValue: "fuck", - type: "tool", - } as ChatTool, - ], + messages: [], addMessage: (message) => set((state) => ({ messages: [...state.messages, message], @@ -118,15 +121,26 @@ export const ChatToolCard: React.FC = ({ name, displayValue, values, + isExecuting, }) => { const [collapsed, setCollapsed] = React.useState(true); + const [executing, setExecuting] = React.useState(isExecuting); + + React.useEffect(() => { + setExecuting(isExecuting); + }, [isExecuting]); return (
setCollapsed(!collapsed)} > - + {executing && ( + + )} + {!executing && ( + + )} {name} {collapsed ? ( @@ -172,16 +186,32 @@ export const ChatHistory: React.FC = () => { }, [messages]); return ( -
- {messages.map((message, index) => ( -
- {message.type === "text" && ( - - )} +
+ {messages.length > 0 && + messages.map((message, index) => ( +
+ {message.type === "text" && ( + + )} - {message.type === "tool" && } + {message.type === "tool" && ( + + )} +
+ ))} + {messages.length === 0 && ( +
+ + Ask Geeno + + Geeno is here to help you with your workflow + + + To get start with Geeno, select LLM from LLM selector + and ask a question. +
- ))} + )}
); }; diff --git a/stepwise-studio/components/chat-navigation-bar.tsx b/stepwise-studio/components/chat-navigation-bar.tsx new file mode 100644 index 0000000..deac1a1 --- /dev/null +++ b/stepwise-studio/components/chat-navigation-bar.tsx @@ -0,0 +1,94 @@ +import React from "react"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; +import { + Smartphone, + MessageSquare, + Plus, + Clock, + MoreHorizontal, + X, + History, + Loader2, + RotateCcw, +} from "lucide-react"; +import { create } from "zustand"; +import { useChatHistoryStore } from "./chat-history"; +import { useStepRunHistoryStore } from "@/hooks/useStepRunHistory"; +import { stat } from "fs"; + +export type ChatSideBarPage = "chat" | "runHistory"; +export interface ChatSideBarStatus { + page: ChatSideBarPage; + setPage: (page: ChatSideBarPage) => void; +} + +export const useChatSideBarStore = create((set) => ({ + page: "chat", + setPage: (page) => set({ page }), +})); + +export const ChatNavigationTopBar: React.FC = () => { + const page = useChatSideBarStore((state) => state.page); + const setPage = useChatSideBarStore((state) => state.setPage); + const deleteMessageAfter = useChatHistoryStore( + (state) => state.deleteMessageAfter, + ); + const setSelectedStepRunHistory = useStepRunHistoryStore( + (state) => state.setSelectedStepRunHistory, + ); + return ( +
+
+ + + +
+ +
+ +
+
+ ); +}; diff --git a/stepwise-studio/components/checkpoint-selector.tsx b/stepwise-studio/components/checkpoint-selector.tsx index cdf74d1..2fa64ba 100644 --- a/stepwise-studio/components/checkpoint-selector.tsx +++ b/stepwise-studio/components/checkpoint-selector.tsx @@ -7,7 +7,7 @@ import { GetApiV1StepWiseControllerV1ListCheckpointsData, WorkflowDTO, } from "@/stepwise-client"; -import { buttonVariants } from "./ui/button"; +import { Button, buttonVariants } from "./ui/button"; import { Select, SelectContent, @@ -39,103 +39,101 @@ export const CheckpointSelector: FC = ({}) => { } = useCheckpoints(); return ( -
- Checkpoint +
+
+ Checkpoint - {loading ? ( - - ) : ( - { + const checkpoint = checkpoints.find( + (c) => c.name === value, + ); + if (checkpoint) { + await loadCheckpoint(checkpoint); + toast.info("Load Checkpoint", { + description: `Checkpoint ${checkpoint.name} has been loaded`, + }); + } + }} disabled={checkpoints.length === 0} > - - - - {checkpoints.map((checkpoint) => ( -
- - {checkpoint.name} - - {deletingId === checkpoint.name ? ( - - ) : ( - - )} -
- ))} - - - )} - + )} +
+ ))} + + )} +
+ + {error && {error}}
); diff --git a/stepwise-studio/components/control-bar.tsx b/stepwise-studio/components/control-bar.tsx index 079e3da..c7a548b 100644 --- a/stepwise-studio/components/control-bar.tsx +++ b/stepwise-studio/components/control-bar.tsx @@ -125,7 +125,6 @@ export const ControlBar: FC = (props) => { className="w-12 p-1 text-xs bg-background rounded-lg border border-accent" />
-
); }; diff --git a/stepwise-studio/components/llm-configuration.tsx b/stepwise-studio/components/llm-configuration.tsx index 6a643cd..ca14ec3 100644 --- a/stepwise-studio/components/llm-configuration.tsx +++ b/stepwise-studio/components/llm-configuration.tsx @@ -5,7 +5,6 @@ export const LLMConfiguration: React.FC = () => { return (
-
); }; diff --git a/stepwise-studio/components/step-run-sidebar.tsx b/stepwise-studio/components/step-run-sidebar.tsx index 28a3ec2..ddee266 100644 --- a/stepwise-studio/components/step-run-sidebar.tsx +++ b/stepwise-studio/components/step-run-sidebar.tsx @@ -5,6 +5,7 @@ import { StepRunDTO, WorkflowDTO } from "@/stepwise-client"; import Workflow from "./workflow"; import ThemeSwitch from "./theme-switch"; import { + Bot, ChevronDown, ChevronUp, Clock, @@ -26,7 +27,12 @@ import { StepNodeStatus, ToStepNodeStatus } from "@/lib/stepRunUtils"; import { Textarea } from "./ui/textarea"; import { ChatControlBar } from "./chat-controlbar"; import { ChatBox } from "./chatbox"; -import { ChatHistory } from "./chat-history"; +import { ChatHistory, useChatHistoryStore } from "./chat-history"; +import { + ChatNavigationTopBar, + useChatSideBarStore, +} from "./chat-navigation-bar"; +import { CheckpointSelector } from "./checkpoint-selector"; export interface StepRunSidebarProps {} @@ -145,18 +151,27 @@ const StepRunCard: React.FC = (props) => { const StepRunSidebar: React.FC = () => { const { selectedStepRunHistory } = useStepRunHistoryStore(); - + const page = useChatSideBarStore((state) => state.page); return ( -
-
- {/* {selectedStepRunHistory.map((stepRun, index) => ( - - ))} */} - -
- {/* add a chat input to the bottom */} - - +
+ + {page === "chat" && ( +
+
+ +
+ + +
+ )} + {page === "runHistory" && } + {page === "runHistory" && ( +
+ {selectedStepRunHistory.map((stepRun, index) => ( + + ))} +
+ )}
); }; diff --git a/stepwise-studio/pages/_app.tsx b/stepwise-studio/pages/_app.tsx index 0e98c70..e5f5678 100644 --- a/stepwise-studio/pages/_app.tsx +++ b/stepwise-studio/pages/_app.tsx @@ -25,7 +25,6 @@ export default function App({ Component, pageProps }: AppProps) { useEffect(() => { setRedirectUri(window.location.origin); readApiKeyFromStorage(); - readClaudeApiKeyFromStorage(); }, []); return stepwiseConfiguration?.enableAuth0Authentication && @@ -48,7 +47,7 @@ export default function App({ Component, pageProps }: AppProps) { - + @@ -57,7 +56,7 @@ export default function App({ Component, pageProps }: AppProps) { - + );