@vibe-forge/client 0.5.0 → 0.7.0

package/src/hooks/use-session-subscription.ts

@@ -0,0 +1,101 @@
+import { useEffect } from 'react'
+import { useSWRConfig } from 'swr'
+
+import type { Session, WSEvent } from '@vibe-forge/core'
+
+import { createSocket } from '#~/ws.js'
+
+interface SessionListResponse {
+  sessions: Session[]
+}
+type SessionUpdate = Session | { id: string; isDeleted: boolean }
+
+const sortSessions = (sessions: Session[]) => {
+  return [...sessions].sort((a, b) => {
+    const starredDelta = Number(b.isStarred === true) - Number(a.isStarred === true)
+    if (starredDelta !== 0) return starredDelta
+    return (b.createdAt ?? 0) - (a.createdAt ?? 0)
+  })
+}
+
+const mergeSessionList = (
+  prev: SessionListResponse | undefined,
+  updatedSession: SessionUpdate,
+  filter: 'active' | 'archived'
+) => {
+  if (prev?.sessions == null) return prev
+
+  if ('isDeleted' in updatedSession && updatedSession.isDeleted) {
+    return {
+      ...prev,
+      sessions: prev.sessions.filter((session) => session.id !== updatedSession.id)
+    }
+  }
+
+  const shouldInclude = filter === 'archived'
+    ? updatedSession.isArchived === true
+    : updatedSession.isArchived !== true
+  const existing = prev.sessions.find((session) => session.id === updatedSession.id)
+
+  if (!shouldInclude) {
+    return {
+      ...prev,
+      sessions: prev.sessions.filter((session) => session.id !== updatedSession.id)
+    }
+  }
+
+  const nextSessions = existing
+    ? prev.sessions.map((session) => session.id === updatedSession.id ? { ...session, ...updatedSession } : session)
+    : [updatedSession, ...prev.sessions]
+
+  return {
+    ...prev,
+    sessions: sortSessions(nextSessions)
+  }
+}
+
+export function useSessionSubscription() {
+  const { mutate } = useSWRConfig()
+
+  useEffect(() => {
+    let disposed = false
+    let socket: WebSocket | undefined
+    let reconnectTimer: ReturnType<typeof setTimeout> | undefined
+
+    const connect = () => {
+      if (disposed) return
+
+      socket = createSocket({
+        onMessage: (data: WSEvent) => {
+          if (data.type !== 'session_updated') return
+          const updatedSession = data.session as SessionUpdate
+
+          void mutate('/api/sessions', (prev: SessionListResponse | undefined) => {
+            return mergeSessionList(prev, updatedSession, 'active')
+          }, false)
+
+          void mutate('/api/sessions/archived', (prev: SessionListResponse | undefined) => {
+            return mergeSessionList(prev, updatedSession, 'archived')
+          }, false)
+        },
+        onClose: () => {
+          if (disposed) return
+          reconnectTimer = setTimeout(connect, 1000)
+        },
+        onError: () => {
+          socket?.close()
+        }
+      }, { subscribe: 'sessions' })
+    }
+
+    connect()
+
+    return () => {
+      disposed = true
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer)
+      }
+      socket?.close()
+    }
+  }, [mutate])
+}

package/src/hooks/use-sidebar-navigation.ts

@@ -0,0 +1,35 @@
+import { useAtomValue } from 'jotai'
+import { useCallback } from 'react'
+import { matchPath, useLocation, useNavigate } from 'react-router-dom'
+
+import type { Session } from '@vibe-forge/core'
+
+import { sidebarWidthAtom } from '#~/store'
+
+const SESSION_ROUTE_PATTERN = '/session/:sessionId'
+
+export function useSidebarNavigation() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const sidebarWidth = useAtomValue(sidebarWidthAtom)
+  const sessionMatch = matchPath({ path: SESSION_ROUTE_PATTERN, end: true }, location.pathname)
+  const activeSessionId = sessionMatch?.params.sessionId
+  const showSidebar = location.pathname === '/' || activeSessionId != null
+
+  const handleSelectSession = useCallback((session: Session, _isNew?: boolean) => {
+    void navigate(session.id === '' ? '/' : `/session/${session.id}`)
+  }, [navigate])
+
+  const handleDeletedSession = useCallback((deletedId: string, nextId?: string) => {
+    if (activeSessionId !== deletedId) return
+    void navigate(nextId ? `/session/${nextId}` : '/')
+  }, [activeSessionId, navigate])
+
+  return {
+    activeSessionId,
+    handleDeletedSession,
+    handleSelectSession,
+    showSidebar,
+    sidebarWidth
+  }
+}

package/src/resources/locales/en.json

@@ -306,11 +306,17 @@
     "modelSearchPlaceholder": "Search models or services",
     "modelUnavailable": "No models available",
     "modelConfigRequired": "Add a model service in config before starting a session",
+    "connectionErrorTitle": "Connection error",
+    "connectionError": "WebSocket connection failed. Check the server and try again.",
+    "connectionClosed": "WebSocket connection closed. Try reconnecting.",
+    "retryConnection": "Retry",
     "imageTooLarge": "Image must be smaller than 5MB",
     "imageReadFailed": "Failed to read image",
     "imageNotSupportedInInteraction": "Images are not supported for this interaction",
     "modelGroupRecommended": "Recommended Models",
     "availableTools": "Available Tools",
+    "toolGroupChromeDevtools": "ChromeDevtools",
+    "toolGroupSystem": "System",
     "toolsCount": "{{count}} tools",
     "usedTools": "Used {{count}} tools",
     "viewInitInfo": "Double click to view initialization info",

package/src/resources/locales/zh.json

@@ -307,11 +307,17 @@
     "modelSearchPlaceholder": "搜索模型或服务",
     "modelUnavailable": "暂无可用模型",
     "modelConfigRequired": "请先在配置中添加模型服务后再开始会话",
+    "connectionErrorTitle": "连接异常",
+    "connectionError": "WebSocket 连接失败，请检查服务状态后重试",
+    "connectionClosed": "WebSocket 连接已关闭，请重试",
+    "retryConnection": "重试连接",
     "imageTooLarge": "图片大小不能超过 5MB",
     "imageReadFailed": "图片读取失败",
     "imageNotSupportedInInteraction": "当前交互不支持图片",
     "modelGroupRecommended": "推荐模型",
     "availableTools": "可用工具",
+    "toolGroupChromeDevtools": "ChromeDevtools",
+    "toolGroupSystem": "系统",
     "toolsCount": "{{count}} 个工具",
     "usedTools": "使用了 {{count}} 个工具",
     "viewInitInfo": "双击查看初始化信息",

package/src/routes/AppRoutes.tsx

@@ -0,0 +1,22 @@
+import { Route, Routes } from 'react-router-dom'
+
+import { ArchiveRoute } from '#~/routes/ArchiveRoute'
+import { AutomationRoute } from '#~/routes/AutomationRoute'
+import { BenchmarkRoute } from '#~/routes/BenchmarkRoute'
+import { ChatRoute } from '#~/routes/ChatRoute'
+import { ConfigRoute } from '#~/routes/ConfigRoute'
+import { KnowledgeRoute } from '#~/routes/KnowledgeRoute'
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path='/' element={<ChatRoute />} />
+      <Route path='/session/:sessionId' element={<ChatRoute />} />
+      <Route path='/archive' element={<ArchiveRoute />} />
+      <Route path='/benchmark' element={<BenchmarkRoute />} />
+      <Route path='/automation' element={<AutomationRoute />} />
+      <Route path='/knowledge' element={<KnowledgeRoute />} />
+      <Route path='/config' element={<ConfigRoute />} />
+    </Routes>
+  )
+}

package/src/routes/ArchiveRoute.tsx

@@ -0,0 +1,5 @@
+import { ArchiveView } from '#~/components/ArchiveView'
+
+export function ArchiveRoute() {
+  return <ArchiveView />
+}

package/src/routes/AutomationRoute.tsx

@@ -0,0 +1,5 @@
+import { AutomationView } from '#~/components/automation-view'
+
+export function AutomationRoute() {
+  return <AutomationView />
+}

package/src/routes/BenchmarkRoute.tsx

@@ -0,0 +1,5 @@
+import { BenchmarkView } from '#~/components/benchmark-view'
+
+export function BenchmarkRoute() {
+  return <BenchmarkView />
+}

package/src/{components/Chat.scss → routes/ChatRoute.scss}

@@ -43,6 +43,33 @@
   }
 }
 
+.chat-messages-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 100%;
+}
+
+.chat-pending-session-banner {
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 auto 4px;
+  padding: 8px 14px;
+  border: 1px solid rgba(59, 130, 246, .18);
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(239, 246, 255, .92), rgba(255, 255, 255, .96));
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 8px 24px rgba(59, 130, 246, .08);
+
+  .material-symbols-rounded {
+    font-size: 16px;
+  }
+}
+
 .sender-container {
   flex: 0;
   display: flex;
@@ -87,3 +114,11 @@
   overflow: auto;
   padding: 20px 24px 24px;
 }
+
+.chat-route__empty-state {
+  height: 100%;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 16px;
+}

package/src/{components/Chat.tsx → routes/ChatRoute.tsx}

@@ -1,13 +1,46 @@
-import './Chat.scss'
+import './ChatRoute.scss'
 
-import type { ChatMessage, ChatMessageContent, Session } from '@vibe-forge/core'
-import { ChatHeader } from './chat/ChatHeader.js'
-import { ChatHistoryView } from './chat/ChatHistoryView.js'
-import { ChatSettingsView } from './chat/ChatSettingsView.js'
-import { ChatTimelineView } from './chat/ChatTimelineView.js'
+import { Button, Empty } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { useNavigate, useParams } from 'react-router-dom'
+import useSWR from 'swr'
+
+import type { Session } from '@vibe-forge/core'
+
+import { listSessions } from '#~/api'
+import { ChatHeader } from '#~/components/chat/ChatHeader.js'
+import { ChatHistoryView } from '#~/components/chat/ChatHistoryView.js'
+import { ChatSettingsView } from '#~/components/chat/ChatSettingsView.js'
+import { ChatTimelineView } from '#~/components/chat/ChatTimelineView.js'
 import { useChatSession } from '#~/hooks/chat/use-chat-session'
 
-export function Chat({
+export function ChatRoute() {
+  const { t } = useTranslation()
+  const { sessionId } = useParams()
+  const navigate = useNavigate()
+  const { data: sessionsRes, isLoading } = useSWR<{ sessions: Session[] }>(
+    sessionId ? '/api/sessions' : null,
+    () => listSessions('active')
+  )
+  const session = sessionId == null ? undefined : sessionsRes?.sessions.find(item => item.id === sessionId)
+
+  if (sessionId != null && isLoading) {
+    return null
+  }
+
+  if (sessionId != null && session == null) {
+    return (
+      <div className='chat-route__empty-state'>
+        <Empty description={t('common.sessionNotFound')} />
+        <Button type='primary' onClick={() => void navigate('/')}>{t('common.backToHome')}</Button>
+      </div>
+    )
+  }
+
+  return <ChatRouteView session={session} />
+}
+
+function ChatRouteView({
   session
 }: {
   session?: Session
@@ -17,6 +50,8 @@ export function Chat({
     sessionInfo,
     interactionRequest,
     isReady,
+    connectionError,
+    retryConnection,
     activeView,
     setActiveView,
     handleInteractionResponse,
@@ -35,30 +70,20 @@ export function Chat({
     hasAvailableModels,
     modelUnavailable
   } = useChatSession({ session })
-  const buildUserMessage = (content: string | ChatMessageContent[]): ChatMessage => {
-    const id = globalThis.crypto?.randomUUID
-      ? globalThis.crypto.randomUUID()
-      : `local-${Date.now()}-${Math.random().toString(16).slice(2)}`
-    return {
-      id,
-      role: 'user' as const,
-      content,
-      createdAt: Date.now()
-    }
-  }
+  const isEmptyNewSession = !session?.id && messages.length === 0
 
   return (
-    <div className={`chat-container ${isReady ? 'ready' : ''} ${!session?.id ? 'is-new-session' : ''}`}>
+    <div className={`chat-container ${isReady ? 'ready' : ''} ${isEmptyNewSession ? 'is-new-session' : ''}`}>
       {session?.id && (
         <ChatHeader
           sessionInfo={sessionInfo}
-          sessionId={session?.id}
-          sessionTitle={session?.title}
-          isStarred={session?.isStarred}
-          isArchived={session?.isArchived}
-          tags={session?.tags}
-          lastMessage={session?.lastMessage}
-          lastUserMessage={session?.lastUserMessage}
+          sessionId={session.id}
+          sessionTitle={session.title}
+          isStarred={session.isStarred}
+          isArchived={session.isArchived}
+          tags={session.tags}
+          lastMessage={session.lastMessage}
+          lastUserMessage={session.lastUserMessage}
           activeView={activeView}
           onViewChange={setActiveView}
         />
@@ -70,11 +95,12 @@ export function Chat({
           messages={messages}
           session={session}
           sessionInfo={sessionInfo}
+          connectionError={connectionError}
+          onRetryConnection={retryConnection}
           interactionRequest={interactionRequest}
           onInteractionResponse={handleInteractionResponse}
+          setMessages={setMessages}
           onClearMessages={() => setMessages([])}
-          onSend={(text) => setMessages((prev) => [...prev, buildUserMessage(text)])}
-          onSendContent={(content) => setMessages((prev) => [...prev, buildUserMessage(content)])}
           placeholder={placeholder}
           modelOptions={modelOptions}
           selectedModel={selectedModel}

package/src/routes/ConfigRoute.tsx

@@ -0,0 +1,5 @@
+import { ConfigView } from '#~/components/ConfigView'
+
+export function ConfigRoute() {
+  return <ConfigView />
+}

package/src/routes/KnowledgeRoute.tsx

@@ -0,0 +1,5 @@
+import { KnowledgeBaseView } from '#~/components/knowledge-base'
+
+export function KnowledgeRoute() {
+  return <KnowledgeBaseView />
+}

package/dist/assets/channel-84s1ACzD.js

@@ -1 +0,0 @@
-import{al as o,am as n}from"./mermaid.core-Cmlqga_E.js";const l=(a,r)=>o.lang.round(n.parse(a)[r]);export{l as c};

package/dist/assets/clone-B2E8tddE.js

@@ -1 +0,0 @@
-import{a as r}from"./graph-DRCU-8Rz.js";var a=4;function n(o){return r(o,a)}export{n as c};

package/dist/assets/flowDiagram-v2-4f6560a1-CJfJYbME.js

@@ -1 +0,0 @@
-import{f as o,p as e}from"./flowDb-c6c81e3f-G1gSTTBI.js";import{f as a,g as t}from"./styles-d45a18b0-BC1Ak1So.js";import{ar as i}from"./mermaid.core-Cmlqga_E.js";import"./graph-DRCU-8Rz.js";import"./layout-s0slG1OL.js";import"./index-cGZvDhhU.js";import"./index-5325376f-Bq-fg2i_.js";import"./clone-B2E8tddE.js";import"./edges-96097737-9P1uH1RE.js";import"./createText-1719965b-DwX8iC5F.js";import"./line-CymFqgW6.js";import"./array-BKyUJesY.js";import"./path-CbwjOpE9.js";import"./channel-84s1ACzD.js";const n={parser:e,db:o,renderer:t,styles:a,init:r=>{r.flowchart||(r.flowchart={}),r.flowchart.arrowMarkerAbsolute=r.arrowMarkerAbsolute,i({flowchart:{arrowMarkerAbsolute:r.arrowMarkerAbsolute}}),t.setConf(r.flowchart),o.clear(),o.setGen("gen-2")}};export{n as diagram};