@vibe-forge/client 2.0.1 → 3.0.0-alpha.1

package/src/components/chat/NewSessionGuide.tsx

@@ -1,11 +1,11 @@
 import './NewSessionGuide.scss'
 
-import { useAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 
 import type { ConversationStarterConfig } from '@vibe-forge/types'
 
 import { MarkdownContent } from '#~/components/MarkdownContent'
-import { showAnnouncementsAtom } from '#~/store/index.js'
+import { showAnnouncementsAtom, showNewSessionStarterListAtom } from '#~/store/index.js'
 
 import { NewSessionGuideStarterList } from './NewSessionGuideStarterList'
 
@@ -21,8 +21,12 @@ export function NewSessionGuide({
   onApplyStarter: (starter: ConversationStarterConfig) => void
 }) {
   const [showAnnouncements, setShowAnnouncements] = useAtom(showAnnouncementsAtom)
+  const showNewSessionStarterList = useAtomValue(showNewSessionStarterListAtom)
   const visibleAnnouncements = showAnnouncements ? announcements : []
-  const hasGuideContent = visibleAnnouncements.length > 0 || startupPresets.length > 0 || builtinActions.length > 0
+  const visibleStartupPresets = showNewSessionStarterList ? startupPresets : []
+  const visibleBuiltinActions = showNewSessionStarterList ? builtinActions : []
+  const hasStarterList = visibleStartupPresets.length > 0 || visibleBuiltinActions.length > 0
+  const hasGuideContent = visibleAnnouncements.length > 0 || hasStarterList
 
   if (!hasGuideContent) {
     return null
@@ -51,13 +55,15 @@ export function NewSessionGuide({
           </button>
         </div>
       )}
-      <div className='new-session-guide__main'>
-        <NewSessionGuideStarterList
-          startupPresets={startupPresets}
-          builtinActions={builtinActions}
-          onApplyStarter={onApplyStarter}
-        />
-      </div>
+      {hasStarterList && (
+        <div className='new-session-guide__main'>
+          <NewSessionGuideStarterList
+            startupPresets={visibleStartupPresets}
+            builtinActions={visibleBuiltinActions}
+            onApplyStarter={onApplyStarter}
+          />
+        </div>
+      )}
     </div>
   )
 }

package/src/components/chat/NewSessionGuideStarterList.tsx

@@ -1,8 +1,11 @@
-import type { ConversationStarterConfig } from '@vibe-forge/types'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
+import type { ConversationStarterConfig } from '@vibe-forge/types'
+
 import { NewSessionGuideStarterSection } from './NewSessionGuideStarterSection'
 import { buildConversationStarterListItems, partitionConversationStarterListItems } from './new-session-guide-config'
+
 const FAVORITE_STARTER_STORAGE_KEY = 'vf_new_session_guide_favorites'
 const RECENT_STARTER_STORAGE_KEY = 'vf_new_session_guide_recent'
 const DEFAULT_VISIBLE_STARTER_COUNT = 8

package/src/components/chat/NewSessionGuideStarterSection.tsx

@@ -1,7 +1,8 @@
-import type { ConversationStarterConfig } from '@vibe-forge/types'
 import { Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 
+import type { ConversationStarterConfig } from '@vibe-forge/types'
+
 import type { ConversationStarterListItem } from './new-session-guide-config'
 import { normalizeConversationStarterMode } from './new-session-guide-config'
 

package/src/components/chat/messages/MessageItem.tsx

@@ -29,6 +29,7 @@ interface MessageItemProps {
   sessionId?: string
   sessionInfo?: SessionInfo | null
   isSessionBusy: boolean
+  hideActionButtons: boolean
   isEditing: boolean
   isCompactLayout: boolean
   isTouchInteraction: boolean
@@ -54,6 +55,7 @@ function MessageItemComponent({
   sessionId,
   sessionInfo,
   isSessionBusy,
+  hideActionButtons,
   isEditing,
   isCompactLayout,
   isTouchInteraction,
@@ -83,9 +85,11 @@ function MessageItemComponent({
   const canRecall = isPersistedMessage && !isSessionBusy && isUser
   const canFork = isPersistedMessage && !isSessionBusy && isUser
   const canCopy = copyableText != null
-  const shouldShowAssistantActions = !isUser && showAssistantActions
+  const shouldShowAssistantActions = !hideActionButtons && !isUser && showAssistantActions
   const showCompactActionMenu = isCompactLayout || isTouchInteraction
-  const shouldShowCompactActionMenu = showCompactActionMenu && (isUser || shouldShowAssistantActions)
+  const shouldShowCompactActionMenu = !hideActionButtons &&
+    showCompactActionMenu &&
+    (isUser || shouldShowAssistantActions)
 
   useEffect(() => {
     setIsSubmitting(false)
@@ -115,6 +119,15 @@ function MessageItemComponent({
     }
   }, [isActionsVisible])
 
+  useEffect(() => {
+    if (!hideActionButtons) {
+      return
+    }
+
+    setIsActionsVisible(false)
+    setPendingConfirmAction(null)
+  }, [hideActionButtons])
+
   useEffect(() => {
     if (pendingConfirmAction == null) {
       return
@@ -277,7 +290,7 @@ function MessageItemComponent({
   }
 
   const handleActionsPointerEnter = () => {
-    if (!isUser || isEditing) {
+    if (!isUser || isEditing || hideActionButtons) {
       return
     }
 
@@ -297,7 +310,7 @@ function MessageItemComponent({
   }
 
   const handleActionsPointerLeave = () => {
-    if (!isUser) {
+    if (!isUser || hideActionButtons) {
       return
     }
 
@@ -448,7 +461,7 @@ function MessageItemComponent({
         onPointerLeave={handleActionsPointerLeave}
       >
         <div className={`message-body-container ${isEditing ? 'is-editing' : ''}`}>
-          {isUser && !isEditing && !showCompactActionMenu && (
+          {isUser && !isEditing && !showCompactActionMenu && !hideActionButtons && (
             <div className='message-side-actions'>
               {actionButtons}
             </div>
@@ -496,6 +509,7 @@ const areMessageItemPropsEqual = (prev: MessageItemProps, next: MessageItemProps
     prev.isFirstInGroup === next.isFirstInGroup &&
     prev.isTargeted === next.isTargeted &&
     prev.isSessionBusy === next.isSessionBusy &&
+    prev.hideActionButtons === next.hideActionButtons &&
     prev.isEditing === next.isEditing &&
     prev.isCompactLayout === next.isCompactLayout &&
     prev.isTouchInteraction === next.isTouchInteraction &&

package/src/components/chat/messages/message-action-utils.ts

@@ -1,5 +1,16 @@
 import type { ChatRenderItem } from './message-utils'
 
+export function getLastMessageAnchorId(renderItems: ChatRenderItem[]) {
+  for (let index = renderItems.length - 1; index >= 0; index -= 1) {
+    const item = renderItems[index]
+    if (item?.type === 'message') {
+      return item.anchorId
+    }
+  }
+
+  return null
+}
+
 export function getLastAssistantActionAnchorId(renderItems: ChatRenderItem[]) {
   const lastItem = renderItems[renderItems.length - 1]
   if (lastItem?.type === 'tool-group') {

package/src/components/chat/sender/Sender.scss

@@ -1,3 +1,15 @@
+.sender-container {
+  flex: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  justify-content: flex-end;
+  transition:
+    flex .4s cubic-bezier(.4, 0, .2, 1),
+    padding-bottom .4s cubic-bezier(.4, 0, .2, 1);
+}
+
 .chat-input-wrapper {
   width: 100%;
   margin: 0;

package/src/components/config/AppSettingsPanel.tsx

@@ -1,17 +1,26 @@
 import '../ConfigView.scss'
 
-import { Select, Switch } from 'antd'
+import { InputNumber, Select, Switch } from 'antd'
 import { useAtom } from 'jotai'
 
-import { senderHeaderDisplayAtom, showAnnouncementsAtom } from '#~/store/index.js'
-import type { SenderHeaderDisplayMode } from '#~/store/index.js'
+import {
+  senderHeaderDisplayAtom,
+  sessionListSearchThresholdAtom,
+  showAnnouncementsAtom,
+  showNewSessionStarterListAtom,
+  themeAtom
+} from '#~/store/index.js'
+import type { SenderHeaderDisplayMode, ThemeMode } from '#~/store/index.js'
 
 import { FieldRow } from './ConfigFieldRow'
 import type { TranslationFn } from './configUtils'
 
 export function AppSettingsPanel({ t }: { t: TranslationFn }) {
+  const [themeMode, setThemeMode] = useAtom(themeAtom)
   const [showAnnouncements, setShowAnnouncements] = useAtom(showAnnouncementsAtom)
+  const [showNewSessionStarterList, setShowNewSessionStarterList] = useAtom(showNewSessionStarterListAtom)
   const [senderHeaderDisplay, setSenderHeaderDisplay] = useAtom(senderHeaderDisplayAtom)
+  const [sessionListSearchThreshold, setSessionListSearchThreshold] = useAtom(sessionListSearchThresholdAtom)
 
   return (
     <div className='config-view__editor-wrap'>
@@ -22,33 +31,78 @@ export function AppSettingsPanel({ t }: { t: TranslationFn }) {
         </div>
       </div>
       <div className='config-view__card'>
-        <FieldRow
-          title={t('config.appSettings.senderHeaderDisplay.label')}
-          description={t('config.appSettings.senderHeaderDisplay.desc')}
-          icon='unfold_more'
-        >
-          <Select<SenderHeaderDisplayMode>
-            value={senderHeaderDisplay}
-            onChange={setSenderHeaderDisplay}
-            options={[
-              {
-                value: 'expanded',
-                label: t('config.appSettings.senderHeaderDisplay.expanded')
-              },
-              {
-                value: 'collapsed',
-                label: t('config.appSettings.senderHeaderDisplay.collapsed')
-              }
-            ]}
-          />
-        </FieldRow>
-        <FieldRow
-          title={t('config.appSettings.announcements.label')}
-          description={t('config.appSettings.announcements.desc')}
-          icon='campaign'
-        >
-          <Switch checked={showAnnouncements} onChange={setShowAnnouncements} />
-        </FieldRow>
+        <div className='config-view__app-settings-list'>
+          <FieldRow
+            title={t('config.appSettings.themeMode.label')}
+            description={t('config.appSettings.themeMode.desc')}
+            icon='dark_mode'
+          >
+            <Select<ThemeMode>
+              value={themeMode}
+              onChange={setThemeMode}
+              options={[
+                {
+                  value: 'light',
+                  label: t('common.themeLight')
+                },
+                {
+                  value: 'dark',
+                  label: t('common.themeDark')
+                },
+                {
+                  value: 'system',
+                  label: t('common.themeSystem')
+                }
+              ]}
+            />
+          </FieldRow>
+          <FieldRow
+            title={t('config.appSettings.senderHeaderDisplay.label')}
+            description={t('config.appSettings.senderHeaderDisplay.desc')}
+            icon='unfold_more'
+          >
+            <Select<SenderHeaderDisplayMode>
+              value={senderHeaderDisplay}
+              onChange={setSenderHeaderDisplay}
+              options={[
+                {
+                  value: 'expanded',
+                  label: t('config.appSettings.senderHeaderDisplay.expanded')
+                },
+                {
+                  value: 'collapsed',
+                  label: t('config.appSettings.senderHeaderDisplay.collapsed')
+                }
+              ]}
+            />
+          </FieldRow>
+          <FieldRow
+            title={t('config.appSettings.sessionListSearchThreshold.label')}
+            description={t('config.appSettings.sessionListSearchThreshold.desc')}
+            icon='search'
+          >
+            <InputNumber
+              min={0}
+              precision={0}
+              value={sessionListSearchThreshold}
+              onChange={(value) => setSessionListSearchThreshold(value ?? 0)}
+            />
+          </FieldRow>
+          <FieldRow
+            title={t('config.appSettings.announcements.label')}
+            description={t('config.appSettings.announcements.desc')}
+            icon='campaign'
+          >
+            <Switch checked={showAnnouncements} onChange={setShowAnnouncements} />
+          </FieldRow>
+          <FieldRow
+            title={t('config.appSettings.recommendedActions.label')}
+            description={t('config.appSettings.recommendedActions.desc')}
+            icon='tips_and_updates'
+          >
+            <Switch checked={showNewSessionStarterList} onChange={setShowNewSessionStarterList} />
+          </FieldRow>
+        </div>
       </div>
     </div>
   )

package/src/components/knowledge-base/components/@hooks/use-skills-cli-modal-controller.ts

@@ -0,0 +1,157 @@
+import React from 'react'
+
+import { Form } from 'antd'
+import type { MessageInstance } from 'antd/es/message/interface'
+import type { TFunction } from 'i18next'
+
+import type { SkillHubItem } from '#~/api.js'
+import { getApiErrorMessage, installSkillsCliItem, searchSkillsCli } from '#~/api.js'
+import type { SkillsCliFormValues } from '../SkillsCliModal'
+
+const SKILLS_CLI_INITIAL_LIMIT = 100
+const SKILLS_CLI_LIMIT_STEP = 100
+const SKILLS_CLI_MAX_LIMIT = 500
+
+const trimOptionalString = (value: string | undefined) => {
+  const normalizedValue = value?.trim()
+  return normalizedValue == null || normalizedValue === '' ? undefined : normalizedValue
+}
+
+export const useSkillsCliModalController = (params: {
+  message: MessageInstance
+  mutateSkills: () => Promise<unknown>
+  t: TFunction
+}) => {
+  const [open, setOpen] = React.useState(false)
+  const [searching, setSearching] = React.useState(false)
+  const [loadingMore, setLoadingMore] = React.useState(false)
+  const [installingId, setInstallingId] = React.useState<string | null>(null)
+  const [items, setItems] = React.useState<SkillHubItem[]>([])
+  const [error, setError] = React.useState<string | null>(null)
+  const [hasMore, setHasMore] = React.useState(false)
+  const [hasSearched, setHasSearched] = React.useState(false)
+  const [limit, setLimit] = React.useState(SKILLS_CLI_INITIAL_LIMIT)
+  const [resetKey, setResetKey] = React.useState('')
+  const [form] = Form.useForm<SkillsCliFormValues>()
+
+  const resolveRequest = React.useCallback(async () => {
+    try {
+      await form.validateFields(['source'])
+    } catch {
+      return undefined
+    }
+
+    const values = form.getFieldsValue()
+    const source = values.source.trim()
+    return {
+      source,
+      query: trimOptionalString(values.query),
+      registry: trimOptionalString(values.registry)
+    }
+  }, [form])
+
+  const runSearch = React.useCallback(async (nextLimit: number) => {
+    const request = await resolveRequest()
+    if (request == null) return false
+
+    const result = await searchSkillsCli({
+      limit: nextLimit,
+      source: request.source,
+      ...(request.query != null ? { query: request.query } : {}),
+      ...(request.registry != null ? { registry: request.registry } : {})
+    })
+
+    setHasSearched(true)
+    setLimit(nextLimit)
+    setItems(result.items)
+    setError(result.error ?? null)
+    setHasMore(result.hasMore === true && nextLimit < SKILLS_CLI_MAX_LIMIT)
+    setResetKey([request.source, request.query ?? '', request.registry ?? '', String(nextLimit)].join('\0'))
+    return true
+  }, [resolveRequest])
+
+  const handleSearch = React.useCallback(async () => {
+    setSearching(true)
+    setLoadingMore(false)
+    try {
+      await runSearch(SKILLS_CLI_INITIAL_LIMIT)
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.skillsCliSearchFailed')))
+    } finally {
+      setSearching(false)
+    }
+  }, [params, runSearch])
+
+  const handleLoadMore = React.useCallback(async () => {
+    const nextLimit = Math.min(limit + SKILLS_CLI_LIMIT_STEP, SKILLS_CLI_MAX_LIMIT)
+    if (nextLimit === limit) return
+
+    setLoadingMore(true)
+    try {
+      await runSearch(nextLimit)
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.skillsCliSearchFailed')))
+    } finally {
+      setLoadingMore(false)
+    }
+  }, [limit, params, runSearch])
+
+  const handleInstall = React.useCallback(async (item: SkillHubItem) => {
+    const request = await resolveRequest()
+    if (request == null) return
+
+    setInstallingId(item.id)
+    try {
+      await installSkillsCliItem({
+        source: request.source,
+        skill: item.installRef ?? item.name,
+        force: item.installed,
+        ...(request.registry != null ? { registry: request.registry } : {})
+      })
+      await params.mutateSkills()
+      try {
+        await runSearch(limit)
+      } catch {
+        // Keep the install success state even if refreshing the source list fails afterwards.
+      }
+      void params.message.success(params.t('knowledge.skills.installSuccess'))
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.installFailed')))
+    } finally {
+      setInstallingId(null)
+    }
+  }, [limit, params, resolveRequest, runSearch])
+
+  const handleClose = React.useCallback(() => {
+    setOpen(false)
+    setSearching(false)
+    setLoadingMore(false)
+    setInstallingId(null)
+    setItems([])
+    setError(null)
+    setHasMore(false)
+    setHasSearched(false)
+    setLimit(SKILLS_CLI_INITIAL_LIMIT)
+    setResetKey('')
+    form.resetFields()
+  }, [form])
+
+  return {
+    form,
+    hasMore,
+    hasSearched,
+    installingId,
+    items,
+    limit,
+    loadingMore,
+    open,
+    resetKey,
+    searching,
+    searchError: error,
+    setOpen,
+    handleClose,
+    handleInstall,
+    handleLoadMore,
+    handleSearch
+  }
+}

package/src/components/knowledge-base/components/@hooks/use-skills-tab-actions.ts

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import type { MessageInstance } from 'antd/es/message/interface'
+import type { TFunction } from 'i18next'
+
+import type { SkillHubItem } from '#~/api.js'
+import { getApiErrorMessage, importSkillArchive, installSkillHubItem } from '#~/api.js'
+
+export const useSkillsTabActions = (params: {
+  marketMutate: () => Promise<unknown>
+  message: MessageInstance
+  mutateConfig: () => Promise<unknown>
+  mutateSkills: () => Promise<unknown>
+  onRefresh: () => void | Promise<void>
+  t: TFunction
+}) => {
+  const importInputRef = React.useRef<HTMLInputElement | null>(null)
+  const [installingId, setInstallingId] = React.useState<string | null>(null)
+  const [importing, setImporting] = React.useState(false)
+
+  const handleRefresh = React.useCallback(async () => {
+    await Promise.all([params.mutateSkills(), params.marketMutate(), params.mutateConfig(), params.onRefresh()])
+  }, [params])
+
+  const handleInstall = React.useCallback(async (item: SkillHubItem) => {
+    setInstallingId(item.id)
+    try {
+      await installSkillHubItem({
+        registry: item.registry,
+        plugin: item.installRef ?? item.name,
+        force: item.installed
+      })
+      await Promise.all([params.marketMutate(), params.mutateSkills()])
+      void params.message.success(params.t('knowledge.skills.installSuccess'))
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.installFailed')))
+    } finally {
+      setInstallingId(null)
+    }
+  }, [params])
+
+  const handleImportArchive = React.useCallback(async (file: File) => {
+    setImporting(true)
+    try {
+      const result = await importSkillArchive(file)
+      await Promise.all([params.mutateSkills(), params.onRefresh()])
+      void params.message.success(params.t('knowledge.skills.importSuccess', { count: result.fileCount }))
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.importFailed')))
+    } finally {
+      setImporting(false)
+    }
+  }, [params])
+
+  return {
+    importInputRef,
+    importing,
+    installingId,
+    handleImportArchive,
+    handleInstall,
+    handleRefresh
+  }
+}