Position WorkflowChat in the bottom right corner

- Updated WorkflowChat component to use fixed positioning
- Enhanced ChatHeader to accept an icon prop.

web/src/components/assistants/WorkflowChat.tsx

@@ -1,14 +1,11 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import useWorkflowChatStore from "../../stores/WorkflowChatStore";
-import {
-  Message,
-  MessageImageContent,
-  MessageTextContent
-} from "../../stores/ApiTypes";
+import { Message } from "../../stores/ApiTypes";
 import ChatView from "./ChatView";
 import { useNodeStore } from "../../stores/NodeStore";
 import { Alert, Box, Fade } from "@mui/material";
 import { ChatHeader } from "./chat/ChatHeader";
+import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
 
 interface WorkflowChatProps {
   workflow_id: string;
@@ -72,50 +69,45 @@ const WorkflowChat: React.FC<WorkflowChatProps> = ({
   return (
     <Box
       sx={{
-        position: "absolute",
-        bottom: 0,
-        left: "50%",
-        transform: "translateX(-50%)"
+        position: "fixed",
+        right: 20,
+        bottom: 20,
+        zIndex: 1000
       }}
     >
       <Box
         className="workflow-chat-container"
         sx={{
-          position: "absolute",
-          bottom: 0,
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: isMinimized ? "180px" : "50vw",
-          maxHeight: isMinimized ? "64px" : "80vh",
-          height: isMinimized ? "50px" : "50vh",
-          minHeight: isMinimized ? "50px" : "250px",
+          position: "relative",
+          width: isMinimized ? "120px" : "400px",
+          maxHeight: "600px",
+          height: isMinimized ? "56px" : "500px",
+          transform: "translate(0, 0)",
           display: "flex",
           flexDirection: "column",
           backgroundColor: isOpen
             ? "rgba(8, 8, 8, 0.9)"
             : "rgba(16, 16, 16, 0.5)",
           boxShadow: isOpen
-            ? "0 -32px 64px rgba(0, 0, 0, 0.2)"
-            : "0 -16px 32px rgba(0, 0, 0, 0.1)",
-          borderTopLeftRadius: 8,
-          borderTopRightRadius: 8,
+            ? "0 0 32px rgba(0, 0, 0, 0.3)"
+            : "0 0 16px rgba(0, 0, 0, 0.2)",
+          borderRadius: 8,
           overflow: "hidden",
           m: 0,
-          p: 2,
-          // transitionProperty: "width, height, min-height, max-height",
-          // transitionDuration: "300ms",
-          // transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+          p: 0,
           transition: "all 0.3s ease-out",
           backdropFilter: "blur(10px)",
-          pointerEvents: isOpen ? "auto" : "none"
+          pointerEvents: isOpen ? "auto" : "none",
+          cursor: "default"
         }}
       >
         <ChatHeader
           isMinimized={isMinimized}
           onMinimize={handleMinimize}
           onReset={handleReset}
           messagesCount={messages.length}
-          title="Workflow Chat"
+          title="Chat"
+          icon={<ChatBubbleOutlineIcon sx={{ fontSize: "1.5em" }} />}
           description="Chat with your workflow"
         />
 
@@ -125,8 +117,9 @@ const WorkflowChat: React.FC<WorkflowChatProps> = ({
               flex: 1,
               display: "flex",
               flexDirection: "column",
-              height: "calc(100% - 64px)",
-              overflow: "hidden"
+              // height: "calc(100% - 20px)",
+              overflow: "hidden",
+              pb: 5
             }}
           >
             {error && <Alert severity="error">{error}</Alert>}

web/src/components/assistants/chat/ChatHeader.tsx

@@ -9,6 +9,7 @@ interface ChatHeaderProps {
   onReset?: () => void;
   messagesCount: number;
   title?: string;
+  icon?: React.ReactNode;
   description?: string;
 }
 
@@ -18,19 +19,25 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
   onReset,
   messagesCount,
   title,
+  icon,
   description
 }) => (
   <Box
     className="chat-header"
     sx={{
       display: "flex",
+      cursor: "grab",
       justifyContent: "space-between",
       alignItems: "center",
       mb: isMinimized ? 0 : 2,
       position: "sticky",
       top: 0,
       zIndex: 1,
-      py: 1
+      py: 2,
+      px: 2,
+      backdropFilter: "blur(8px)",
+      borderRadius: isMinimized ? "20px" : "12px 12px 0 0",
+      boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
     }}
   >
     {!isMinimized && onReset && (
@@ -45,13 +52,17 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
           padding: "0.5em 1em 0 1em",
           textAlign: "center",
           width: "100%",
+          display: "flex",
+          alignItems: "center",
+          gap: 3,
           cursor: "pointer",
           userSelect: "none",
           "&:hover": {
             color: "c_gray6"
           }
         }}
       >
+        {icon}
         {title}
       </Typography>
     )}