@vibe-forge/client 0.2.0-alpha.0

package/src/components/ConfigView.scss

@@ -0,0 +1,185 @@
+.config-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+  background: var(--bg-color);
+
+  &__state {
+    display: grid;
+    place-items: center;
+    flex: 1;
+  }
+
+  &__tabs-wrap {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    .ant-tabs-content-holder > .ant-tabs-content {
+      height: 100%;
+      & > .ant-tabs-tabpane {
+        padding: 16px 128px;
+        padding-bottom: 0;
+        height: 100%;
+      }
+    }
+  }
+
+  &__tabs {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.config-view__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 12px;
+  height: 100%;
+}
+
+.config-view__editor-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+
+.config-view__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  .ant-radio-group {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.config-view__card {
+  flex-grow: 1;
+  margin: 0 -20px;
+  padding: 0 20px;
+  padding-bottom: 20px;
+  overflow: scroll;
+}
+
+.config-view__card + .config-view__card {
+  margin-top: 14px;
+}
+
+.config-view__section-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.config-view__section-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+}
+
+.config-view__section-hint {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.config-view__source-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.config-view .ant-empty-image {
+  display: none;
+}
+
+.config-view__tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  line-height: 1;
+}
+
+.config-view__tab-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.config-view__tab-text {
+  font-size: 13px;
+  color: var(--text-color);
+  line-height: 18px;
+}
+
+.config-view__tabs > .ant-tabs-nav {
+  min-width: 320px;
+  padding: 12px 16px;
+  background-color: var(--sub-bg-color);
+  border-right: 1px solid var(--sub-border-color);
+
+  .ant-tabs-tab {
+    display: flex;
+    align-items: center;
+    min-height: 28px;
+
+    border-radius: 8px;
+    transition: .3s;
+    &:not(.ant-tabs-tab-disabled):hover {
+      background-color: var(--sub-sub-bg-color);
+    }
+  }
+
+  .ant-tabs-tab-btn {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    color: var(--text-color);
+  }
+
+  .ant-tabs-tab-disabled {
+    cursor: default;
+  }
+
+  .ant-tabs-tab-disabled .ant-tabs-tab-btn {
+    cursor: default;
+    color: var(--sub-text-color);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+  }
+
+  .ant-tabs-tab-active {
+    font-weight: 600;
+    color: var(--sub-sub-text-color);
+    background: var(--sub-sub-bg-color);
+    .material-symbols-rounded {
+      font-variation-settings: 'FILL' 1;
+    }
+  }
+
+  .ant-tabs-content-holder {
+    padding: 16px;
+  }
+}
+
+.config-view__tabs > .ant-tabs-content-holder {
+  height: 100%;
+}
+
+.config-view__group-label {
+  display: flex;
+  width: 100%;
+  margin-left: -24px;
+}

package/src/components/ConfigView.tsx

@@ -0,0 +1,258 @@
+import './ConfigView.scss'
+
+import { App, Empty, Space, Spin, Tabs } from 'antd'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { AboutInfo, ConfigResponse, ConfigSource } from '@vibe-forge/core'
+
+import { getConfig, updateConfig } from '../api'
+import { AboutSection, ConfigSectionPanel, ConfigSourceSwitch, DisplayValue } from './config'
+import { cloneValue, getValueByPath, isEmptyValue } from './config/configUtils'
+
+export function ConfigView() {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const { data, isLoading, error, mutate } = useSWR<ConfigResponse>('/api/config', getConfig)
+  const [sourceKey, setSourceKey] = useState<ConfigSource>('project')
+  const [activeTabKey, setActiveTabKey] = useState('general')
+  const [drafts, setDrafts] = useState<Record<string, unknown>>({})
+  const configPresent = data?.meta?.configPresent
+  const currentSource = data?.sources?.[sourceKey]
+  const draftsRef = useRef<Record<string, unknown>>(drafts)
+  const saveTimersRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({})
+  const savingRef = useRef<Record<string, boolean>>({})
+  const lastSavedRef = useRef<Record<string, string>>({})
+  const mergedModelServices = useMemo(() => data?.sources?.merged?.modelServices ?? {}, [
+    data?.sources?.merged?.modelServices
+  ])
+  const mergedAdapters = useMemo(() => data?.sources?.merged?.adapters ?? {}, [
+    data?.sources?.merged?.adapters
+  ])
+
+  useEffect(() => {
+    if (configPresent?.project) {
+      setSourceKey('project')
+    } else if (configPresent?.user) {
+      setSourceKey('user')
+    }
+  }, [configPresent?.project, configPresent?.user])
+
+  const configTabKeys = useMemo(() =>
+    new Set([
+      'general',
+      'conversation',
+      'modelServices',
+      'adapters',
+      'plugins',
+      'mcp',
+      'shortcuts'
+    ]), [])
+
+  const tabs = useMemo(() => [
+    { key: 'group-config', type: 'group', label: t('config.groups.config') },
+    { key: 'general', icon: 'tune', label: t('config.sections.general'), value: currentSource?.general },
+    {
+      key: 'conversation',
+      icon: 'forum',
+      label: t('config.sections.conversation'),
+      value: currentSource?.conversation
+    },
+    {
+      key: 'modelServices',
+      icon: 'model_training',
+      label: t('config.sections.modelServices'),
+      value: currentSource?.modelServices
+    },
+    {
+      key: 'adapters',
+      icon: 'settings_input_component',
+      label: t('config.sections.adapters'),
+      value: currentSource?.adapters
+    },
+    { key: 'plugins', icon: 'extension', label: t('config.sections.plugins'), value: currentSource?.plugins },
+    { key: 'mcp', icon: 'account_tree', label: t('config.sections.mcp'), value: currentSource?.mcp },
+    { key: 'shortcuts', icon: 'keyboard', label: t('config.sections.shortcuts'), value: currentSource?.shortcuts },
+    { key: 'group-app', type: 'group', label: t('config.groups.app') },
+    { key: 'experiments', icon: 'science', label: t('config.sections.experiments'), value: data?.meta?.experiments },
+    { key: 'about', icon: 'info', label: t('config.sections.about'), value: data?.meta?.about }
+  ], [currentSource, data?.meta?.about, data?.meta?.experiments, t])
+  const tabKeys = useMemo(() => new Set(tabs.filter(tab => tab.type !== 'group').map(tab => tab.key)), [tabs])
+
+  const activeTab = useMemo(() => tabs.find(tab => tab.key === activeTabKey), [tabs, activeTabKey])
+
+  const initializedTabRef = useRef(false)
+  useEffect(() => {
+    if (initializedTabRef.current) return
+    const params = new URLSearchParams(window.location.search)
+    const tabKey = params.get('tab')
+    if (tabKey != null && tabKeys.has(tabKey)) {
+      setActiveTabKey(tabKey)
+    }
+    initializedTabRef.current = true
+  }, [tabKeys])
+
+  useEffect(() => {
+    if (!tabKeys.has(activeTabKey)) return
+    const params = new URLSearchParams(window.location.search)
+    params.set('tab', activeTabKey)
+    const nextUrl = `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    window.history.replaceState(null, '', nextUrl)
+  }, [activeTabKey, tabKeys])
+
+  useEffect(() => {
+    if (activeTab == null) return
+    if (!configTabKeys.has(activeTab.key)) return
+    const draftKey = `${sourceKey}:${activeTab.key}`
+    setDrafts((prev) => {
+      const currentDraft = prev[draftKey]
+      const sourceValue = activeTab.value ?? {}
+      if (currentDraft !== undefined) {
+        if (isEmptyValue(currentDraft) && !isEmptyValue(sourceValue)) {
+          return { ...prev, [draftKey]: cloneValue(sourceValue) }
+        }
+        return prev
+      }
+      return { ...prev, [draftKey]: cloneValue(sourceValue) }
+    })
+  }, [activeTab, configTabKeys, sourceKey])
+
+  useEffect(() => {
+    draftsRef.current = drafts
+  }, [drafts])
+
+  useEffect(() => {
+    return () => {
+      Object.values(saveTimersRef.current).forEach((timer) => {
+        clearTimeout(timer)
+      })
+    }
+  }, [])
+
+  const getDraftKey = (sectionKey: string, source = sourceKey) => `${source}:${sectionKey}`
+  const generalDraftValue = useMemo(() => {
+    const draftKey = getDraftKey('general')
+    return (drafts[draftKey] ?? cloneValue(currentSource?.general ?? {}) ?? {}) as Record<string, unknown>
+  }, [drafts, currentSource?.general, sourceKey])
+  const selectedModelService = (() => {
+    const value = getValueByPath(generalDraftValue, ['defaultModelService'])
+    return typeof value === 'string' ? value : undefined
+  })()
+
+  const scheduleSave = (sectionKey: string, source: ConfigSource, nextValue: unknown) => {
+    const draftKey = getDraftKey(sectionKey, source)
+    const serialized = JSON.stringify(nextValue ?? {})
+    if (lastSavedRef.current[draftKey] === serialized) {
+      return
+    }
+    if (saveTimersRef.current[draftKey]) {
+      clearTimeout(saveTimersRef.current[draftKey])
+    }
+    saveTimersRef.current[draftKey] = setTimeout(async () => {
+      if (savingRef.current[draftKey]) return
+      const currentValue = draftsRef.current[draftKey] ?? nextValue
+      const currentSerialized = JSON.stringify(currentValue ?? {})
+      if (lastSavedRef.current[draftKey] === currentSerialized) return
+      savingRef.current[draftKey] = true
+      try {
+        await updateConfig(source, sectionKey, currentValue)
+        lastSavedRef.current[draftKey] = currentSerialized
+        await mutate()
+      } catch {
+        void message.error(t('config.saveFailed'))
+      } finally {
+        savingRef.current[draftKey] = false
+      }
+    }, 800)
+  }
+
+  const handleDraftChange = (sectionKey: string, nextValue: unknown) => {
+    const draftKey = getDraftKey(sectionKey)
+    setDrafts(prev => ({ ...prev, [draftKey]: nextValue }))
+    scheduleSave(sectionKey, sourceKey, nextValue)
+  }
+
+  return (
+    <div className='config-view'>
+      {isLoading && (
+        <div className='config-view__state'>
+          <Spin />
+        </div>
+      )}
+      {!isLoading && (error != null) && (
+        <div className='config-view__state'>
+          <Empty description={t('config.loadFailed')} />
+        </div>
+      )}
+      {!isLoading && error == null && (
+        <div className='config-view__tabs-wrap'>
+          <Tabs
+            tabPosition='left'
+            tabBarGutter={4}
+            indicator={{ size: 0 }}
+            className='config-view__tabs'
+            activeKey={activeTabKey}
+            onChange={(key) => {
+              if (key !== 'group-config' && key !== 'group-app') {
+                setActiveTabKey(key)
+              }
+            }}
+            items={tabs.map((tab) => {
+              if (tab.type === 'group') {
+                return {
+                  key: tab.key,
+                  label: <span className='config-view__group-label'>{tab.label}</span>,
+                  disabled: true,
+                  children: <div />
+                }
+              }
+              return {
+                key: tab.key,
+                label: (
+                  <span className='config-view__tab-label'>
+                    <span className='material-symbols-rounded config-view__tab-icon'>{tab.icon}</span>
+                    <span className='config-view__tab-text'>{tab.label}</span>
+                  </span>
+                ),
+                children: (
+                  <div className='config-view__content'>
+                    {tab.key === 'about' && (
+                      <AboutSection value={tab.value as AboutInfo | undefined} />
+                    )}
+                    {tab.key !== 'about' && !configTabKeys.has(tab.key) && (
+                      <DisplayValue value={tab.value} sectionKey={tab.key} t={t} />
+                    )}
+                    {configTabKeys.has(tab.key) && (
+                      <ConfigSectionPanel
+                        sectionKey={tab.key}
+                        title={tab.label}
+                        icon={tab.icon}
+                        value={drafts[getDraftKey(tab.key)] ?? cloneValue(tab.value ?? {}) ?? {}}
+                        onChange={(next) => handleDraftChange(tab.key, next)}
+                        mergedModelServices={mergedModelServices as Record<string, unknown>}
+                        mergedAdapters={mergedAdapters as Record<string, unknown>}
+                        selectedModelService={selectedModelService}
+                        t={t}
+                        headerExtra={(
+                          <Space size={12}>
+                            <ConfigSourceSwitch
+                              value={sourceKey}
+                              onChange={setSourceKey}
+                              configPresent={configPresent}
+                              t={t}
+                            />
+                          </Space>
+                        )}
+                      />
+                    )}
+                  </div>
+                )
+              }
+            })}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/NavRail.scss

@@ -0,0 +1,71 @@
+.nav-rail {
+  width: 56px;
+  height: 100%;
+  background-color: var(--sub-sub-bg-color);
+  border-right: 1px solid var(--sub-sub-border-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 12px 0;
+  flex-shrink: 0;
+  z-index: 20;
+
+  .nav-rail-top,
+  .nav-rail-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .nav-item {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    color: var(--sub-sub-text-color, #6b7280);
+    transition: all .2s;
+
+    &:hover {
+      background-color: var(--nav-hover-bg, #f3f4f6);
+      color: var(--nav-hover-text, #111827);
+    }
+
+    &.active {
+      background-color: var(--nav-active-bg, #eff6ff);
+      color: var(--nav-active-text, #2563eb);
+
+      .material-symbols-rounded {
+        font-variation-settings: 'FILL' 1;
+      }
+    }
+
+    .material-symbols-rounded {
+      font-size: 24px;
+    }
+  }
+}
+
+.nav-menu-icon {
+  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+
+  &.active {
+    color: var(--primary-color, #2563eb);
+  }
+}
+
+.nav-menu-icon-placeholder {
+  width: 18px;
+}
+
+html.dark .nav-rail {
+  --nav-hover-bg: #1a1a1a;
+  --nav-hover-text: #ffffff;
+  --nav-active-bg: #111b26;
+  --nav-active-text: #3b82f6;
+}

package/src/components/NavRail.tsx

@@ -0,0 +1,188 @@
+import './NavRail.scss'
+
+import { Button, Dropdown, Tooltip } from 'antd'
+import type { MenuProps } from 'antd'
+import { useAtom } from 'jotai'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { themeAtom } from '../store'
+
+export function NavRail({
+  collapsed,
+  onToggleCollapse
+}: {
+  collapsed?: boolean
+  onToggleCollapse?: () => void
+}) {
+  const { t, i18n } = useTranslation()
+  const [themeMode, setThemeMode] = useAtom(themeAtom)
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const currentPath = location.pathname
+
+  const langItems: MenuProps['items'] = React.useMemo(() => [
+    {
+      key: 'zh',
+      label: '简体中文',
+      icon: i18n.language.startsWith('zh')
+        ? (
+          <span className='material-symbols-rounded nav-menu-icon active'>check</span>
+        )
+        : <div className='nav-menu-icon-placeholder' />,
+      onClick: () => {
+        void i18n.changeLanguage('zh')
+      }
+    },
+    {
+      key: 'en',
+      label: 'English',
+      icon: i18n.language.startsWith('en')
+        ? (
+          <span className='material-symbols-rounded nav-menu-icon active'>check</span>
+        )
+        : <div className='nav-menu-icon-placeholder' />,
+      onClick: () => {
+        void i18n.changeLanguage('en')
+      }
+    }
+  ], [i18n.language])
+
+  const themeItems: MenuProps['items'] = React.useMemo(() => [
+    {
+      key: 'light',
+      label: t('common.themeLight'),
+      icon: themeMode === 'light'
+        ? <span className='material-symbols-rounded nav-menu-icon active'>check</span>
+        : <span className='material-symbols-rounded nav-menu-icon'>light_mode</span>,
+      onClick: () => {
+        setThemeMode('light')
+        localStorage.setItem('theme', 'light')
+      }
+    },
+    {
+      key: 'dark',
+      label: t('common.themeDark'),
+      icon: themeMode === 'dark'
+        ? <span className='material-symbols-rounded nav-menu-icon active'>check</span>
+        : <span className='material-symbols-rounded nav-menu-icon'>dark_mode</span>,
+      onClick: () => {
+        setThemeMode('dark')
+        localStorage.setItem('theme', 'dark')
+      }
+    },
+    {
+      key: 'system',
+      label: t('common.themeSystem'),
+      icon: themeMode === 'system'
+        ? <span className='material-symbols-rounded nav-menu-icon active'>check</span>
+        : <span className='material-symbols-rounded nav-menu-icon'>desktop_windows</span>,
+      onClick: () => {
+        setThemeMode('system')
+        localStorage.setItem('theme', 'system')
+      }
+    }
+  ], [themeMode, t, setThemeMode])
+
+  const navItems = React.useMemo(() => [
+    {
+      key: 'sessions',
+      icon: 'chat_bubble',
+      label: t('common.sessions'),
+      path: '/',
+      active: currentPath === '/' || currentPath.startsWith('/session/')
+    },
+    {
+      key: 'knowledge',
+      icon: 'library_books',
+      label: t('common.knowledgeBase'),
+      path: '/knowledge',
+      active: currentPath === '/knowledge'
+    },
+    {
+      key: 'automation',
+      icon: 'schedule',
+      label: t('common.automation'),
+      path: '/automation',
+      active: currentPath === '/automation'
+    },
+    {
+      key: 'archive',
+      icon: 'archive',
+      label: t('common.archivedSessions'),
+      path: '/archive',
+      active: currentPath === '/archive'
+    }
+  ], [currentPath, t])
+
+  return (
+    <div className='nav-rail'>
+      <div className='nav-rail-top'>
+        {navItems.map(item => (
+          <Tooltip key={item.key} title={item.label} placement='right'>
+            <span>
+              <Button
+                type='text'
+                className={`nav-item ${item.active ? 'active' : ''}`}
+                onClick={() => void navigate(item.path)}
+                icon={<span className='material-symbols-rounded'>{item.icon}</span>}
+              />
+            </span>
+          </Tooltip>
+        ))}
+      </div>
+      <div className='nav-rail-bottom'>
+        <Tooltip title={t('common.theme')} placement='right'>
+          <span>
+            <Dropdown
+              menu={{
+                items: themeItems
+              }}
+              placement='topRight'
+              trigger={['click']}
+            >
+              <Button
+                type='text'
+                className='nav-item'
+                icon={
+                  <span className='material-symbols-rounded'>
+                    {themeMode === 'light' ? 'light_mode' : themeMode === 'dark' ? 'dark_mode' : 'desktop_windows'}
+                  </span>
+                }
+              />
+            </Dropdown>
+          </span>
+        </Tooltip>
+        <Tooltip title={t('common.language')} placement='right'>
+          <span>
+            <Dropdown
+              menu={{
+                items: langItems
+              }}
+              placement='topRight'
+              trigger={['click']}
+            >
+              <Button
+                type='text'
+                className='nav-item'
+                icon={<span className='material-symbols-rounded'>language</span>}
+              />
+            </Dropdown>
+          </span>
+        </Tooltip>
+        <Tooltip title={t('common.settings')} placement='right'>
+          <span>
+            <Button
+              type='text'
+              className={`nav-item ${currentPath === '/config' ? 'active' : ''}`}
+              icon={<span className='material-symbols-rounded'>settings</span>}
+              onClick={() => void navigate('/config')}
+            />
+          </span>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}