@vibe-forge/client 0.2.0-alpha.0

package/src/components/chat/ChatHeader.tsx

@@ -0,0 +1,342 @@
+import './ChatHeader.scss'
+
+import type { SessionInfo } from '@vibe-forge/core'
+import { App, Button, Dropdown, Radio } from 'antd'
+import type { MenuProps } from 'antd'
+import { useAtomValue } from 'jotai'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { deleteSession, updateSession } from '../../api'
+import { isSidebarCollapsedAtom, isSidebarResizingAtom } from '../../store/index'
+import { ConfigSectionPanel } from '../config'
+import type { FieldSpec } from '../config/configSchema'
+
+export type ChatHeaderView = 'history' | 'timeline' | 'settings'
+
+export function ChatHeader({
+  sessionInfo,
+  sessionId,
+  sessionTitle,
+  isStarred,
+  isArchived,
+  tags,
+  lastMessage,
+  lastUserMessage,
+  activeView,
+  onViewChange
+}: {
+  sessionInfo: SessionInfo | null
+  sessionId?: string
+  sessionTitle?: string
+  isStarred?: boolean
+  isArchived?: boolean
+  tags?: string[]
+  lastMessage?: string
+  lastUserMessage?: string
+  activeView: ChatHeaderView
+  onViewChange: (view: ChatHeaderView) => void
+}) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const isSidebarCollapsed = useAtomValue(isSidebarCollapsedAtom)
+  const isResizing = useAtomValue(isSidebarResizingAtom)
+  const [editTitle, setEditTitle] = useState('')
+
+  const summary = sessionInfo?.type === 'summary' ? sessionInfo.summary : null
+  const title = (sessionInfo?.type === 'init' ? sessionInfo.title : null) ?? sessionTitle
+  const cwd = sessionInfo?.type === 'init' ? sessionInfo.cwd : null
+  const displayTitle = (title != null && title !== '')
+    ? title
+    : (summary != null && summary !== '')
+    ? summary
+    : (lastUserMessage != null && lastUserMessage !== '')
+    ? lastUserMessage
+    : (lastMessage != null && lastMessage !== '')
+    ? lastMessage
+    : t('common.newChat')
+
+  useEffect(() => {
+    if (title != null && title !== '') {
+      setEditTitle(title)
+    }
+  }, [title])
+
+  const handleToggleStar = async () => {
+    if (sessionId == null || sessionId === '') return
+    try {
+      await updateSession(sessionId, { isStarred: !isStarred })
+      void message.success(isStarred ? t('common.unstarred') : t('common.starred'))
+    } catch (err) {
+      void message.error(t('common.operationFailed'))
+    }
+  }
+
+  const handleToggleArchive = async () => {
+    if (sessionId == null || sessionId === '') return
+    try {
+      await updateSession(sessionId, { isArchived: !isArchived })
+      void message.success(isArchived ? t('common.restored') : t('common.archived'))
+    } catch (err) {
+      void message.error(t('common.operationFailed'))
+    }
+  }
+
+  const moreItems: MenuProps['items'] = [
+    {
+      key: 'star',
+      label: isStarred ? t('common.unstar') : t('common.star'),
+      icon: <span className={`material-symbols-rounded ${isStarred ? 'is-filled' : ''}`} style={{ fontSize: '18px' }}>
+        {isStarred ? 'star' : 'star_border'}
+      </span>,
+      onClick: () => {
+        void handleToggleStar()
+      }
+    },
+    {
+      key: 'archive',
+      label: isArchived ? t('common.restore') : t('common.archive'),
+      icon: <span className='material-symbols-rounded' style={{ fontSize: '18px' }}>
+        {isArchived ? 'unarchive' : 'archive'}
+      </span>,
+      onClick: () => {
+        void handleToggleArchive()
+      }
+    }
+  ]
+
+  return (
+    <div className={`chat-header ${isSidebarCollapsed ? 'is-collapsed' : ''} ${isResizing ? 'is-resizing' : ''}`}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1, minWidth: 0 }}>
+        <div className='chat-header-info'>
+          <div className='chat-header-title'>
+            {displayTitle}
+          </div>
+          <div
+            className='chat-header-subtitle'
+            onDoubleClick={() => {
+              // eslint-disable-next-line no-console
+              console.log('Session Full Info:', {
+                sessionId,
+                sessionTitle,
+                isStarred,
+                isArchived,
+                tags,
+                lastMessage,
+                lastUserMessage,
+                sessionInfo
+              })
+            }}
+            style={{ cursor: 'pointer', userSelect: 'all' }}
+          >
+            {sessionId ?? t('chat.selectModel')}
+          </div>
+        </div>
+      </div>
+
+      <div className='chat-header-actions'>
+        <Radio.Group
+          className='chat-header-view-group'
+          value={activeView}
+          optionType='button'
+          buttonStyle='solid'
+          size='small'
+          onChange={(event) => {
+            onViewChange(event.target.value as ChatHeaderView)
+          }}
+          options={[
+            {
+              label: (
+                <span className='chat-header-view-option'>
+                  <span className='material-symbols-rounded'>forum</span>
+                  <span>{t('chat.viewHistory')}</span>
+                </span>
+              ),
+              value: 'history'
+            },
+            {
+              label: (
+                <span className='chat-header-view-option'>
+                  <span className='material-symbols-rounded'>timeline</span>
+                  <span>{t('chat.viewTimeline')}</span>
+                </span>
+              ),
+              value: 'timeline'
+            },
+            {
+              label: (
+                <span className='chat-header-view-option'>
+                  <span className='material-symbols-rounded'>tune</span>
+                  <span>{t('chat.viewSettings')}</span>
+                </span>
+              ),
+              value: 'settings'
+            }
+          ]}
+        />
+        <div className='chat-header-divider' />
+        <Dropdown menu={{ items: moreItems }} placement='bottomRight' trigger={['click']}>
+          <Button
+            type='text'
+            icon={<span className='material-symbols-rounded'>more_vert</span>}
+          />
+        </Dropdown>
+      </div>
+    </div>
+  )
+}
+
+export function SessionSettingsPanel({
+  sessionId,
+  initialTitle,
+  initialTags = [],
+  onClose
+}: {
+  sessionId: string
+  initialTitle?: string
+  initialTags?: string[]
+  onClose: () => void
+}) {
+  const { t } = useTranslation()
+  const { message, modal } = App.useApp()
+  const fields = useMemo<FieldSpec[]>(() => [
+    {
+      path: ['title'],
+      type: 'string',
+      defaultValue: '',
+      icon: 'edit_note',
+      labelKey: 'chat.title',
+      placeholderKey: 'chat.enterTitle'
+    },
+    {
+      path: ['tags'],
+      type: 'string[]',
+      defaultValue: [],
+      icon: 'sell',
+      labelKey: 'chat.tags'
+    }
+  ], [])
+  const initialValue = useMemo(() => ({
+    title: initialTitle ?? '',
+    tags: initialTags
+  }), [initialTags, initialTitle])
+  const [draft, setDraft] = useState(initialValue)
+  const draftsRef = useRef(initialValue)
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const savingRef = useRef(false)
+  const lastSavedRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    setDraft(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    draftsRef.current = draft
+  }, [draft])
+
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current)
+      }
+    }
+  }, [])
+
+  const scheduleSave = (nextValue: { title: string; tags: string[] }) => {
+    const serialized = JSON.stringify(nextValue ?? {})
+    if (lastSavedRef.current === serialized) return
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current)
+    }
+    saveTimerRef.current = setTimeout(async () => {
+      if (savingRef.current) return
+      const currentValue = draftsRef.current
+      const currentSerialized = JSON.stringify(currentValue ?? {})
+      if (lastSavedRef.current === currentSerialized) return
+      savingRef.current = true
+      try {
+        await updateSession(sessionId, {
+          title: typeof currentValue.title === 'string' ? currentValue.title : '',
+          tags: Array.isArray(currentValue.tags) ? currentValue.tags : []
+        })
+        lastSavedRef.current = currentSerialized
+      } catch {
+        void message.error(t('common.operationFailed'))
+      } finally {
+        savingRef.current = false
+      }
+    }, 500)
+  }
+
+  const handleDraftChange = (nextValue: unknown) => {
+    const nextRecord = (nextValue != null && typeof nextValue === 'object')
+      ? nextValue as Record<string, unknown>
+      : {}
+    const nextDraft = {
+      title: typeof nextRecord.title === 'string' ? nextRecord.title : '',
+      tags: Array.isArray(nextRecord.tags)
+        ? nextRecord.tags.filter(item => typeof item === 'string')
+        : []
+    }
+    setDraft(nextDraft)
+    scheduleSave(nextDraft)
+  }
+
+  const handleDelete = () => {
+    modal.confirm({
+      title: t('common.deleteSession'),
+      content: t('common.deleteSessionConfirm'),
+      okText: t('common.delete'),
+      okType: 'danger',
+      cancelText: t('common.cancel'),
+      onOk: async () => {
+        try {
+          await deleteSession(sessionId)
+          void message.success(t('common.deleteSuccess'))
+          onClose()
+        } catch (err) {
+          void message.error(t('common.deleteFailed'))
+        }
+      }
+    })
+  }
+
+  return (
+    <div className='session-settings-drawer'>
+      <ConfigSectionPanel
+        sectionKey='session'
+        title={null}
+        icon={undefined}
+        fields={fields}
+        value={draft}
+        onChange={handleDraftChange}
+        mergedModelServices={{}}
+        mergedAdapters={{}}
+        selectedModelService={undefined}
+        t={t}
+        className='session-settings-drawer__form'
+      />
+
+      <div className='settings-footer'>
+        <div className='danger-zone'>
+          <div className='delete-session-row'>
+            <div className='delete-session-meta'>
+              <div className='delete-session-title'>{t('chat.deleteSessionTitle')}</div>
+              <div className='delete-session-desc'>{t('chat.deleteSessionDesc')}</div>
+            </div>
+            <Button
+              danger
+              type='primary'
+              size='middle'
+              icon={<span className='material-symbols-rounded'>delete_forever</span>}
+              onClick={handleDelete}
+              className='delete-session-btn'
+            >
+              {t('common.delete')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/ChatHistoryView.tsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react'
+
+import type { AskUserQuestionParams, ChatMessage, Session, SessionInfo } from '@vibe-forge/core'
+import { CurrentTodoList } from './CurrentTodoList'
+import { MessageItem } from './MessageItem'
+import { NewSessionGuide } from './NewSessionGuide'
+import { Sender } from './Sender'
+import { ToolGroup } from './ToolGroup'
+import { processMessages } from './messageUtils'
+
+interface ModelSelectOption {
+  value: string
+  label: React.ReactNode
+  searchText: string
+}
+
+interface ModelSelectGroup {
+  label: React.ReactNode
+  options: ModelSelectOption[]
+}
+
+export function ChatHistoryView({
+  isReady,
+  messages,
+  session,
+  sessionInfo,
+  isCreating,
+  showScrollBottom,
+  messagesContainerRef,
+  messagesEndRef,
+  scrollToBottom,
+  interactionRequest,
+  onInteractionResponse,
+  onSend,
+  onInterrupt,
+  onClear,
+  placeholder,
+  modelOptions,
+  selectedModel,
+  onModelChange,
+  modelUnavailable
+}: {
+  isReady: boolean
+  messages: ChatMessage[]
+  session?: Session
+  sessionInfo: SessionInfo | null
+  isCreating: boolean
+  showScrollBottom: boolean
+  messagesContainerRef: React.RefObject<HTMLDivElement>
+  messagesEndRef: React.RefObject<HTMLDivElement>
+  scrollToBottom: (behavior?: ScrollBehavior) => void
+  interactionRequest: { id: string; payload: AskUserQuestionParams } | null
+  onInteractionResponse: (id: string, data: string | string[]) => void
+  onSend: (text: string) => void
+  onInterrupt: () => void
+  onClear: () => void
+  placeholder?: string
+  modelOptions: ModelSelectGroup[]
+  selectedModel?: string
+  onModelChange: (model: string) => void
+  modelUnavailable: boolean
+}) {
+  const renderItems = useMemo(() => processMessages(messages), [messages])
+
+  return (
+    <>
+      <div className={`chat-messages ${isReady ? 'ready' : ''}`} ref={messagesContainerRef}>
+        {renderItems.map((item, index) => {
+          if (item.type === 'message') {
+            return (
+              <MessageItem
+                key={item.message.id || index}
+                msg={item.message}
+                isFirstInGroup={item.isFirstInGroup}
+              />
+            )
+          } else if (item.type === 'tool-group') {
+            return (
+              <ToolGroup
+                key={item.id || `group-${index}`}
+                items={item.items}
+                footer={item.footer}
+              />
+            )
+          }
+          return null
+        })}
+        <div ref={messagesEndRef} />
+
+        {showScrollBottom && (
+          <div className='scroll-bottom-btn' onClick={() => scrollToBottom()}>
+            <span className='material-symbols-rounded'>arrow_downward</span>
+          </div>
+        )}
+      </div>
+
+      {!session?.id && (
+        <div className='new-session-guide-wrapper'>
+          <NewSessionGuide />
+        </div>
+      )}
+
+      <CurrentTodoList messages={messages} />
+      <div className='sender-container'>
+        <Sender
+          onSend={onSend}
+          sessionStatus={isCreating ? 'running' : session?.status}
+          onInterrupt={onInterrupt}
+          onClear={onClear}
+          sessionInfo={sessionInfo}
+          interactionRequest={interactionRequest}
+          onInteractionResponse={onInteractionResponse}
+          placeholder={placeholder}
+          modelOptions={modelOptions}
+          selectedModel={selectedModel}
+          onModelChange={onModelChange}
+          modelUnavailable={modelUnavailable}
+        />
+      </div>
+    </>
+  )
+}

package/src/components/chat/ChatSettingsView.tsx

@@ -0,0 +1,22 @@
+import type { Session } from '@vibe-forge/core'
+
+import { SessionSettingsPanel } from './ChatHeader'
+
+export function ChatSettingsView({
+  session,
+  onClose
+}: {
+  session: Session
+  onClose: () => void
+}) {
+  return (
+    <div className='chat-settings-panel'>
+      <SessionSettingsPanel
+        sessionId={session.id}
+        initialTitle={session.title}
+        initialTags={session.tags}
+        onClose={onClose}
+      />
+    </div>
+  )
+}

package/src/components/chat/ChatTimelineView.scss

@@ -0,0 +1,53 @@
+.chat-timeline-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 24px;
+  overflow: auto;
+}
+
+.session-timeline-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: scroll;
+}
+
+.session-timeline-section--fixed {
+  flex: 0 0 25%;
+}
+
+.session-timeline-section--flex {
+  flex: 1 1 auto;
+}
+
+.session-timeline-section--row {
+  flex-direction: row;
+  gap: 16px;
+}
+
+.session-timeline-column {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.session-timeline-column--graph {
+  overflow: auto;
+}
+
+.session-timeline-column--events {
+  flex: 1 1 150%;
+}
+
+.session-timeline-section:not(:last-child) {
+  border-bottom: 1px solid var(--sub-border-color);
+}
+
+.session-timeline-section > .session-timeline-panel,
+.session-timeline-section > .session-timeline-event-table,
+.session-timeline-column > .session-timeline-panel,
+.session-timeline-column > .session-timeline-event-table {
+  flex: 1 1 auto;
+}

package/src/components/chat/ChatTimelineView.tsx

@@ -0,0 +1,158 @@
+import './ChatTimelineView.scss'
+
+import React from 'react'
+
+import type { ChatMessage } from '@vibe-forge/core'
+
+import { SessionTimelinePanel } from './SessionTimelinePanel'
+import { SessionTimelineEventList } from './SessionTimelinePanel/EventList'
+import type { Task } from './SessionTimelinePanel/types'
+
+const mockTimelineTask: Task = {
+  startTime: '09:40:00',
+  endTime: '11:30:48',
+  events: [
+    {
+      type: 'tool__StartTasks',
+      startTime: '09:41:02',
+      endTime: '10:10:25',
+      tasks: {
+        taskA: {
+          startTime: '09:41:10',
+          endTime: '09:55:02',
+          description: 'Task A'
+        },
+        taskB: {
+          startTime: '09:41:10',
+          endTime: '09:50:40',
+          description: 'Task B'
+        },
+        taskC: {
+          startTime: '09:41:10',
+          endTime: '10:10:20',
+          description: 'Task C',
+          events: [
+            {
+              type: 'tool__StartTasks',
+              startTime: '09:48:00',
+              endTime: '10:05:30',
+              tasks: {
+                taskC0: {
+                  startTime: '09:49:10',
+                  endTime: '10:05:25',
+                  events: [
+                    {
+                      type: 'tool__AskUserQuestion',
+                      startTime: '09:57:00',
+                      endTime: '09:59:23'
+                    },
+                    {
+                      type: 'user__Prompt',
+                      startTime: '09:58:10',
+                      endTime: '09:58:20'
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              type: 'tool__Edit',
+              startTime: '09:57:10',
+              endTime: '09:59:20'
+            },
+            {
+              type: 'tool__ResumeTask',
+              startTime: '09:59:22',
+              endTime: '10:05:30'
+            }
+          ]
+        }
+      }
+    },
+    {
+      type: 'tool__StartTasks',
+      startTime: '10:41:02',
+      endTime: '11:10:25',
+      tasks: {
+        taskA1: {
+          startTime: '10:41:10',
+          endTime: '10:55:02',
+          description: 'Task A1'
+        },
+        taskB1: {
+          startTime: '10:41:10',
+          endTime: '10:50:40',
+          description: 'Task B1'
+        },
+        taskC1: {
+          startTime: '10:41:10',
+          endTime: '11:10:20',
+          description: 'Task C1',
+          events: [
+            {
+              type: 'tool__StartTasks',
+              startTime: '10:48:00',
+              endTime: '11:05:30',
+              tasks: {
+                taskC10: {
+                  startTime: '10:49:10',
+                  endTime: '11:05:25',
+                  events: [
+                    {
+                      type: 'tool__AskUserQuestion',
+                      startTime: '10:57:00',
+                      endTime: '10:59:23'
+                    },
+                    {
+                      type: 'user__Prompt',
+                      startTime: '10:58:10',
+                      endTime: '10:58:20'
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              type: 'tool__Edit',
+              startTime: '10:57:10',
+              endTime: '10:59:20'
+            },
+            {
+              type: 'tool__ResumeTask',
+              startTime: '10:59:22',
+              endTime: '11:05:30'
+            }
+          ]
+        }
+      }
+    }
+  ]
+}
+
+export function ChatTimelineView({
+  messages
+}: {
+  messages: ChatMessage[]
+}) {
+  return (
+    <div className='chat-timeline-view'>
+      <section className='session-timeline-section session-timeline-section--fixed'>
+        <SessionTimelinePanel
+          task={mockTimelineTask}
+          viewMode='gantt'
+        />
+      </section>
+      <section className='session-timeline-section session-timeline-section--flex session-timeline-section--row'>
+        <div className='session-timeline-column session-timeline-column--graph'>
+          <SessionTimelinePanel
+            task={mockTimelineTask}
+            viewMode='git'
+          />
+        </div>
+        <div className='session-timeline-column session-timeline-column--events'>
+          <SessionTimelineEventList task={mockTimelineTask} />
+        </div>
+      </section>
+    </div>
+  )
+}