add release note 0.0.10 (#123)

Author: LittleLittleCloud

stepwise-studio/components/chat-controlbar.tsx

@@ -405,6 +405,28 @@ ${
 		// 	}
 		// }
 	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (event.ctrlKey && event.key === "Enter") {
+			event.preventDefault();
+			if (!busy && message.trim() !== "") {
+				sendMessage(
+					message,
+					selectedWorkflow!,
+					selectedStepRunHistory,
+					chatHistory,
+				);
+			}
+		}
+	};
+
+	useEffect(() => {
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [busy, message, selectedWorkflow, selectedStepRunHistory, chatHistory]);
+
 	return (
 		<div className="flex items-center justify-end w-full">
 			<div className="flex grow">
@@ -423,6 +445,7 @@ ${
 					)
 				}
 				disabled={busy || message === ""}
+				tooltip="Send message (Ctrl + Enter)"
 			>
 				<SendHorizonal />
 			</Button>

stepwise-studio/components/chat-history.tsx

@@ -16,6 +16,8 @@ import { useWorkflowStore } from "@/hooks/useWorkflow";
 import { stat } from "fs";
 import { VariableDTO } from "@/stepwise-client";
 import { VariableCard } from "./variable-card";
+import { CopyToClipboardIcon } from "./copy-to-clipboard-icon";
+import { cn } from "@/lib/utils";
 
 export type ChatMessageType = "text" | "tool";
 
@@ -85,12 +87,13 @@ export const ChatMessageCard: React.FC<ChatMessage & { index: number }> = ({
 	sender,
 	avatar,
 	index,
+	fromUser,
 }) => {
 	const deleteMessageAfter = useChatHistoryStore(
 		(state) => state.deleteMessageAfter,
 	);
 	return (
-		<div className="flex flex-col w-full gap-1 group">
+		<div className={cn("flex flex-col w-full gap-1 group")}>
 			<div className="flex items-center w-full relative ">
 				<div className="flex items-center gap-2">
 					{avatar && typeof avatar === "string" && (
@@ -103,14 +106,27 @@ export const ChatMessageCard: React.FC<ChatMessage & { index: number }> = ({
 					{avatar && typeof avatar !== "string" && avatar}
 					{sender && <span className="font-bold">{sender}</span>}
 				</div>
-				{/* add x button */}
-				<Button
-					size="tinyIcon"
-					onClick={() => deleteMessageAfter(index)}
-					className="absolute right-0 opacity-0 group-hover:opacity-100 transition-opacity"
-				>
-					<X />
-				</Button>
+				{/* if fromUser is false, add copy button */}
+				<div className="flex items-center grow opacity-0 group-hover:opacity-100 transition-opacity justify-end gap-2">
+					{fromUser === false && (
+						<CopyToClipboardIcon
+							buttonVariants={{
+								variant: "ghost",
+								size: "tinyIcon",
+							}}
+							textValue={message}
+							showCopiedText={false}
+						/>
+					)}
+					{/* add x button */}
+					<Button
+						variant="ghost"
+						size="tinyIcon"
+						onClick={() => deleteMessageAfter(index)}
+					>
+						<X />
+					</Button>
+				</div>
 			</div>
 			<Markdown className="p-0">{message}</Markdown>
 		</div>
@@ -186,7 +202,7 @@ export const ChatHistory: React.FC = () => {
 	}, [messages]);
 
 	return (
-		<div className="gap-2 border-b-2 flex flex-col h-full overflow-y-auto">
+		<div className="gap-2 flex flex-col h-full overflow-y-auto">
 			{messages.length > 0 &&
 				messages.map((message, index) => (
 					<div key={index}>

stepwise-studio/components/copy-to-clipboard-icon.tsx

@@ -1,16 +1,20 @@
 import { ClipboardCheck, Clipboard } from "lucide-react";
 import { FC, useEffect, useState } from "react";
+import { Button, buttonVariants } from "./ui/button";
+import { VariantProps } from "class-variance-authority";
 
 interface CopyToClipboardIconProps {
 	textValue: string;
 	size?: number;
 	showCopiedText?: boolean;
+	buttonVariants?: VariantProps<typeof buttonVariants>;
 }
 
 export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({
 	textValue,
 	size = 18,
 	showCopiedText = true,
+	buttonVariants,
 }) => {
 	const [isCopied, setIsCopied] = useState<Boolean>(false);
 	const [valueToCopy, setValueToCopy] = useState<string>("");
@@ -34,16 +38,15 @@ export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({
 	};
 
 	return (
-		<button
-			className="flex items-center rounded py-0.5 text-xs focus:outline-none"
+		<Button
+			variant={buttonVariants ? buttonVariants.variant : "ghost"}
+			size={buttonVariants ? buttonVariants.size : "tinyIcon"}
+			tooltip="Copy to clipboard"
+			className="flex items-center rounded py-0.5 gap-1 text-xs focus:outline-none"
 			onClick={copyToClipboard}
 		>
-			{isCopied ? (
-				<ClipboardCheck size={size} className="mr-1.5" />
-			) : (
-				<Clipboard size={size} className="mr-1.5" />
-			)}
+			{isCopied ? <ClipboardCheck /> : <Clipboard />}
 			{showCopiedText && <span>{isCopied ? "Copied!" : "Copy"}</span>}
-		</button>
+		</Button>
 	);
 };

stepwise-studio/components/ui/button.tsx

@@ -81,7 +81,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				<TooltipProvider>
 					<Tooltip delayDuration={tooltipDelayDuration}>
 						<TooltipTrigger asChild>
-							{buttonComponent}
+							<div>{buttonComponent}</div>
 						</TooltipTrigger>
 						<TooltipContent side={tooltipSide}>
 							<p>{tooltip}</p>

stepwise-studio/components/variable-card.tsx

@@ -44,8 +44,8 @@ export const VariableCard: React.FC<VariableCardProps> = (props) => {
 					</div>
 					<div className="w-full px-1 flex justify-end">
 						<CopyToClipboardIcon
-							size={12}
 							textValue={variable.displayValue}
+							showCopiedText={false}
 						/>
 					</div>
 				</div>

website/release_notes/0_0.md

@@ -1,3 +1,26 @@
+# Release Notes - StepWise v0.0.10 🚀
+
+We are excited to announce the release of StepWise version 0.0.10. This update brings several enhancements and fixes aimed at improving user experience and expanding the functionality of our platform. Below is a summary of the changes made in this release:
+
+## ✨ Enhancements
+- **💬 New Feature - Geeno Chat:** We have integrated Geeno into the right sidebar, offering a chat-based interface for interacting with your workflows and enhancing user engagement. [#109](https://github.com/LittleLittleCloud/StepWise/issues/109)
+- **🔍 Right Sidebar Enhancement:** The details of each step are now visible in the right sidebar, making it easier for users to track their workflow progress. [#112](https://github.com/LittleLittleCloud/StepWise/issues/112)
+- **📱 Mobile UI Improvements:** Enhancements have been made to the mobile user interface, ensuring a better and more responsive user experience on both tablets and phones. [#110](https://github.com/LittleLittleCloud/StepWise/issues/110)
+
+## 🖥️ UI Updates
+- **🎨 Use Shadcn Sidebar:** The web UI has been upgraded to use the Shadcn sidebar, providing a modern and sleek look to our platform. [#103](https://github.com/LittleLittleCloud/StepWise/issues/103)
+
+## 🔧 Code Refactoring
+- **🔄 API Simplification:** The `IStepWiseEngine` API has been refactored for clarity and ease of use, streamlining the process for developers to integrate and interact with StepWise. [#102](https://github.com/LittleLittleCloud/StepWise/issues/102)
+
+## 🗺️ Roadmap
+- **🤖 Agentify Workflow:** Progress continues on agentifying stepwise workflows, enabling seamless control and operation through the use of agent intermediaries. [#82](https://github.com/LittleLittleCloud/StepWise/issues/82)
+
+We would like to thank our community for the valuable feedback and contributions that make each release more impactful. Your support is essential in driving the ongoing evolution of StepWise!
+
+For further details on each issue, please refer to our [GitHub repository](https://github.com/LittleLittleCloud/StepWise).
+
+
 # Release Notes - StepWise v0.0.9 🚀
 
 Welcome to version 0.0.9 of StepWise! We are excited to introduce new features and enhancements designed to enhance the functionality and user experience of both the StepWise Server and WebUI. Here's what's new: