@vibe-forge/client 0.2.0-alpha.9 → 0.4.0

package/src/components/knowledge-base/components/RuleItem.tsx

@@ -0,0 +1,79 @@
+import { Button, Empty, Tag, Tooltip } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { RuleDetail, RuleSummary } from '#~/api.js'
+import { getRuleDetail } from '#~/api.js'
+import { MarkdownContent } from '#~/components/MarkdownContent'
+import { LoadingState } from './LoadingState'
+
+type RuleItemProps = {
+  rule: RuleSummary
+}
+
+export function RuleItem({ rule }: RuleItemProps) {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = React.useState(false)
+  const { data, isLoading } = useSWR<{ rule: RuleDetail }>(
+    expanded ? ['rule-detail', rule.id] : null,
+    () => getRuleDetail(rule.id)
+  )
+  const detail = data?.rule
+  const body = detail?.body ?? ''
+  const globList = rule.globs ?? []
+
+  return (
+    <div className='knowledge-base-view__item'>
+      <div className='knowledge-base-view__item-row'>
+        <div className='knowledge-base-view__item-main'>
+          <div className='knowledge-base-view__item-title'>
+            <span className='material-symbols-rounded knowledge-base-view__item-icon'>gavel</span>
+            <span>{rule.name}</span>
+          </div>
+          <div className='knowledge-base-view__item-desc'>{rule.description}</div>
+          {globList.length > 0 && (
+            <div className='knowledge-base-view__tag-list'>
+              {globList.map(glob => (
+                <Tag key={glob} className='knowledge-base-view__tag'>
+                  <span className='material-symbols-rounded knowledge-base-view__tag-icon'>folder</span>
+                  <span>{glob}</span>
+                </Tag>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className='knowledge-base-view__item-meta'>
+          {rule.always && (
+            <Tag color='blue'>{t('knowledge.meta.always')}</Tag>
+          )}
+          <Tooltip title={expanded ? t('knowledge.actions.collapse') : t('knowledge.actions.expand')}>
+            <Button
+              type='text'
+              className='knowledge-base-view__icon-button'
+              onClick={() => setExpanded(prev => !prev)}
+              icon={
+                <span className='material-symbols-rounded'>
+                  {expanded ? 'expand_less' : 'expand_more'}
+                </span>
+              }
+            />
+          </Tooltip>
+        </div>
+      </div>
+      {expanded && (
+        <div className='knowledge-base-view__detail'>
+          {isLoading && <LoadingState />}
+          {!isLoading && body.trim() === '' && (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('knowledge.rules.empty')} />
+          )}
+          {!isLoading && body.trim() !== '' && (
+            <div className='knowledge-base-view__markdown'>
+              <MarkdownContent content={body} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/knowledge-base/components/RuleList.scss

@@ -0,0 +1,5 @@
+.knowledge-base-view__rule-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}

package/src/components/knowledge-base/components/RuleList.tsx

@@ -0,0 +1,70 @@
+import './RuleList.scss'
+
+import { List } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { RuleSummary } from '#~/api.js'
+import { EmptyState } from './EmptyState'
+import { KnowledgeList } from './KnowledgeList'
+import { LoadingState } from './LoadingState'
+import { RuleItem } from './RuleItem'
+
+type RuleListProps = {
+  isLoading: boolean
+  rules: RuleSummary[]
+  filteredRules: RuleSummary[]
+  onCreate: () => void
+}
+
+export function RuleList({
+  isLoading,
+  rules,
+  filteredRules,
+  onCreate
+}: RuleListProps) {
+  const { t } = useTranslation()
+
+  if (isLoading) {
+    return (
+      <div className='knowledge-base-view__rule-list'>
+        <LoadingState />
+      </div>
+    )
+  }
+
+  if (rules.length === 0) {
+    return (
+      <div className='knowledge-base-view__rule-list'>
+        <EmptyState
+          description={t('knowledge.rules.empty')}
+          actionLabel={t('knowledge.rules.create')}
+          onAction={onCreate}
+        />
+      </div>
+    )
+  }
+
+  if (filteredRules.length === 0) {
+    return (
+      <div className='knowledge-base-view__rule-list'>
+        <EmptyState
+          description={t('knowledge.filters.noResults')}
+          variant='simple'
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className='knowledge-base-view__rule-list'>
+      <KnowledgeList
+        data={filteredRules}
+        renderItem={(rule) => (
+          <List.Item className='knowledge-base-view__list-item'>
+            <RuleItem rule={rule} />
+          </List.Item>
+        )}
+      />
+    </div>
+  )
+}

package/src/components/knowledge-base/components/RulesTab.tsx

@@ -1,19 +1,33 @@
 import './RulesTab.scss'
 
-import { Space } from 'antd'
+import { Input, Space } from 'antd'
 import { useTranslation } from 'react-i18next'
 
+import type { RuleSummary } from '#~/api.js'
 import { ActionButton } from './ActionButton'
-import { EmptyState } from './EmptyState'
+import { RuleList } from './RuleList'
 import { SectionHeader } from './SectionHeader'
 import { TabContent } from './TabContent'
 
 type RulesTabProps = {
+  rules: RuleSummary[]
+  filteredRules: RuleSummary[]
+  isLoading: boolean
+  query: string
+  onQueryChange: (value: string) => void
   onCreate: () => void
   onImport: () => void
 }
 
-export function RulesTab({ onCreate, onImport }: RulesTabProps) {
+export function RulesTab({
+  rules,
+  filteredRules,
+  isLoading,
+  query,
+  onQueryChange,
+  onCreate,
+  onImport
+}: RulesTabProps) {
   const { t } = useTranslation()
 
   return (
@@ -39,10 +53,21 @@ export function RulesTab({ onCreate, onImport }: RulesTabProps) {
           </Space>
         )}
       />
-      <EmptyState
-        description={t('knowledge.rules.empty')}
-        actionLabel={t('knowledge.rules.create')}
-        onAction={onCreate}
+      <div className='knowledge-base-view__filters'>
+        <Input
+          className='knowledge-base-view__filter-input'
+          prefix={<span className='material-symbols-rounded knowledge-base-view__filter-icon'>search</span>}
+          placeholder={t('knowledge.filters.search')}
+          allowClear
+          value={query}
+          onChange={(e) => onQueryChange(e.target.value)}
+        />
+      </div>
+      <RuleList
+        isLoading={isLoading}
+        rules={rules}
+        filteredRules={filteredRules}
+        onCreate={onCreate}
       />
     </TabContent>
   )

package/src/components/knowledge-base/components/SpecItem.tsx

@@ -7,7 +7,7 @@ import useSWR from 'swr'
 
 import type { SpecDetail, SpecSummary } from '#~/api.js'
 import { getSpecDetail } from '#~/api.js'
-import { MarkdownContent } from '#~/components/chat/MarkdownContent'
+import { MarkdownContent } from '#~/components/MarkdownContent'
 import { LoadingState } from './LoadingState'
 import { MetaList } from './MetaList'
 

package/src/hooks/chat/use-chat-interaction.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react'
+
+import type { AskUserQuestionParams } from '@vibe-forge/core'
+import { connectionManager } from '#~/connectionManager.js'
+
+export function useChatInteraction({ sessionId }: { sessionId?: string }) {
+  const [interactionRequest, setInteractionRequest] = useState<{ id: string; payload: AskUserQuestionParams } | null>(
+    null
+  )
+
+  const handleInteractionResponse = useCallback((id: string, data: string | string[]) => {
+    if (!sessionId) return
+    connectionManager.send(sessionId, {
+      type: 'interaction_response',
+      id,
+      data
+    })
+    setInteractionRequest(null)
+  }, [sessionId])
+
+  return {
+    interactionRequest,
+    setInteractionRequest,
+    handleInteractionResponse
+  }
+}

package/src/{components/chat/useChatModels.tsx → hooks/chat/use-chat-models.tsx}

@@ -1,24 +1,31 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import type { ConfigResponse, ModelServiceConfig, RecommendedModelConfig } from '@vibe-forge/core'
-import { getConfig } from '../../api'
+import { getConfig } from '#~/api.js'
 
-interface ModelSelectOption {
+export interface ModelSelectOption {
   value: string
   label: React.ReactNode
   searchText: string
 }
 
-interface ModelSelectGroup {
+export interface ModelSelectGroup {
   label: React.ReactNode
   options: ModelSelectOption[]
 }
 
 export function useChatModels() {
   const { t } = useTranslation()
-  const [selectedModel, setSelectedModel] = useState<string | undefined>(undefined)
+  const [selectedModel, setSelectedModel] = useState<string | undefined>(() => {
+    try {
+      const raw = localStorage.getItem('vf_chat_selected_model')
+      return raw == null || raw.trim() === '' ? undefined : raw
+    } catch {
+      return undefined
+    }
+  })
   const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
 
   const mergedModelServices = useMemo(() => {
@@ -39,7 +46,9 @@ export function useChatModels() {
   const availableModels = useMemo(() => {
     const list: Array<{ model: string; serviceKey: string; serviceTitle: string }> = []
     for (const [serviceKey, serviceValue] of modelServiceEntries) {
-      const service = (serviceValue != null && typeof serviceValue === 'object') ? serviceValue as ModelServiceConfig : undefined
+      const service = (serviceValue != null && typeof serviceValue === 'object')
+        ? serviceValue as ModelServiceConfig
+        : undefined
       const serviceTitle = service?.title?.trim() !== '' ? service?.title ?? '' : serviceKey
       const models = Array.isArray(service?.models) ? service?.models.filter(item => typeof item === 'string') : []
       for (const model of models) {
@@ -53,8 +62,24 @@ export function useChatModels() {
   const availableModelKey = useMemo(() => availableModelValues.join('|'), [availableModelValues])
   const availableModelSet = useMemo(() => new Set(availableModelValues), [availableModelKey])
   const hasAvailableModels = availableModelValues.length > 0
+  const modelToService = useMemo(() => {
+    const map = new Map<string, { key: string; title: string }>()
+    for (const entry of availableModels) {
+      if (!map.has(entry.model)) {
+        map.set(entry.model, { key: entry.serviceKey, title: entry.serviceTitle })
+      }
+    }
+    return map
+  }, [availableModels])
   const defaultModelService = configRes?.sources?.merged?.general?.defaultModelService
   const defaultModel = configRes?.sources?.merged?.general?.defaultModel
+  const formatModelWithService = useCallback((model: string | undefined) => {
+    const normalizedModel = typeof model === 'string' ? model.trim() : ''
+    if (normalizedModel === '') return undefined
+    if (normalizedModel.includes(',')) return normalizedModel
+    const resolvedService = modelToService.get(normalizedModel)?.key ?? defaultModelService
+    return resolvedService ? `${resolvedService},${normalizedModel}` : normalizedModel
+  }, [defaultModelService, modelToService])
   const resolvedDefaultModel = useMemo(() => {
     if (!hasAvailableModels) return undefined
     if (defaultModel && availableModelSet.has(defaultModel)) return defaultModel
@@ -64,7 +89,17 @@ export function useChatModels() {
       if (models.length > 0) return models[0]
     }
     return availableModelValues[0]
-  }, [availableModelSet, availableModelValues, defaultModel, defaultModelService, hasAvailableModels, mergedModelServices])
+  }, [
+    availableModelSet,
+    availableModelValues,
+    defaultModel,
+    defaultModelService,
+    hasAvailableModels,
+    mergedModelServices
+  ])
+  const selectedModelWithService = useMemo(() => (
+    formatModelWithService(selectedModel)
+  ), [formatModelWithService, selectedModel])
 
   useEffect(() => {
     if (!hasAvailableModels) {
@@ -77,6 +112,17 @@ export function useChatModels() {
     })
   }, [availableModelSet, hasAvailableModels, resolvedDefaultModel])
 
+  useEffect(() => {
+    try {
+      if (selectedModel == null || selectedModel.trim() === '') {
+        localStorage.removeItem('vf_chat_selected_model')
+      } else {
+        localStorage.setItem('vf_chat_selected_model', selectedModel)
+      }
+    } catch {
+    }
+  }, [selectedModel])
+
   const modelOptions = useMemo<ModelSelectGroup[]>(() => {
     const buildOption = (params: {
       value: string
@@ -108,13 +154,6 @@ export function useChatModels() {
       }
     }
 
-    const modelToService = new Map<string, { key: string; title: string }>()
-    for (const entry of availableModels) {
-      if (!modelToService.has(entry.model)) {
-        modelToService.set(entry.model, { key: entry.serviceKey, title: entry.serviceTitle })
-      }
-    }
-
     const resolveFirstAlias = (modelsAlias: Record<string, string[]> | undefined, model: string) => {
       if (!modelsAlias) return undefined
       for (const [alias, aliasModels] of Object.entries(modelsAlias)) {
@@ -126,7 +165,9 @@ export function useChatModels() {
 
     const serviceGroups = modelServiceEntries
       .map(([serviceKey, serviceValue]) => {
-        const service = (serviceValue != null && typeof serviceValue === 'object') ? serviceValue as ModelServiceConfig : undefined
+        const service = (serviceValue != null && typeof serviceValue === 'object')
+          ? serviceValue as ModelServiceConfig
+          : undefined
         const serviceTitle = service?.title?.trim() !== '' ? service?.title ?? '' : serviceKey
         const groupTitle = serviceTitle?.trim() !== '' ? serviceTitle : serviceKey
         const serviceDescription = service?.description
@@ -195,10 +236,18 @@ export function useChatModels() {
       })
     }
     return [...groups, ...serviceGroups]
-  }, [availableModelSet, availableModels, mergedModelServices, modelServiceEntries, recommendedModels, t])
+  }, [
+    availableModelSet,
+    modelToService,
+    mergedModelServices,
+    modelServiceEntries,
+    recommendedModels,
+    t
+  ])
 
   return {
     selectedModel,
+    selectedModelWithService,
     setSelectedModel,
     modelOptions,
     hasAvailableModels

package/src/hooks/chat/use-chat-permission-mode.ts

@@ -0,0 +1,47 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+
+export type PermissionMode = 'default' | 'acceptEdits' | 'plan' | 'dontAsk' | 'bypassPermissions'
+
+const PERMISSION_MODE_STORAGE_KEY = 'vf_chat_permission_mode'
+
+const isPermissionMode = (value: string): value is PermissionMode => {
+  return value === 'default'
+    || value === 'acceptEdits'
+    || value === 'plan'
+    || value === 'dontAsk'
+    || value === 'bypassPermissions'
+}
+
+export function useChatPermissionMode() {
+  const [permissionMode, setPermissionMode] = useState<PermissionMode>('default')
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(PERMISSION_MODE_STORAGE_KEY)
+      if (raw && isPermissionMode(raw)) {
+        setPermissionMode(raw)
+      }
+    } catch {}
+  }, [])
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(PERMISSION_MODE_STORAGE_KEY, permissionMode)
+    } catch {}
+  }, [permissionMode])
+
+  const permissionModeOptions = useMemo<Array<{ value: PermissionMode; label: ReactNode }>>(() => ([
+    { value: 'default', label: '默认' },
+    { value: 'acceptEdits', label: '接受编辑' },
+    { value: 'plan', label: '计划' },
+    { value: 'dontAsk', label: '不询问' },
+    { value: 'bypassPermissions', label: '跳过权限' }
+  ]), [])
+
+  return {
+    permissionMode,
+    setPermissionMode,
+    permissionModeOptions
+  }
+}

package/src/hooks/chat/use-chat-scroll.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const SCROLL_THRESHOLD = 80
+
+export function useChatScroll({ messagesLength }: { messagesLength: number }) {
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const messagesContentRef = useRef<HTMLDivElement>(null)
+  const [showScrollBottom, setShowScrollBottom] = useState(false)
+
+  const updateScrollState = useCallback(() => {
+    const container = messagesContainerRef.current
+    if (!container) return
+    const distanceToBottom = container.scrollHeight - (container.scrollTop + container.clientHeight)
+    setShowScrollBottom(distanceToBottom > SCROLL_THRESHOLD)
+  }, [])
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    setTimeout(() => {
+      if (messagesContainerRef.current) {
+        messagesContainerRef.current.scrollTo({
+          top: messagesContainerRef.current.scrollHeight,
+          behavior
+        })
+      }
+    }, 50)
+  }, [])
+
+  useEffect(() => {
+    const container = messagesContainerRef.current
+    if (!container) return
+    updateScrollState()
+    const handleScroll = () => updateScrollState()
+    container.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      container.removeEventListener('scroll', handleScroll)
+    }
+  }, [updateScrollState])
+
+  useEffect(() => {
+    updateScrollState()
+  }, [updateScrollState, messagesLength])
+
+  return {
+    messagesEndRef,
+    messagesContainerRef,
+    messagesContentRef,
+    showScrollBottom,
+    scrollToBottom
+  }
+}

package/src/hooks/chat/use-chat-session-actions.ts

@@ -0,0 +1,147 @@
+import { App } from 'antd'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useSWRConfig } from 'swr'
+
+import type { ChatMessageContent, Session } from '@vibe-forge/core'
+import { createSession } from '#~/api.js'
+import { connectionManager } from '#~/connectionManager.js'
+import type { PermissionMode } from './use-chat-permission-mode'
+
+export function useChatSessionActions({
+  session,
+  modelForQuery,
+  hasAvailableModels,
+  permissionMode,
+  onClearMessages
+}: {
+  session?: Session
+  modelForQuery?: string
+  hasAvailableModels: boolean
+  permissionMode: PermissionMode
+  onClearMessages: () => void
+}) {
+  const { message } = App.useApp()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { mutate } = useSWRConfig()
+  const [isCreating, setIsCreating] = useState(false)
+  const isThinking = isCreating || session?.status === 'running'
+
+  const send = useCallback(async (text: string) => {
+    if (text.trim() === '' || isThinking) return
+    if (!hasAvailableModels) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+
+    if (!session?.id) {
+      setIsCreating(true)
+      try {
+        const { session: newSession } = await createSession(undefined, text.trim(), undefined, modelForQuery, {
+          permissionMode
+        })
+
+        await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+          if (!prev?.sessions) return { sessions: [newSession] }
+          return {
+            ...prev,
+            sessions: [newSession, ...prev.sessions]
+          }
+        }, false)
+
+        void navigate(`/session/${newSession.id}`)
+      } catch (err) {
+        console.error(err)
+        setIsCreating(false)
+        void message.error('Failed to create session')
+      }
+      return
+    }
+
+    connectionManager.send(session.id, {
+      type: 'user_message',
+      text: text.trim()
+    })
+  }, [
+    hasAvailableModels,
+    isThinking,
+    message,
+    mutate,
+    navigate,
+    permissionMode,
+    modelForQuery,
+    session?.id,
+    t
+  ])
+
+  const sendContent = useCallback(async (content: ChatMessageContent[]) => {
+    if (content.length === 0 || isThinking) return
+    if (!hasAvailableModels) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+
+    if (!session?.id) {
+      setIsCreating(true)
+      try {
+        const { session: newSession } = await createSession(undefined, undefined, content, modelForQuery, {
+          permissionMode
+        })
+
+        await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+          if (!prev?.sessions) return { sessions: [newSession] }
+          return {
+            ...prev,
+            sessions: [newSession, ...prev.sessions]
+          }
+        }, false)
+
+        void navigate(`/session/${newSession.id}`)
+        setIsCreating(false)
+      } catch (err) {
+        console.error(err)
+        setIsCreating(false)
+        void message.error('Failed to create session')
+      }
+      return
+    }
+
+    connectionManager.send(session.id, {
+      type: 'user_message',
+      content
+    })
+  }, [
+    hasAvailableModels,
+    isThinking,
+    message,
+    mutate,
+    navigate,
+    permissionMode,
+    modelForQuery,
+    session?.id,
+    t
+  ])
+
+  const interrupt = useCallback(() => {
+    if (!session?.id || isThinking === false) return
+    connectionManager.send(session.id, {
+      type: 'interrupt'
+    })
+  }, [isThinking, session?.id])
+
+  const clearMessages = useCallback(() => {
+    onClearMessages()
+    void message.success('Messages cleared')
+  }, [message, onClearMessages])
+
+  return {
+    isCreating,
+    isThinking,
+    send,
+    sendContent,
+    interrupt,
+    clearMessages
+  }
+}