update version (#122)

eng/MetaInfo.props

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
     <PropertyGroup>
-        <VersionPrefix>0.0.9</VersionPrefix>
+        <VersionPrefix>0.0.10</VersionPrefix>
         <Authors>LittleLittleCloud</Authors>
         <RepositoryType>git</RepositoryType>
         <PackageRequireLicenseAcceptance>false</PackageRequireLicenseAcceptance>

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: (
-							<Image
-								src={StepWiseIcon}
-								alt="avatar"
-								className="w-10 h-10 rounded-full"
-							/>
-						),
+						avatar: <Bot className="w-10 h-10 rounded-full" />,
 						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,

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<ChatHistoryState>((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<ChatTool> = ({
 	name,
 	displayValue,
 	values,
+	isExecuting,
 }) => {
 	const [collapsed, setCollapsed] = React.useState(true);
+	const [executing, setExecuting] = React.useState(isExecuting);
+
+	React.useEffect(() => {
+		setExecuting(isExecuting);
+	}, [isExecuting]);
 	return (
 		<div className="flex flex-col w-full gap-1">
 			<div
 				className="flex items-center gap-2"
 				onClick={() => setCollapsed(!collapsed)}
 			>
-				<SquareFunction className="h-5 w-5 text-gray-500" />
+				{executing && (
+					<Loader2 className="h-5 w-5 text-yellow-500 animate-spin" />
+				)}
+				{!executing && (
+					<CheckCircle2 className="h-5 w-5 text-green-500" />
+				)}
 				<span className="font-bold grow">{name}</span>
 				{collapsed ? (
 					<ChevronDown className="h-5 w-5 text-gray-500" />
@@ -172,16 +186,32 @@ export const ChatHistory: React.FC = () => {
 	}, [messages]);
 
 	return (
-		<div className="flex flex-col gap-2">
-			{messages.map((message, index) => (
-				<div key={index} className="flex gap-2">
-					{message.type === "text" && (
-						<ChatMessageCard {...message} index={index} />
-					)}
+		<div className="gap-2 border-b-2 flex flex-col h-full overflow-y-auto">
+			{messages.length > 0 &&
+				messages.map((message, index) => (
+					<div key={index}>
+						{message.type === "text" && (
+							<ChatMessageCard {...message} index={index} />
+						)}
 
-					{message.type === "tool" && <ChatToolCard {...message} />}
+						{message.type === "tool" && (
+							<ChatToolCard {...message} />
+						)}
+					</div>
+				))}
+			{messages.length === 0 && (
+				<div className="flex flex-col grow items-center justify-center text-muted-foreground">
+					<Bot className="h-20 w-20" />
+					<span className="text-4xl font-bold">Ask Geeno</span>
+					<span className="text-lg text-center">
+						Geeno is here to help you with your workflow
+					</span>
+					<span className="text-lg text-center">
+						To get start with Geeno, select LLM from LLM selector
+						and ask a question.
+					</span>
 				</div>
-			))}
+			)}
 		</div>
 	);
 };

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<ChatSideBarStatus>((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 (
+		<div className="w-full flex items-center justify-between ">
+			<div className="flex items-center">
+				<Button
+					variant="ghost"
+					size="smallIcon"
+					tooltip="Chat"
+					onClick={() => setPage("chat")}
+					className={
+						page === "chat"
+							? "border-b-2 border-blue-500 rounded-none"
+							: ""
+					}
+				>
+					<MessageSquare className="h-4 w-4" />
+				</Button>
+				<Button
+					variant="ghost"
+					size="smallIcon"
+					tooltip="Run History"
+					onClick={() => setPage("runHistory")}
+					className={
+						page === "runHistory"
+							? "border-b-2 border-blue-500 rounded-none"
+							: ""
+					}
+				>
+					<History className="h-4 w-4" />
+				</Button>
+				<Separator orientation="vertical" className="h-6" />
+			</div>
+
+			<div className="flex items-center space-x-2">
+				<Button
+					variant="ghost"
+					size="smallIcon"
+					tooltip={
+						page === "chat" ? "Clear Chat" : "Clear Run History"
+					}
+					onClick={() => {
+						if (page === "chat") {
+							deleteMessageAfter(0);
+						}
+
+						if (page === "runHistory") {
+							setSelectedStepRunHistory([]);
+						}
+					}}
+				>
+					<RotateCcw className="h-4 w-4" />
+				</Button>
+			</div>
+		</div>
+	);
+};