Update ReasoningMessageSelector.stories.tsx

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessageSelector.stories.tsx

@@ -223,3 +223,118 @@ export const SameIdDifferentTypes: Story = {
     }
   ]
 };
+
+export const InteractiveTitles: Story = {
+  args: {
+    reasoningMessageId: 'reasoning-1',
+    messageId: 'message-1',
+    isCompletedStream: false,
+    chatId: 'chat-1'
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false
+          }
+        }
+      });
+
+      // Initial message data
+      const initialMessage = {
+        ...mockBusterChatMessage,
+        reasoning_messages: {
+          'reasoning-1': {
+            id: 'reasoning-1',
+            type: 'text',
+            title: 'Initial Title',
+            secondary_title: 'Initial Secondary Title',
+            message: 'This is the initial message content.',
+            status: 'completed'
+          }
+        }
+      };
+
+      // Set initial data
+      queryClient.setQueryData(['chats', 'messages', 'message-1'], initialMessage);
+
+      // Function to update the message
+      const updateMessage = (
+        updates: Partial<(typeof initialMessage.reasoning_messages)['reasoning-1']>
+      ) => {
+        const currentData = queryClient.getQueryData([
+          'chats',
+          'messages',
+          'message-1'
+        ]) as typeof initialMessage;
+        queryClient.setQueryData(['chats', 'messages', 'message-1'], {
+          ...currentData,
+          reasoning_messages: {
+            'reasoning-1': {
+              ...currentData.reasoning_messages['reasoning-1'],
+              ...updates
+            }
+          }
+        });
+      };
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-2">
+              <button
+                className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+                onClick={() =>
+                  updateMessage({ title: `New Title ${Math.floor(Math.random() * 1000)}` })
+                }>
+                Change Title
+              </button>
+              <button
+                className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+                onClick={() =>
+                  updateMessage({
+                    secondary_title: `New Secondary Title ${Math.floor(Math.random() * 1000)}`
+                  })
+                }>
+                Change Secondary Title
+              </button>
+              <button
+                className="rounded bg-purple-500 px-4 py-2 text-white hover:bg-purple-600"
+                onClick={() => {
+                  const currentData = queryClient.getQueryData([
+                    'chats',
+                    'messages',
+                    'message-1'
+                  ]) as typeof initialMessage;
+                  const currentSecondaryTitle =
+                    currentData.reasoning_messages['reasoning-1'].secondary_title;
+                  updateMessage({
+                    secondary_title: currentSecondaryTitle
+                      ? ''
+                      : 'This is the toggled secondary title.'
+                  });
+                }}>
+                Toggle Secondary Title
+              </button>
+              <button
+                className="rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600"
+                onClick={() => {
+                  const randomNum = Math.floor(Math.random() * 1000);
+                  updateMessage({
+                    title: `New Combined Title ${randomNum}`,
+                    secondary_title: `New Combined Secondary Title ${randomNum}`
+                  });
+                }}>
+                Change Both Titles
+              </button>
+            </div>
+            <div className="h-full w-full max-w-[400px] min-w-[400px]">
+              <Story />
+            </div>
+          </div>
+        </QueryClientProvider>
+      );
+    }
+  ]
+};