refactor(workflow): split useChat hook into modular files

Extract the 535-line useChat hook into 7 focused modules for better
maintainability and testability. Add chat-preview-slice to Zustand store
to centralize chat state management instead of local useState/useRef.

web/app/components/workflow/store/workflow/chat-preview-slice.ts

@@ -0,0 +1,53 @@
+import type { StateCreator } from 'zustand'
+import type { ChatItemInTree } from '@/app/components/base/chat/types'
+
+type ChatPreviewState = {
+  chatTree: ChatItemInTree[]
+  targetMessageId: string | undefined
+  suggestedQuestions: string[]
+  conversationId: string
+  isResponding: boolean
+}
+
+type ChatPreviewActions = {
+  setChatTree: (chatTree: ChatItemInTree[]) => void
+  updateChatTree: (updater: (chatTree: ChatItemInTree[]) => ChatItemInTree[]) => void
+  setTargetMessageId: (messageId: string | undefined) => void
+  setSuggestedQuestions: (questions: string[]) => void
+  setConversationId: (conversationId: string) => void
+  setIsResponding: (isResponding: boolean) => void
+  resetChatPreview: () => void
+}
+
+export type ChatPreviewSliceShape = ChatPreviewState & ChatPreviewActions
+
+const initialState: ChatPreviewState = {
+  chatTree: [],
+  targetMessageId: undefined,
+  suggestedQuestions: [],
+  conversationId: '',
+  isResponding: false,
+}
+
+export const createChatPreviewSlice: StateCreator<ChatPreviewSliceShape> = set => ({
+  ...initialState,
+
+  setChatTree: chatTree => set({ chatTree }),
+
+  updateChatTree: updater => set((state) => {
+    const nextChatTree = updater(state.chatTree)
+    if (nextChatTree === state.chatTree)
+      return state
+    return { chatTree: nextChatTree }
+  }),
+
+  setTargetMessageId: targetMessageId => set({ targetMessageId }),
+
+  setSuggestedQuestions: suggestedQuestions => set({ suggestedQuestions }),
+
+  setConversationId: conversationId => set({ conversationId }),
+
+  setIsResponding: isResponding => set({ isResponding }),
+
+  resetChatPreview: () => set(initialState),
+})

web/app/components/workflow/store/workflow/index.ts

@@ -1,6 +1,7 @@
 import type {
   StateCreator,
 } from 'zustand'
+import type { ChatPreviewSliceShape } from './chat-preview-slice'
 import type { ChatVariableSliceShape } from './chat-variable-slice'
 import type { InspectVarsSliceShape } from './debug/inspect-vars-slice'
 import type { EnvVariableSliceShape } from './env-variable-slice'
@@ -22,6 +23,7 @@ import {
 } from 'zustand'
 import { createStore } from 'zustand/vanilla'
 import { WorkflowContext } from '@/app/components/workflow/context'
+import { createChatPreviewSlice } from './chat-preview-slice'
 import { createChatVariableSlice } from './chat-variable-slice'
 import { createInspectVarsSlice } from './debug/inspect-vars-slice'
 import { createEnvVariableSlice } from './env-variable-slice'
@@ -42,7 +44,8 @@ export type SliceFromInjection
     & Partial<RagPipelineSliceShape>
 
 export type Shape
-  = ChatVariableSliceShape
+  = ChatPreviewSliceShape
+    & ChatVariableSliceShape
     & EnvVariableSliceShape
     & FormSliceShape
     & HelpLineSliceShape
@@ -67,6 +70,7 @@ export const createWorkflowStore = (params: CreateWorkflowStoreParams) => {
   const { injectWorkflowStoreSliceFn } = params || {}
 
   return createStore<Shape>((...args) => ({
+    ...createChatPreviewSlice(...args),
     ...createChatVariableSlice(...args),
     ...createEnvVariableSlice(...args),
     ...createFormSlice(...args),