Merge pull request #226 from browseros-ai/feat/graph-mode-fixes-2

feat: add chat header to workflows chat -- that is a better UX

apps/agent/components/chat/ChatProviderSelector.tsx

@@ -17,7 +17,7 @@ import {
 import { BrowserOSIcon, ProviderIcon } from '@/lib/llm-providers/providerIcons'
 import type { ProviderType } from '@/lib/llm-providers/types'
 import { cn } from '@/lib/utils'
-import type { Provider } from './chatTypes'
+import type { Provider } from './chatComponentTypes'
 
 interface ChatProviderSelectorProps {
   providers: Provider[]

apps/agent/components/chat/chatComponentTypes.ts

@@ -0,0 +1,7 @@
+import type { ProviderType } from '@/lib/llm-providers/types'
+
+export interface Provider {
+  id: string
+  name: string
+  type: ProviderType
+}

apps/agent/entrypoints/options/create-graph/CreateGraph.tsx

@@ -5,6 +5,17 @@ import type { FC, FormEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useSearchParams } from 'react-router'
 import useDeepCompareEffect from 'use-deep-compare-effect'
+import type { Provider } from '@/components/chat/chatComponentTypes'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import {
   ResizableHandle,
   ResizablePanel,
@@ -12,11 +23,13 @@ import {
 } from '@/components/ui/resizable'
 import { useChatRefs } from '@/entrypoints/sidepanel/index/useChatRefs'
 import { useAgentServerUrl } from '@/lib/browseros/useBrowserOSProviders'
+import { useLlmProviders } from '@/lib/llm-providers/useLlmProviders'
 import { useRpcClient } from '@/lib/rpc/RpcClientProvider'
 import { sentry } from '@/lib/sentry/sentry'
 import { useWorkflows } from '@/lib/workflows/workflowStorage'
 import { GraphCanvas } from './GraphCanvas'
 import { GraphChat } from './GraphChat'
+import { WorkflowsChatHeader } from './WorkflowsChatHeader'
 
 type MessageType = 'create-graph' | 'update-graph' | 'run-graph'
 
@@ -68,8 +81,10 @@ export const CreateGraph: FC = () => {
   >(undefined)
 
   const [query, setQuery] = useState('')
+  const [showDiscardDialog, setShowDiscardDialog] = useState(false)
 
   const { workflows, addWorkflow, editWorkflow } = useWorkflows()
+  const { providers: llmProviders, setDefaultProvider } = useLlmProviders()
   const rpcClient = useRpcClient()
 
   // Initialize edit mode when workflowId is provided
@@ -147,6 +162,8 @@ export const CreateGraph: FC = () => {
     enabledMcpServersRef,
     enabledCustomServersRef,
     personalizationRef,
+    selectedLlmProvider,
+    isLoadingProviders,
   } = useChatRefs()
 
   const agentUrlRef = useRef(agentServerUrl)
@@ -158,7 +175,7 @@ export const CreateGraph: FC = () => {
     codeIdRef.current = codeId
   }, [agentServerUrl, codeId])
 
-  const { sendMessage, stop, status, messages, error } = useChat({
+  const { sendMessage, stop, status, messages, error, setMessages } = useChat({
     transport: new DefaultChatTransport({
       prepareSendMessagesRequest: async ({ messages }) => {
         const lastMessage = messages[messages.length - 1]
@@ -285,6 +302,60 @@ export const CreateGraph: FC = () => {
     }
   }
 
+  // Provider data for header
+  const providers: Provider[] = llmProviders.map((p) => ({
+    id: p.id,
+    name: p.name,
+    type: p.type,
+  }))
+
+  const selectedProviderForHeader: Provider | undefined = selectedLlmProvider
+    ? {
+        id: selectedLlmProvider.id,
+        name: selectedLlmProvider.name,
+        type: selectedLlmProvider.type,
+      }
+    : providers[0]
+
+  // Has generated code but can't auto-save (no name)
+  const hasUnsavedWork = codeId && !graphName
+
+  const resetToNewWorkflow = () => {
+    setCodeId(undefined)
+    setGraphData(undefined)
+    setGraphName('')
+    setSavedWorkflowId(undefined)
+    setSavedCodeId(undefined)
+    setMessages([])
+  }
+
+  const handleSelectProvider = (provider: Provider) => {
+    setDefaultProvider(provider.id)
+  }
+
+  const handleNewWorkflow = async () => {
+    // Can auto-save: has name AND code
+    if (graphName && codeId) {
+      await onClickSave()
+      resetToNewWorkflow()
+      return
+    }
+
+    // Has unsaved work that can't be auto-saved: show confirmation
+    if (hasUnsavedWork) {
+      setShowDiscardDialog(true)
+      return
+    }
+
+    // Nothing to save, just reset
+    resetToNewWorkflow()
+  }
+
+  const handleConfirmDiscard = () => {
+    setShowDiscardDialog(false)
+    resetToNewWorkflow()
+  }
+
   useDeepCompareEffect(() => {
     if (status === 'ready' && lastAssistantMessageWithGraph) {
       const metadata = lastAssistantMessageWithGraph.metadata as
@@ -295,10 +366,10 @@ export const CreateGraph: FC = () => {
     }
   }, [status, lastAssistantMessageWithGraph ?? {}])
 
-  if (!isInitialized) {
+  if (!isInitialized || isLoadingProviders || !selectedProviderForHeader) {
     return (
       <div className="flex h-dvh w-dvw items-center justify-center bg-background text-foreground">
-        <div className="text-muted-foreground">Loading workflow...</div>
+        <div className="text-muted-foreground">Loading...</div>
       </div>
     )
   }
@@ -335,18 +406,47 @@ export const CreateGraph: FC = () => {
           maxSize={'70%'}
           minSize={'30%'}
         >
-          <GraphChat
-            messages={messages}
-            onSubmit={onSubmit}
-            onInputChange={updateQuery}
-            onStop={stop}
-            input={query}
-            status={status}
-            agentUrlError={agentUrlError}
-            chatError={error}
-          />
+          <div className="flex h-full flex-col">
+            <WorkflowsChatHeader
+              selectedProvider={selectedProviderForHeader}
+              providers={providers}
+              onSelectProvider={handleSelectProvider}
+              onNewWorkflow={handleNewWorkflow}
+              hasMessages={messages.length > 0}
+            />
+            <div className="min-h-0 flex-1">
+              <GraphChat
+                messages={messages}
+                onSubmit={onSubmit}
+                onInputChange={updateQuery}
+                onStop={stop}
+                input={query}
+                status={status}
+                agentUrlError={agentUrlError}
+                chatError={error}
+              />
+            </div>
+          </div>
         </ResizablePanel>
       </ResizablePanelGroup>
+
+      <AlertDialog open={showDiscardDialog} onOpenChange={setShowDiscardDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Discard unsaved workflow?</AlertDialogTitle>
+            <AlertDialogDescription>
+              You have an unsaved workflow. Creating a new one will discard your
+              current changes.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleConfirmDiscard}>
+              Discard
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }

apps/agent/entrypoints/options/create-graph/WorkflowsChatHeader.tsx

@@ -0,0 +1,92 @@
+import { Github, Plus, SettingsIcon } from 'lucide-react'
+import type { FC } from 'react'
+import { ChatProviderSelector } from '@/components/chat/ChatProviderSelector'
+import type { Provider } from '@/components/chat/chatComponentTypes'
+import { ThemeToggle } from '@/components/elements/theme-toggle'
+import { productRepositoryUrl } from '@/lib/constants/productUrls'
+import { BrowserOSIcon, ProviderIcon } from '@/lib/llm-providers/providerIcons'
+import type { ProviderType } from '@/lib/llm-providers/types'
+
+interface WorkflowsChatHeaderProps {
+  selectedProvider: Provider
+  providers: Provider[]
+  onSelectProvider: (provider: Provider) => void
+  onNewWorkflow: () => void
+  hasMessages: boolean
+}
+
+export const WorkflowsChatHeader: FC<WorkflowsChatHeaderProps> = ({
+  selectedProvider,
+  providers,
+  onSelectProvider,
+  onNewWorkflow,
+  hasMessages,
+}) => {
+  return (
+    <header className="flex shrink-0 items-center justify-between border-border/40 border-b bg-background/80 px-3 py-2.5 backdrop-blur-md">
+      <div className="flex items-center gap-2">
+        <ChatProviderSelector
+          providers={providers}
+          selectedProvider={selectedProvider}
+          onSelectProvider={onSelectProvider}
+        >
+          <button
+            type="button"
+            className="group relative inline-flex cursor-pointer items-center gap-2 rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground data-[state=open]:bg-accent"
+            title="Change AI Provider"
+          >
+            {selectedProvider.type === 'browseros' ? (
+              <BrowserOSIcon size={18} />
+            ) : (
+              <ProviderIcon
+                type={selectedProvider.type as ProviderType}
+                size={18}
+              />
+            )}
+            <span className="font-semibold text-base">
+              {selectedProvider.name}
+            </span>
+          </button>
+        </ChatProviderSelector>
+      </div>
+
+      <div className="flex items-center gap-1">
+        {hasMessages && (
+          <button
+            type="button"
+            onClick={onNewWorkflow}
+            className="cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+            title="New workflow"
+          >
+            <Plus className="h-4 w-4" />
+          </button>
+        )}
+
+        <a
+          href={productRepositoryUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+          title="Star on Github"
+        >
+          <Github className="h-4 w-4" />
+        </a>
+
+        <a
+          href="/options.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+          title="Settings"
+        >
+          <SettingsIcon className="h-4 w-4" />
+        </a>
+
+        <ThemeToggle
+          className="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+          iconClassName="h-4 w-4"
+        />
+      </div>
+    </header>
+  )
+}

apps/agent/entrypoints/sidepanel/index/ChatHeader.tsx

@@ -1,11 +1,11 @@
 import { Github, Plus, SettingsIcon } from 'lucide-react'
 import type { FC } from 'react'
+import { ChatProviderSelector } from '@/components/chat/ChatProviderSelector'
+import type { Provider } from '@/components/chat/chatComponentTypes'
 import { ThemeToggle } from '@/components/elements/theme-toggle'
 import { productRepositoryUrl } from '@/lib/constants/productUrls'
 import { BrowserOSIcon, ProviderIcon } from '@/lib/llm-providers/providerIcons'
 import type { ProviderType } from '@/lib/llm-providers/types'
-import { ChatProviderSelector } from './ChatProviderSelector'
-import type { Provider } from './chatTypes'
 
 interface ChatHeaderProps {
   selectedProvider: Provider

apps/agent/entrypoints/sidepanel/index/chatTypes.ts

@@ -1,13 +1,5 @@
-import type { ProviderType } from '@/lib/llm-providers/types'
-
 export type ChatMode = 'chat' | 'agent'
 
-export interface Provider {
-  id: string
-  name: string
-  type: ProviderType
-}
-
 export interface Suggestion {
   display: string
   prompt: string

apps/agent/entrypoints/sidepanel/index/useChatSession.ts

@@ -3,6 +3,7 @@ import { DefaultChatTransport, type UIMessage } from 'ai'
 import { compact } from 'es-toolkit/array'
 import { useEffect, useRef, useState } from 'react'
 import useDeepCompareEffect from 'use-deep-compare-effect'
+import type { Provider } from '@/components/chat/chatComponentTypes'
 import { useAgentServerUrl } from '@/lib/browseros/useBrowserOSProviders'
 import type { ChatAction } from '@/lib/chat-actions/types'
 import {
@@ -15,7 +16,7 @@ import {
 import { useLlmProviders } from '@/lib/llm-providers/useLlmProviders'
 import { track } from '@/lib/metrics/track'
 import { searchActionsStorage } from '@/lib/search-actions/searchActionsStorage'
-import type { ChatMode, Provider } from './chatTypes'
+import type { ChatMode } from './chatTypes'
 import { useChatRefs } from './useChatRefs'
 import { useNotifyActiveTab } from './useNotifyActiveTab'