Release 0.0.12 (#125)

* update

* update

* update

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.11</VersionPrefix>
+        <VersionPrefix>0.0.12</VersionPrefix>
         <Authors>LittleLittleCloud</Authors>
         <RepositoryType>git</RepositoryType>
         <PackageRequireLicenseAcceptance>false</PackageRequireLicenseAcceptance>

src/StepWise.Core/Step.cs

@@ -407,7 +407,7 @@ public override string ToString()
     {
         if (this.Step is null && this.StepRunType == StepRunType.Variable)
         {
-            return $"{_result!.Name}[{_result!.Generation}]";
+            return $"{_result!.Name}[{_result!.Generation}]:{_result!.Value}";
         }
 
         // format [gen] stepName([gen]input1, [gen]input2, ...)

src/StepWise.Core/StepWiseEngine.cs

@@ -267,6 +267,12 @@ private async Task ExecuteSingleStepAsync(
 
                     _stepRunQueue.Add(variable);
                 }
+
+                // TODO
+                // maybe we should support the scenario when the res is null
+                // in this case, we should do the following:
+                // - clear the existing value in the context
+                // - add all the steps that depend on the value to the task queue again
             }
             catch (InvalidOperationException ioe) when (ioe.Message.Contains("The collection has been marked as complete with regards to additions"))
             {

stepwise-studio/components/chat-controlbar.tsx

@@ -10,7 +10,7 @@ import {
 } from "./chat-history";
 import { useStepwiseServerConfiguration } from "@/hooks/useVersion";
 import { useAuth0 } from "@auth0/auth0-react";
-import { LLMSelector, useLLMSelectorStore } from "./llm-selector";
+import { LLMSelector, OpenAI_LLM, useLLMSelectorStore } from "./llm-selector";
 import { useOpenAIConfiguration } from "./openai-configure-card";
 import OpenAI from "openai";
 import Image from "next/image";
@@ -41,13 +41,8 @@ export const ChatControlBar: React.FC = () => {
 	const message = useChatBoxStore((state) => state.message);
 	const chatHistory = useChatHistoryStore((state) => state.messages);
 	const selectedLLM = useLLMSelectorStore((state) => state.selectedLLM);
-	const claudeLLMs = useClaudeConfiguration((state) => state.LLMTypes);
-	const openaiLLMs = useOpenAIConfiguration((state) => state.LLMTypes);
-	const openAIApiKey = useOpenAIConfiguration((state) => state.apiKey);
-	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();
@@ -68,6 +63,11 @@ export const ChatControlBar: React.FC = () => {
 		stepRunHistory: StepRunDTO[],
 		chatHistory: ChatMessageContent[],
 	) => {
+		if (selectedLLM === undefined) {
+			toast.error("Please select a language model");
+			return;
+		}
+
 		if (message !== "") {
 			let userMessage: ChatMessage;
 			if (configuration?.enableAuth0Authentication) {
@@ -106,6 +106,8 @@ You are a helpful workflow assistant. Your name is ${llmName}.
 
 You are currently assisting user with the workflow ${workflow.name}. You can either invoke the workflow or provide assistance with the steps in the workflow.
 
+When invoking a step in workflow, you don't need to consider whether it's pre-requisite steps are executed or not. The workflow engine will take care of it. So you can directly invoke the step.
+
 Each workflow is associated with a context which contains the intermediate results of the workflow execution.
 
 ## current context:
@@ -116,12 +118,17 @@ ${
 				.map((v) => `${v.result?.name}: ${v.result?.displayValue}`)
 				.join("\n")
 }
+
+You don't need to provide the arguments if they are already available in the context. You can override the context variables by providing the arguments explicitly.
 `;
 
 		const steps = workflow.steps;
-		if (openaiLLMs.find((f) => f === selectedLLM) && openAIApiKey) {
+		if (
+			selectedLLM?.type === "OpenAI" &&
+			(selectedLLM as OpenAI_LLM).apiKey
+		) {
 			const openAIClient = new OpenAI({
-				apiKey: openAIApiKey,
+				apiKey: (selectedLLM as OpenAI_LLM).apiKey,
 				dangerouslyAllowBrowser: true,
 			});
 
@@ -147,7 +154,7 @@ ${
 								id: msg.id,
 								function: {
 									name: msg.name,
-									arguments: msg.arguments,
+									arguments: msg.argument,
 								} as ChatCompletionMessageToolCall.Function,
 							},
 						] as ChatCompletionMessageToolCall[],
@@ -175,7 +182,8 @@ ${
 											"Number",
 											"Boolean",
 											"String[]",
-											"Integer",
+											"Int32",
+											"Int64",
 											"Float",
 											"Double",
 										];
@@ -187,6 +195,8 @@ ${
 											Boolean: "boolean",
 											"String[]": "array",
 											Integer: "integer",
+											Int32: "integer",
+											Int64: "integer",
 											Float: "number",
 											Double: "number",
 										};
@@ -198,6 +208,8 @@ ${
 											Boolean: undefined,
 											"String[]": "string",
 											Integer: undefined,
+											Int32: undefined,
+											Int64: undefined,
 											Float: undefined,
 											Double: undefined,
 										};
@@ -242,7 +254,7 @@ ${
 				const chatCompletion =
 					await openAIClient.chat.completions.create({
 						messages: [systemMessage, ...openAIChatHistory],
-						model: selectedLLM as ChatModel,
+						model: (selectedLLM as OpenAI_LLM).modelId,
 						tool_choice: "auto",
 						tools: tools,
 						parallel_tool_calls: false,
@@ -296,11 +308,13 @@ ${
 						})
 						.filter((v) => v !== undefined);
 
+					console.log(argumentsArray);
+
 					// merge the arguments with the context variables
-					// remove the context variables that are overriden by the arguments
-					const mergedVariables = argumentsArray.filter(
+					// and override the context variables with the arguments
+					const mergedVariables = contextVariables.filter(
 						(v) =>
-							!contextVariables.find(
+							!argumentsArray.find(
 								(a) => a.result?.name === v.result?.name,
 							),
 					);
@@ -309,15 +323,15 @@ ${
 						type: "tool",
 						id: tool.id,
 						name: toolName,
-						arguments: argumentJson,
+						argument: argumentJson,
 						displayValue: "",
 						values: [],
 						isExecuting: true,
 					};
 					addMessage(toolMessage);
 					const newStepRunHistory = await executeStep(step, [
-						...contextVariables,
 						...mergedVariables,
+						...argumentsArray,
 					]);
 
 					if (newStepRunHistory.length > 0) {
@@ -452,7 +466,7 @@ ${
 						chatHistory,
 					)
 				}
-				disabled={busy || message === ""}
+				disabled={busy || message === "" || selectedLLM === undefined}
 				tooltip="Send message (Ctrl + Enter)"
 			>
 				<SendHorizonal />

stepwise-studio/components/chat-history.tsx

@@ -33,7 +33,7 @@ export interface ChatTool {
 	type: "tool";
 	id?: string;
 	name: string;
-	arguments: string;
+	argument: string;
 	displayValue: string;
 	values?: VariableDTO[];
 	isExecuting: boolean; // whether the tool is currently executing
@@ -138,6 +138,7 @@ export const ChatToolCard: React.FC<ChatTool> = ({
 	displayValue,
 	values,
 	isExecuting,
+	argument,
 }) => {
 	const [collapsed, setCollapsed] = React.useState(true);
 	const [executing, setExecuting] = React.useState(isExecuting);
@@ -166,6 +167,7 @@ export const ChatToolCard: React.FC<ChatTool> = ({
 			</div>
 			{!collapsed && values && (
 				<div className="flex flex-col justify-between bg-accent p-2 rounded-lg overflow-x-auto">
+					<Markdown>{argument}</Markdown>
 					{values.map((value, index) => (
 						<VariableCard key={index} variable={value} />
 					))}

stepwise-studio/components/claude-configure-card.tsx

@@ -28,9 +28,6 @@ export const useClaudeConfiguration = create<ClaudeConfigurationState>(
 	(set, get) => ({
 		apiKey: undefined,
 		setApiKey: (apiKey: string) => {
-			get().LLMTypes.forEach((llm) => {
-				useLLMSelectorStore.getState().addLLM(llm);
-			});
 			set({ apiKey });
 		},
 		readApiKeyFromStorage: () => {
@@ -48,9 +45,6 @@ export const useClaudeConfiguration = create<ClaudeConfigurationState>(
 			}
 		},
 		clearApiKey: () => {
-			get().LLMTypes.forEach((llm) => {
-				useLLMSelectorStore.getState().deleteLLM(llm);
-			});
 			set({ apiKey: undefined });
 		},
 		LLMTypes: [

stepwise-studio/components/control-bar.tsx

@@ -5,7 +5,7 @@
 // | <autolayout> | <run> | <clean> | <max_parallel>: <input> | <max_steps>: <input> |
 
 import { ChangeEvent, FC, useEffect, useState } from "react";
-import { buttonVariants } from "./ui/button";
+import { Button, buttonVariants } from "./ui/button";
 import { cn } from "@/lib/utils";
 import {
 	GithubIcon,
@@ -50,13 +50,10 @@ export const ControlBar: FC<ControlBarProps> = (props) => {
 		<div className="flex flex-wrap justify-between items-center gap-2 px-2 p-1 bg-background shadow-xl rounded-md">
 			<div className="flex items-center gap-1">
 				{isMobile && <SidebarTrigger />}
-				<button
-					className={cn(
-						buttonVariants({
-							variant: isRunning ? "disabled" : "ghost",
-							size: "tinyIcon",
-						}),
-					)}
+				<Button
+					variant={isRunning ? "disabled" : "ghost"}
+					size="tinyIcon"
+					tooltip="Run all steps"
 					onClick={() => {
 						if (!isRunning) {
 							props.onRunClick();
@@ -68,41 +65,42 @@ export const ControlBar: FC<ControlBarProps> = (props) => {
 					) : (
 						<Play size={iconSize} />
 					)}
-				</button>
-				<button
-					className={cn(
-						buttonVariants({
-							variant: "ghost",
-							size: "tinyIcon",
-						}),
-					)}
+				</Button>
+				<Button
+					variant={isRunning ? "disabled" : "ghost"}
+					size="tinyIcon"
+					tooltip="Reset all step run results"
 					onClick={props.onResetStepRunResultClick}
 				>
 					<RotateCcw size={iconSize} />
-				</button>
-				<button
-					className={cn(
-						buttonVariants({
-							variant: "ghost",
-							size: "tinyIcon",
-						}),
-					)}
+				</Button>
+				<Button
+					variant={isRunning ? "disabled" : "ghost"}
+					size="tinyIcon"
 					onClick={props.onAutoLayoutClick}
+					tooltip="Auto layout"
 				>
 					<LayoutGrid size={iconSize} />
-				</button>
-				<Link
-					href={"https://github.com/LittleLittleCloud/StepWise"}
-					className={cn(
-						buttonVariants({
-							variant: "ghost",
-							size: "tinyIcon",
-						}),
-					)}
-					target="_blank"
+				</Button>
+				<Button
+					variant="link"
+					size="tinyIcon"
+					tooltip="Github"
+					onClick={() => {}}
 				>
-					<GithubIcon size={iconSize} />
-				</Link>
+					<Link
+						href={"https://github.com/LittleLittleCloud/StepWise"}
+						className={cn(
+							buttonVariants({
+								variant: "ghost",
+								size: "tinyIcon",
+							}),
+						)}
+						target="_blank"
+					>
+						<GithubIcon size={iconSize} />
+					</Link>
+				</Button>
 			</div>
 			{/* vertical divider */}
 			<div className="h-6 w-0.5 bg-accent/50" />

stepwise-studio/components/llm-configuration.tsx

@@ -1,10 +1,17 @@
 import { ClaudeConfigCard } from "./claude-configure-card";
+import { useLLMSelectorStore } from "./llm-selector";
 import { OpenAIConfigCard } from "./openai-configure-card";
 
 export const LLMConfiguration: React.FC = () => {
+	const availableLLMs = useLLMSelectorStore((state) => state.availableLLMs);
 	return (
 		<div className="flex flex-wrap p-10 gap-10 overflow-y-auto">
 			<OpenAIConfigCard />
+			{availableLLMs.map((llm) => {
+				if (llm.type === "AOAI") {
+					return <ClaudeConfigCard key={llm.name} />;
+				}
+			})}
 		</div>
 	);
 };