Merge pull request #3777 from liam-hq/devin/1760446739-add-deep-modeling-toggle-to-design-session-chat

Add DeepModeling toggle to Design Session chat

Author: junkisai

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx

@@ -153,7 +153,7 @@ export const SessionDetailPageClient: FC<Props> = ({
   const hasTriggeredInitialWorkflow = useRef(false)
 
   const handleSendMessage = useCallback(
-    async (content: string) => {
+    async (content: string, isDeepModelingEnabled: boolean) => {
       const tempId = `optimistic-${crypto.randomUUID()}`
       const optimisticMessage = new HumanMessage({
         content,
@@ -174,7 +174,7 @@ export const SessionDetailPageClient: FC<Props> = ({
         setMessages((prev) => prev.filter((msg) => msg.id !== tempId))
       }
     },
-    [setMessages, start, senderName, designSessionId, isDeepModelingEnabled],
+    [setMessages, start, senderName, designSessionId],
   )
 
   // Auto-trigger workflow on page load if there's an unanswered user message
@@ -235,6 +235,7 @@ export const SessionDetailPageClient: FC<Props> = ({
                 onSendMessage={handleSendMessage}
                 onNavigate={setActiveTab}
                 error={combinedError}
+                initialIsDeepModelingEnabled={isDeepModelingEnabled}
               />
             </div>
           </div>

frontend/apps/app/components/SessionDetailPage/components/Chat/Chat.stories.tsx

@@ -84,6 +84,7 @@ export const Default: Story = {
     messages: MESSAGES,
     onSendMessage: () => {},
     onNavigate: () => {},
+    initialIsDeepModelingEnabled: true,
   },
 }
 
@@ -93,6 +94,7 @@ export const AnimatedDemo: Story = {
     messages: MESSAGES,
     onSendMessage: () => {},
     onNavigate: () => {},
+    initialIsDeepModelingEnabled: true,
   },
   render: (props) => <AnimatedChatDemo {...props} />,
 }
@@ -122,5 +124,6 @@ export const WithComplexMessages: Story = {
     ],
     onSendMessage: () => {},
     onNavigate: () => {},
+    initialIsDeepModelingEnabled: true,
   },
 }

frontend/apps/app/components/SessionDetailPage/components/Chat/Chat.tsx

@@ -2,6 +2,7 @@
 
 import type { BaseMessage } from '@langchain/core/messages'
 import type { Schema } from '@liam-hq/schema'
+import { useRouter, useSearchParams } from 'next/navigation'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import type { OutputTabValue } from '../Output/constants'
@@ -16,10 +17,11 @@ import { useScrollToBottom } from './useScrollToBottom'
 type Props = {
   schemaData: Schema
   messages: BaseMessage[]
-  onSendMessage: (content: string) => void
+  onSendMessage: (content: string, isDeepModelingEnabled: boolean) => void
   isWorkflowRunning?: boolean
   error?: string | null
   onNavigate: (tab: OutputTabValue) => void
+  initialIsDeepModelingEnabled?: boolean
 }
 
 export const Chat: FC<Props> = ({
@@ -29,12 +31,20 @@ export const Chat: FC<Props> = ({
   isWorkflowRunning = false,
   onNavigate,
   error,
+  initialIsDeepModelingEnabled = true,
 }) => {
+  const router = useRouter()
+  const searchParams = useSearchParams()
   const { containerRef, scrollToBottom } = useScrollToBottom<HTMLDivElement>(
     messages.length,
   )
   const [showScrollButton, setShowScrollButton] = useState(false)
 
+  const deepModelingParam = searchParams.get('deepModeling')
+  const isDeepModelingEnabled =
+    deepModelingParam === 'true' ||
+    (deepModelingParam === null && initialIsDeepModelingEnabled)
+
   const recomputeScrollButton = useCallback(() => {
     const el = containerRef.current
     if (!el) return
@@ -56,8 +66,17 @@ export const Chat: FC<Props> = ({
     recomputeScrollButton()
   }, [messages, recomputeScrollButton])
 
+  const handleDeepModelingToggle = useCallback(
+    (enabled: boolean) => {
+      const params = new URLSearchParams(searchParams.toString())
+      params.set('deepModeling', enabled.toString())
+      router.replace(`?${params.toString()}`, { scroll: false })
+    },
+    [router, searchParams],
+  )
+
   const handleSendMessage = (content: string) => {
-    onSendMessage(content)
+    onSendMessage(content, isDeepModelingEnabled)
   }
 
   return (
@@ -82,6 +101,8 @@ export const Chat: FC<Props> = ({
         onSendMessage={handleSendMessage}
         isWorkflowRunning={isWorkflowRunning}
         schema={schemaData}
+        isDeepModelingEnabled={isDeepModelingEnabled}
+        onDeepModelingToggle={handleDeepModelingToggle}
       />
     </div>
   )

frontend/apps/app/components/SessionDetailPage/components/Chat/components/ChatInput/ChatInput.module.css

@@ -104,3 +104,10 @@
   border: none !important;
   box-shadow: none !important;
 }
+
+.toolsContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-2);
+}

frontend/apps/app/components/SessionDetailPage/components/Chat/components/ChatInput/ChatInput.stories.tsx

@@ -102,6 +102,8 @@ export const Default: Story = {
     isWorkflowRunning: false,
     error: false,
     schema: dummySchema,
+    isDeepModelingEnabled: true,
+    onDeepModelingToggle: () => {},
   },
   parameters: {
     docs: {
@@ -119,6 +121,8 @@ export const WorkflowRunning: Story = {
     isWorkflowRunning: true,
     error: false,
     schema: dummySchema,
+    isDeepModelingEnabled: true,
+    onDeepModelingToggle: () => {},
   },
   parameters: {
     docs: {
@@ -137,6 +141,8 @@ export const WorkflowRunningWithContent: Story = {
     error: false,
     initialMessage: 'This message is being processed...',
     schema: dummySchema,
+    isDeepModelingEnabled: true,
+    onDeepModelingToggle: () => {},
   },
   parameters: {
     docs: {
@@ -156,6 +162,8 @@ export const WithError: Story = {
     error: true,
     initialMessage: 'This message has an error that needs to be fixed.',
     schema: dummySchema,
+    isDeepModelingEnabled: true,
+    onDeepModelingToggle: () => {},
   },
   parameters: {
     docs: {
@@ -174,6 +182,8 @@ export const Filled: Story = {
     error: false,
     initialMessage: 'Proposed schema changes for adding a chat function.',
     schema: dummySchema,
+    isDeepModelingEnabled: true,
+    onDeepModelingToggle: () => {},
   },
   parameters: {
     docs: {
@@ -194,6 +204,8 @@ export const Interactive: Story = {
     error: false,
     initialMessage: '',
     schema: dummySchema,
+    isDeepModelingEnabled: true,
+    onDeepModelingToggle: () => {},
   },
   parameters: {
     docs: {

frontend/apps/app/components/SessionDetailPage/components/Chat/components/ChatInput/ChatInput.tsx

@@ -19,6 +19,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { DeepModelingToggle } from '../../../../../../features/sessions/components/shared/DeepModelingToggle'
 import { useAuthModal } from '../../../../../../hooks/useAuthModal'
 import { AuthModals } from '../../../../../AuthModals'
 import { useViewMode } from '../../../../hooks/viewMode'
@@ -40,6 +41,8 @@ type Props = {
   initialMessage?: string
   schema: Schema
   onSendMessage: (message: string) => void
+  isDeepModelingEnabled: boolean
+  onDeepModelingToggle: (enabled: boolean) => void
 }
 
 export const ChatInput: FC<Props> = ({
@@ -48,6 +51,8 @@ export const ChatInput: FC<Props> = ({
   initialMessage = '',
   schema,
   onSendMessage,
+  isDeepModelingEnabled,
+  onDeepModelingToggle,
 }) => {
   const { isPublic } = useViewMode()
   const mentionSuggestorRef = useRef<MentionSuggestorHandle>(null)
@@ -238,6 +243,16 @@ export const ChatInput: FC<Props> = ({
           onClick={handleSubmit}
         />
       </form>
+      <div className={styles.toolsContainer}>
+        <DeepModelingToggle
+          name="isDeepModelingEnabled"
+          defaultChecked={isDeepModelingEnabled}
+          disabled={isWorkflowRunning || isPublic}
+          onClick={() => onDeepModelingToggle(!isDeepModelingEnabled)}
+        >
+          Deep Modeling
+        </DeepModelingToggle>
+      </div>
 
       <AuthModals
         authModalType={authModalType}

frontend/apps/app/eslint-suppressions.json

@@ -44,11 +44,6 @@
       "count": 1
     }
   },
-  "components/SessionDetailPage/SessionDetailPage.module.css": {
-    "css-modules-kit/no-unused-class-names": {
-      "count": 6
-    }
-  },
   "components/SessionDetailPage/components/Chat/components/ChatInput/ChatInput.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 2