improvement(panel): added unique conversationId to chat panel (#458)

* added unqiue conversationId to chat panel

* ack race condition

* add uploads directory to gitignore

Author: waleedlatif1

.gitignore

@@ -29,6 +29,7 @@ sim-standalone.tar.gz
 # misc
 .DS_Store
 *.pem
+uploads/
 
 # env files
 .env

apps/sim/app/w/[id]/components/panel/components/chat/chat.tsx

@@ -31,6 +31,7 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
     setSelectedWorkflowOutput,
     appendMessageContent,
     finalizeMessageStream,
+    getConversationId,
   } = useChatStore()
   const { entries } = useConsoleStore()
   const messagesEndRef = useRef<HTMLDivElement>(null)
@@ -91,6 +92,9 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
     // Store the message being sent for reference
     const sentMessage = chatMessage.trim()
 
+    // Get the conversationId for this workflow before adding the message
+    const conversationId = getConversationId(activeWorkflowId)
+
     // Add user message
     addMessage({
       content: sentMessage,
@@ -101,8 +105,11 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
     // Clear input
     setChatMessage('')
 
-    // Execute the workflow to generate a response, passing the chat message as input
-    const result = await handleRunWorkflow({ input: sentMessage })
+    // Execute the workflow to generate a response, passing the chat message and conversationId as input
+    const result = await handleRunWorkflow({
+      input: sentMessage,
+      conversationId: conversationId,
+    })
 
     // Check if we got a streaming response
     if (result && 'stream' in result && result.stream instanceof ReadableStream) {

apps/sim/app/w/[id]/components/panel/components/chat/components/chat-modal/chat-modal.tsx

@@ -76,7 +76,7 @@ export function ChatModal({ open, onOpenChange, chatMessage, setChatMessage }: C
   const inputRef = useRef<HTMLInputElement>(null)
 
   const { activeWorkflowId } = useWorkflowRegistry()
-  const { messages, addMessage } = useChatStore()
+  const { messages, addMessage, getConversationId } = useChatStore()
 
   // Use the execution store state to track if a workflow is executing
   const { isExecuting } = useExecutionStore()
@@ -113,6 +113,9 @@ export function ChatModal({ open, onOpenChange, chatMessage, setChatMessage }: C
     // Store the message being sent for reference
     const sentMessage = chatMessage.trim()
 
+    // Get the conversationId for this workflow before adding the message
+    const conversationId = getConversationId(activeWorkflowId)
+
     // Add user message
     addMessage({
       content: sentMessage,
@@ -129,7 +132,10 @@ export function ChatModal({ open, onOpenChange, chatMessage, setChatMessage }: C
     }
 
     // Execute the workflow to generate a response
-    await handleRunWorkflow({ input: sentMessage })
+    await handleRunWorkflow({
+      input: sentMessage,
+      conversationId: conversationId,
+    })
 
     // Ensure input stays focused even after response
     if (inputRef.current) {

apps/sim/stores/panel/chat/store.ts

@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from 'uuid'
 import { create } from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
 import type { ChatMessage, ChatStore } from './types'
@@ -11,6 +12,7 @@ export const useChatStore = create<ChatStore>()(
       (set, get) => ({
         messages: [],
         selectedWorkflowOutputs: {},
+        conversationIds: {},
 
         addMessage: (message) => {
           set((state) => {
@@ -29,11 +31,28 @@ export const useChatStore = create<ChatStore>()(
         },
 
         clearChat: (workflowId: string | null) => {
-          set((state) => ({
-            messages: state.messages.filter(
-              (message) => !workflowId || message.workflowId !== workflowId
-            ),
-          }))
+          set((state) => {
+            const newState = {
+              messages: state.messages.filter(
+                (message) => !workflowId || message.workflowId !== workflowId
+              ),
+            }
+
+            // Generate a new conversationId when clearing chat for a specific workflow
+            if (workflowId) {
+              const newConversationIds = { ...state.conversationIds }
+              newConversationIds[workflowId] = uuidv4()
+              return {
+                ...newState,
+                conversationIds: newConversationIds,
+              }
+            }
+            // When clearing all chats (workflowId is null), also clear all conversationIds
+            return {
+              ...newState,
+              conversationIds: {},
+            }
+          })
         },
 
         getWorkflowMessages: (workflowId) => {
@@ -62,6 +81,25 @@ export const useChatStore = create<ChatStore>()(
           return get().selectedWorkflowOutputs[workflowId] || []
         },
 
+        getConversationId: (workflowId) => {
+          const state = get()
+          if (!state.conversationIds[workflowId]) {
+            // Generate a new conversation ID if one doesn't exist
+            return get().generateNewConversationId(workflowId)
+          }
+          return state.conversationIds[workflowId]
+        },
+
+        generateNewConversationId: (workflowId) => {
+          const newId = uuidv4()
+          set((state) => {
+            const newConversationIds = { ...state.conversationIds }
+            newConversationIds[workflowId] = newId
+            return { conversationIds: newConversationIds }
+          })
+          return newId
+        },
+
         appendMessageContent: (messageId, content) => {
           set((state) => {
             const newMessages = state.messages.map((message) => {

apps/sim/stores/panel/chat/types.ts

@@ -16,11 +16,14 @@ export interface OutputConfig {
 export interface ChatStore {
   messages: ChatMessage[]
   selectedWorkflowOutputs: Record<string, string[]>
+  conversationIds: Record<string, string>
   addMessage: (message: Omit<ChatMessage, 'id' | 'timestamp'>) => void
   clearChat: (workflowId: string | null) => void
   getWorkflowMessages: (workflowId: string) => ChatMessage[]
   setSelectedWorkflowOutput: (workflowId: string, outputIds: string[]) => void
   getSelectedWorkflowOutput: (workflowId: string) => string[]
   appendMessageContent: (messageId: string, content: string) => void
   finalizeMessageStream: (messageId: string) => void
+  getConversationId: (workflowId: string) => string
+  generateNewConversationId: (workflowId: string) => string
 }