2311 client - Rename workflow-chat to chats and extract useChat hook

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ivicac

client/src/App.tsx

@@ -83,7 +83,7 @@ const automationNavigation: NavigationType[] = [
         icon: VectorSquareIcon,
         name: 'Knowledge Base',
     },
-    {href: '/automation/chat', icon: MessagesSquareIcon, name: 'Chat'},
+    {href: '/automation/chats', icon: MessagesSquareIcon, name: 'Chats'},
     {href: '/automation/approval-tasks', icon: CircleIcon, name: 'Approval Tasks'},
 ];
 

client/src/pages/automation/chats/Chat.tsx

@@ -0,0 +1,23 @@
+import {Thread} from '@/components/assistant-ui/thread';
+import useChat from '@/pages/automation/chats/hooks/useChat';
+import {ChatRuntimeProvider} from '@/pages/automation/chats/runtime-providers/ChatRuntimeProvider';
+
+const Chat = () => {
+    const {effectiveWorkflowExecutionId, environmentName, sseStreamResponse} = useChat();
+
+    return (
+        <div className="flex flex-1">
+            <ChatRuntimeProvider
+                environmentName={environmentName}
+                sseStreamResponse={sseStreamResponse}
+                workflowExecutionId={effectiveWorkflowExecutionId}
+            >
+                <div className="relative flex size-full flex-col">
+                    <Thread />
+                </div>
+            </ChatRuntimeProvider>
+        </div>
+    );
+};
+
+export default Chat;

…/workflow-chat/WorkflowChatContainer.tsx …ent/src/pages/automation/chats/Chats.tsxclient/src/pages/automation/workflow-chat/WorkflowChatContainer.tsx renamed to client/src/pages/automation/chats/Chats.tsx client/src/pages/automation/workflow-chat/WorkflowChatContainer.tsx renamed to client/src/pages/automation/chats/Chats.tsx

@@ -1,21 +1,21 @@
 import Button from '@/components/Button/Button';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
-import WorkflowChatSidebar from '@/pages/automation/workflow-chat/components/WorkflowChatSidebar';
-import {useWorkflowChatStore} from '@/pages/automation/workflow-chat/stores/useWorkflowChatStore';
+import ChatsSidebar from '@/pages/automation/chats/components/ChatsSidebar';
+import {useChatsStore} from '@/pages/automation/chats/stores/useChatsStore';
 import EnvironmentSelect from '@/shared/components/EnvironmentSelect';
 import Header from '@/shared/layout/Header';
 import LayoutContainer from '@/shared/layout/LayoutContainer';
 import {MessageSquareIcon, MessageSquareXIcon} from 'lucide-react';
 import {useEffect} from 'react';
 import {Outlet, useParams} from 'react-router-dom';
 
-const WorkflowChatContainer = () => {
+const Chats = () => {
     const {workflowExecutionId} = useParams();
 
-    const currentChatName = useWorkflowChatStore((state) => state.currentChatName);
-    const isRunning = useWorkflowChatStore((state) => state.isRunning);
-    const resetAll = useWorkflowChatStore((state) => state.resetAll);
-    const resetCurrentChat = useWorkflowChatStore((state) => state.resetCurrentChat);
+    const currentChatName = useChatsStore((state) => state.currentChatName);
+    const isRunning = useChatsStore((state) => state.isRunning);
+    const resetAll = useChatsStore((state) => state.resetAll);
+    const resetCurrentChat = useChatsStore((state) => state.resetCurrentChat);
 
     useEffect(() => {
         return () => {
@@ -55,8 +55,8 @@ const WorkflowChatContainer = () => {
                     title={currentChatName}
                 />
             }
-            leftSidebarBody={<WorkflowChatSidebar />}
-            leftSidebarHeader={<Header position="sidebar" title="Chat" />}
+            leftSidebarBody={<ChatsSidebar />}
+            leftSidebarHeader={<Header position="sidebar" title="Chats" />}
             leftSidebarWidth="64"
         >
             {workflowExecutionId ? (
@@ -74,4 +74,4 @@ const WorkflowChatContainer = () => {
     );
 };
 
-export default WorkflowChatContainer;
+export default Chats;

…-chat/components/WorkflowChatSidebar.tsx …mation/chats/components/ChatsSidebar.tsxclient/src/pages/automation/workflow-chat/components/WorkflowChatSidebar.tsx renamed to client/src/pages/automation/chats/components/ChatsSidebar.tsx client/src/pages/automation/workflow-chat/components/WorkflowChatSidebar.tsx renamed to client/src/pages/automation/chats/components/ChatsSidebar.tsx

@@ -1,5 +1,5 @@
+import {useChatsStore} from '@/pages/automation/chats/stores/useChatsStore';
 import {useWorkspaceStore} from '@/pages/automation/stores/useWorkspaceStore';
-import {useWorkflowChatStore} from '@/pages/automation/workflow-chat/stores/useWorkflowChatStore';
 import {LeftSidebarNav, LeftSidebarNavItem} from '@/shared/layout/LeftSidebarNav';
 import {useWorkspaceChatWorkflowsQuery} from '@/shared/middleware/graphql';
 import {useEnvironmentStore} from '@/shared/stores/useEnvironmentStore';
@@ -15,12 +15,12 @@ interface ProjectChatGroupI {
     }>;
 }
 
-const WorkflowChatSidebar = () => {
+const ChatsSidebar = () => {
     const {workflowExecutionId} = useParams();
 
     const currentEnvironmentId = useEnvironmentStore((state) => state.currentEnvironmentId);
     const currentWorkspaceId = useWorkspaceStore((state) => state.currentWorkspaceId);
-    const isRunning = useWorkflowChatStore((state) => state.isRunning);
+    const isRunning = useChatsStore((state) => state.isRunning);
 
     const {data, isLoading} = useWorkspaceChatWorkflowsQuery({
         environmentId: String(currentEnvironmentId),
@@ -64,7 +64,7 @@ const WorkflowChatSidebar = () => {
                         body={
                             <>
                                 {workflows.map((workflowData) => {
-                                    const chatUrl = `/automation/chat/${workflowData.workflowExecutionId}`;
+                                    const chatUrl = `/automation/chats/${workflowData.workflowExecutionId}`;
                                     const isActive = workflowExecutionId === workflowData.workflowExecutionId;
 
                                     return (
@@ -91,4 +91,4 @@ const WorkflowChatSidebar = () => {
     );
 };
 
-export default WorkflowChatSidebar;
+export default ChatsSidebar;

…utomation/workflow-chat/WorkflowChat.tsx …/pages/automation/chats/hooks/useChat.tsclient/src/pages/automation/workflow-chat/WorkflowChat.tsx renamed to client/src/pages/automation/chats/hooks/useChat.ts client/src/pages/automation/workflow-chat/WorkflowChat.tsx renamed to client/src/pages/automation/chats/hooks/useChat.ts

@@ -1,24 +1,22 @@
-import {Thread} from '@/components/assistant-ui/thread';
-import {WorkflowChatRuntimeProvider} from '@/pages/automation/workflow-chat/runtime-providers/WorkflowChatRuntimeProvider';
-import {useWorkflowChatStore} from '@/pages/automation/workflow-chat/stores/useWorkflowChatStore';
+import {useChatsStore} from '@/pages/automation/chats/stores/useChatsStore';
 import {toEnvironmentName} from '@/shared/constants';
 import {useWorkflowChatProjectDeploymentWorkflowQuery} from '@/shared/middleware/graphql';
 import {useEnvironmentStore} from '@/shared/stores/useEnvironmentStore';
 import {useEffect, useMemo} from 'react';
 import {useNavigate, useParams} from 'react-router-dom';
 
-const WorkflowChat = () => {
+const useChat = () => {
     const {workflowExecutionId} = useParams();
     const navigate = useNavigate();
 
     const currentEnvironmentId = useEnvironmentStore((state) => state.currentEnvironmentId);
 
     const environmentName = useMemo(() => toEnvironmentName(currentEnvironmentId), [currentEnvironmentId]);
 
-    const activeWorkflowExecutionId = useWorkflowChatStore((state) => state.activeWorkflowExecutionId);
-    const isRunning = useWorkflowChatStore((state) => state.isRunning);
-    const setCurrentChatName = useWorkflowChatStore((state) => state.setCurrentChatName);
-    const switchChat = useWorkflowChatStore((state) => state.switchChat);
+    const activeWorkflowExecutionId = useChatsStore((state) => state.activeWorkflowExecutionId);
+    const isRunning = useChatsStore((state) => state.isRunning);
+    const setCurrentChatName = useChatsStore((state) => state.setCurrentChatName);
+    const switchChat = useChatsStore((state) => state.switchChat);
 
     useEffect(() => {
         if (workflowExecutionId) {
@@ -63,19 +61,11 @@ const WorkflowChat = () => {
         setCurrentChatName(chatName);
     }, [chatName, setCurrentChatName]);
 
-    return (
-        <div className="flex flex-1">
-            <WorkflowChatRuntimeProvider
-                environmentName={environmentName}
-                sseStreamResponse={data?.projectDeploymentWorkflow?.projectWorkflow?.sseStreamResponse}
-                workflowExecutionId={effectiveWorkflowExecutionId!}
-            >
-                <div className="relative flex size-full flex-col">
-                    <Thread />
-                </div>
-            </WorkflowChatRuntimeProvider>
-        </div>
-    );
+    return {
+        effectiveWorkflowExecutionId: effectiveWorkflowExecutionId!,
+        environmentName,
+        sseStreamResponse: data?.projectDeploymentWorkflow?.projectWorkflow?.sseStreamResponse,
+    };
 };
 
-export default WorkflowChat;
+export default useChat;

…roviders/WorkflowChatRuntimeProvider.tsx …untime-providers/ChatRuntimeProvider.tsxclient/src/pages/automation/workflow-chat/runtime-providers/WorkflowChatRuntimeProvider.tsx renamed to client/src/pages/automation/chats/runtime-providers/ChatRuntimeProvider.tsx client/src/pages/automation/workflow-chat/runtime-providers/WorkflowChatRuntimeProvider.tsx renamed to client/src/pages/automation/chats/runtime-providers/ChatRuntimeProvider.tsx

@@ -1,4 +1,4 @@
-import {useWorkflowChatStore} from '@/pages/automation/workflow-chat/stores/useWorkflowChatStore';
+import {useChatsStore} from '@/pages/automation/chats/stores/useChatsStore';
 import {useSSE} from '@/shared/hooks/useSSE';
 import {extractStreamChunk} from '@/shared/util/stream-utils';
 import {
@@ -22,7 +22,7 @@ const attachmentAdapter = new CompositeAttachmentAdapter([
     new SimpleTextAttachmentAdapter(),
 ]);
 
-export const WorkflowChatRuntimeProvider = memo(function WorkflowChatRuntimeProvider({
+export const ChatRuntimeProvider = memo(function ChatRuntimeProvider({
     children,
     environmentName,
     sseStreamResponse,
@@ -45,7 +45,7 @@ export const WorkflowChatRuntimeProvider = memo(function WorkflowChatRuntimeProv
         setIsRunning,
         setLastAssistantMessageContent,
         setMessage,
-    } = useWorkflowChatStore(
+    } = useChatsStore(
         useShallow((state) => ({
             appendToLastAssistantMessage: state.appendToLastAssistantMessage,
             isRunning: state.isRunning,
@@ -115,7 +115,7 @@ export const WorkflowChatRuntimeProvider = memo(function WorkflowChatRuntimeProv
 
             const formData = new FormData();
 
-            const conversationId = useWorkflowChatStore.getState().conversationId;
+            const conversationId = useChatsStore.getState().conversationId;
 
             formData.append('conversationId', conversationId ?? '');
             formData.append('message', input ?? '');

…sts/WorkflowChatRuntimeProvider.test.tsx …iders/tests/ChatRuntimeProvider.test.tsxclient/src/pages/automation/workflow-chat/runtime-providers/tests/WorkflowChatRuntimeProvider.test.tsx renamed to client/src/pages/automation/chats/runtime-providers/tests/ChatRuntimeProvider.test.tsx client/src/pages/automation/workflow-chat/runtime-providers/tests/WorkflowChatRuntimeProvider.test.tsx renamed to client/src/pages/automation/chats/runtime-providers/tests/ChatRuntimeProvider.test.tsx

@@ -2,10 +2,10 @@ import {renderHook, waitFor} from '@testing-library/react';
 import {ReactNode} from 'react';
 import {describe, expect, it, vi} from 'vitest';
 
-import {WorkflowChatRuntimeProvider} from '../WorkflowChatRuntimeProvider';
+import {ChatRuntimeProvider} from '../ChatRuntimeProvider';
 
 // Mock dependencies
-vi.mock('@/pages/automation/workflow-chat/stores/useWorkflowChatStore', () => ({
+vi.mock('@/pages/automation/chats/stores/useWorkflowChatStore', () => ({
     useWorkflowChatStore: vi.fn((selector) =>
         selector({
             appendToLastAssistantMessage: vi.fn(),
@@ -35,13 +35,13 @@ vi.mock('@assistant-ui/react', () => ({
     useExternalStoreRuntime: vi.fn(() => ({})),
 }));
 
-describe('WorkflowChatRuntimeProvider', () => {
+describe('ChatRuntimeProvider', () => {
     it('renders children', () => {
         const {result} = renderHook(() => null, {
             wrapper: ({children}) => (
-                <WorkflowChatRuntimeProvider environmentName="test" workflowExecutionId="workflow-123">
+                <ChatRuntimeProvider environmentName="test" workflowExecutionId="workflow-123">
                     {children}
-                </WorkflowChatRuntimeProvider>
+                </ChatRuntimeProvider>
             ),
         });
 
@@ -51,13 +51,9 @@ describe('WorkflowChatRuntimeProvider', () => {
     it('accepts sseStream prop', () => {
         const {result} = renderHook(() => null, {
             wrapper: ({children}) => (
-                <WorkflowChatRuntimeProvider
-                    environmentName="test"
-                    sseStreamResponse={true}
-                    workflowExecutionId="workflow-123"
-                >
+                <ChatRuntimeProvider environmentName="test" sseStreamResponse={true} workflowExecutionId="workflow-123">
                     {children}
-                </WorkflowChatRuntimeProvider>
+                </ChatRuntimeProvider>
             ),
         });
 
@@ -67,9 +63,9 @@ describe('WorkflowChatRuntimeProvider', () => {
     it('initializes with correct environment', () => {
         const {result} = renderHook(() => null, {
             wrapper: ({children}) => (
-                <WorkflowChatRuntimeProvider environmentName="production" workflowExecutionId="workflow-123">
+                <ChatRuntimeProvider environmentName="production" workflowExecutionId="workflow-123">
                     {children}
-                </WorkflowChatRuntimeProvider>
+                </ChatRuntimeProvider>
             ),
         });
 
@@ -79,9 +75,9 @@ describe('WorkflowChatRuntimeProvider', () => {
     it('handles different workflow execution IDs', () => {
         const {result} = renderHook(() => null, {
             wrapper: ({children}) => (
-                <WorkflowChatRuntimeProvider environmentName="test" workflowExecutionId="different-workflow-456">
+                <ChatRuntimeProvider environmentName="test" workflowExecutionId="different-workflow-456">
                     {children}
-                </WorkflowChatRuntimeProvider>
+                </ChatRuntimeProvider>
             ),
         });
 
@@ -100,9 +96,9 @@ describe('WorkflowChatRuntimeProvider', () => {
 
         renderHook(() => null, {
             wrapper: ({children}) => (
-                <WorkflowChatRuntimeProvider environmentName="test" workflowExecutionId="workflow-123">
+                <ChatRuntimeProvider environmentName="test" workflowExecutionId="workflow-123">
                     {children}
-                </WorkflowChatRuntimeProvider>
+                </ChatRuntimeProvider>
             ),
         });
 
@@ -123,9 +119,9 @@ describe('WorkflowChatRuntimeProvider', () => {
 
         renderHook(() => null, {
             wrapper: ({children}) => (
-                <WorkflowChatRuntimeProvider environmentName="test" workflowExecutionId="workflow-123">
+                <ChatRuntimeProvider environmentName="test" workflowExecutionId="workflow-123">
                     {children}
-                </WorkflowChatRuntimeProvider>
+                </ChatRuntimeProvider>
             ),
         });