@vibe-forge/client 0.4.0 → 0.6.0

package/src/components/Chat.tsx

@@ -1,100 +0,0 @@
-import './Chat.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 { useChatSession } from '#~/hooks/chat/use-chat-session'
-
-export function Chat({
-  session
-}: {
-  session?: Session
-}) {
-  const {
-    messages,
-    sessionInfo,
-    interactionRequest,
-    isReady,
-    activeView,
-    setActiveView,
-    handleInteractionResponse,
-    setMessages,
-    placeholder,
-    modelOptions,
-    selectedModel,
-    modelForQuery,
-    setSelectedModel,
-    permissionMode,
-    setPermissionMode,
-    permissionModeOptions,
-    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()
-    }
-  }
-
-  return (
-    <div className={`chat-container ${isReady ? 'ready' : ''} ${!session?.id ? '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}
-          activeView={activeView}
-          onViewChange={setActiveView}
-        />
-      )}
-
-      {activeView === 'history' && (
-        <ChatHistoryView
-          isReady={isReady}
-          messages={messages}
-          session={session}
-          sessionInfo={sessionInfo}
-          interactionRequest={interactionRequest}
-          onInteractionResponse={handleInteractionResponse}
-          onClearMessages={() => setMessages([])}
-          onSend={(text) => setMessages((prev) => [...prev, buildUserMessage(text)])}
-          onSendContent={(content) => setMessages((prev) => [...prev, buildUserMessage(content)])}
-          placeholder={placeholder}
-          modelOptions={modelOptions}
-          selectedModel={selectedModel}
-          modelForQuery={modelForQuery}
-          onModelChange={setSelectedModel}
-          permissionMode={permissionMode}
-          permissionModeOptions={permissionModeOptions}
-          onPermissionModeChange={setPermissionMode}
-          modelUnavailable={modelUnavailable}
-          hasAvailableModels={hasAvailableModels}
-        />
-      )}
-
-      {activeView === 'timeline' && (
-        <ChatTimelineView messages={messages} />
-      )}
-
-      {activeView === 'settings' && session?.id && (
-        <ChatSettingsView
-          session={session}
-          onClose={() => setActiveView('history')}
-        />
-      )}
-    </div>
-  )
-}

package/src/components/config/{recordEditors → record-editors}/ChannelRecordEditor.tsx

@@ -257,6 +257,39 @@ export const ChannelRecordEditor = ({
 
   return (
     <div className='config-view__record-list'>
+      <div className='config-view__record-add'>
+        <div className='config-view__record-add-inputs'>
+          <Input
+            value={newKey}
+            placeholder={keyPlaceholder}
+            onChange={(event) => setNewKey(event.target.value)}
+          />
+          <Select
+            value={newType}
+            options={typeOptions}
+            onChange={(nextValue) => setNewType(nextValue)}
+          />
+          <Tooltip title={t('common.confirm')}>
+            <Button
+              size='small'
+              type='primary'
+              className='config-view__icon-button'
+              aria-label={t('common.confirm')}
+              icon={<span className='material-symbols-rounded'>check</span>}
+              disabled={newKey.trim() === '' || Object.hasOwn(value, newKey) || newType === ''}
+              onClick={() => {
+                const definition = getChannelDefinition(newType)
+                if (!definition) return
+                onChange({
+                  ...value,
+                  [newKey]: buildRecordDefaults(definition)
+                })
+                setNewKey('')
+              }}
+            />
+          </Tooltip>
+        </div>
+      </div>
       {entries.map(([key, itemValue]) => {
         const recordValue = (itemValue != null && typeof itemValue === 'object')
           ? itemValue as ChannelRecordValue
@@ -359,39 +392,6 @@ export const ChannelRecordEditor = ({
           </div>
         )
       })}
-      <div className='config-view__record-add'>
-        <div className='config-view__record-add-inputs'>
-          <Input
-            value={newKey}
-            placeholder={keyPlaceholder}
-            onChange={(event) => setNewKey(event.target.value)}
-          />
-          <Select
-            value={newType}
-            options={typeOptions}
-            onChange={(nextValue) => setNewType(nextValue)}
-          />
-          <Tooltip title={t('common.confirm')}>
-            <Button
-              size='small'
-              type='primary'
-              className='config-view__icon-button'
-              aria-label={t('common.confirm')}
-              icon={<span className='material-symbols-rounded'>check</span>}
-              disabled={newKey.trim() === '' || Object.hasOwn(value, newKey) || newType === ''}
-              onClick={() => {
-                const definition = getChannelDefinition(newType)
-                if (!definition) return
-                onChange({
-                  ...value,
-                  [newKey]: buildRecordDefaults(definition)
-                })
-                setNewKey('')
-              }}
-            />
-          </Tooltip>
-        </div>
-      </div>
     </div>
   )
 }