@vibe-forge/client 0.2.0-alpha.0

package/src/components/chat/NewSessionGuide.tsx

@@ -0,0 +1,167 @@
+import './NewSessionGuide.scss'
+
+import { App, Button } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { EntitySummary, SpecSummary } from '#~/api.js'
+
+export function NewSessionGuide() {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+
+  const { data: specsRes } = useSWR<{ specs: SpecSummary[] }>('/api/ai/specs')
+  const { data: entitiesRes } = useSWR<{ entities: EntitySummary[] }>('/api/ai/entities')
+  const { data: configRes } = useSWR<{
+    sources: {
+      merged: {
+        general?: {
+          announcements: string[]
+        }
+      }
+    }
+  }>(
+    '/api/config'
+  )
+
+  const specs = specsRes?.specs ?? []
+  const entities = entitiesRes?.entities ?? []
+  const isSpecsReady = specsRes != null
+  const isEntitiesReady = entitiesRes != null
+  const { announcements = [] } = configRes?.sources.merged?.general ?? {}
+
+  const helpItems = [
+    t('chat.newSessionGuide.help.item1'),
+    t('chat.newSessionGuide.help.item2'),
+    t('chat.newSessionGuide.help.item3')
+  ]
+
+  const handleCreateSpec = () => {
+    message.info(t('chat.newSessionGuide.specs.createToast'))
+  }
+
+  const handleCreateEntity = () => {
+    message.info(t('chat.newSessionGuide.entities.createToast'))
+  }
+
+  return (
+    <div className='new-session-guide'>
+      {announcements.length > 0 && (
+        <div className='new-session-guide__announcements'>
+          <div className='new-session-guide__announcements-header'>
+            <span className='material-symbols-rounded new-session-guide__announcements-icon'>campaign</span>
+            <span>{t('chat.newSessionGuide.announcements.title')}</span>
+          </div>
+          <div className='new-session-guide__announcements-list'>
+            {announcements.map((item, index) => (
+              <div key={`${item}-${index}`} className='new-session-guide__announcements-item'>
+                <span>{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      <div className='new-session-guide__grid'>
+        <div className='new-session-guide__card'>
+          <div className='new-session-guide__header'>
+            <div className='new-session-guide__title'>
+              <span className='material-symbols-rounded new-session-guide__title-icon'>account_tree</span>
+              <span>{t('chat.newSessionGuide.specs.title')}</span>
+            </div>
+            <div className='new-session-guide__count'>{specs.length}</div>
+          </div>
+          <div className='new-session-guide__body'>
+            {!isSpecsReady && (
+              <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
+            )}
+            {isSpecsReady && specs.length > 0 && (
+              <div className='new-session-guide__list'>
+                {specs.map((spec) => (
+                  <div key={spec.id} className='new-session-guide__item'>
+                    <div className='new-session-guide__item-title'>
+                      <span className='material-symbols-rounded new-session-guide__item-icon'>route</span>
+                      <span>{spec.name}</span>
+                    </div>
+                    <div className='new-session-guide__item-desc'>{spec.description}</div>
+                    {spec.params.length > 0 && (
+                      <div className='new-session-guide__meta'>
+                        {t('chat.newSessionGuide.specs.params', { count: spec.params.length })}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+            {isSpecsReady && specs.length === 0 && (
+              <div className='new-session-guide__empty'>
+                <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.specs.empty')}</div>
+                <Button type='primary' size='small' onClick={handleCreateSpec}>
+                  {t('chat.newSessionGuide.specs.create')}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className='new-session-guide__card'>
+          <div className='new-session-guide__header'>
+            <div className='new-session-guide__title'>
+              <span className='material-symbols-rounded new-session-guide__title-icon'>group_work</span>
+              <span>{t('chat.newSessionGuide.entities.title')}</span>
+            </div>
+            <div className='new-session-guide__count'>{entities.length}</div>
+          </div>
+          <div className='new-session-guide__body'>
+            {!isEntitiesReady && (
+              <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
+            )}
+            {isEntitiesReady && entities.length > 0 && (
+              <div className='new-session-guide__list'>
+                {entities.map((entity) => (
+                  <div key={entity.id} className='new-session-guide__item'>
+                    <div className='new-session-guide__item-title'>
+                      <span className='material-symbols-rounded new-session-guide__item-icon'>person</span>
+                      <span>{entity.name}</span>
+                    </div>
+                    <div className='new-session-guide__item-desc'>{entity.description}</div>
+                  </div>
+                ))}
+              </div>
+            )}
+            {isEntitiesReady && entities.length === 0 && (
+              <div className='new-session-guide__empty'>
+                <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.entities.empty')}</div>
+                <Button type='primary' size='small' onClick={handleCreateEntity}>
+                  {t('chat.newSessionGuide.entities.create')}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className='new-session-guide__card'>
+          <div className='new-session-guide__header'>
+            <div className='new-session-guide__title'>
+              <span className='material-symbols-rounded new-session-guide__title-icon'>tips_and_updates</span>
+              <span>{t('chat.newSessionGuide.help.title')}</span>
+            </div>
+          </div>
+          <div className='new-session-guide__body'>
+            <div className='new-session-guide__help'>
+              {helpItems.map(item => (
+                <div key={item} className='new-session-guide__help-item'>
+                  <span className='material-symbols-rounded new-session-guide__help-icon'>check_circle</span>
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
+            <div className='new-session-guide__help-footer'>
+              {t('chat.newSessionGuide.help.footer')}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/Sender.scss

@@ -0,0 +1,367 @@
+.chat-input-wrapper {
+  border-top: none;
+  position: relative;
+  background-color: var(--bg-color);
+}
+
+.chat-input-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--input-bg, #f9fafb);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 8px 12px;
+  transition: all .2s;
+
+  &:focus-within {
+    border-color: #3b82f6;
+    background-color: var(--input-focus-bg, #f9fafb);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, .1);
+  }
+
+  textarea {
+    color: var(--text-color);
+    background: transparent;
+    &::placeholder {
+      color: var(--sub-text-color, #9ca3af);
+    }
+  }
+
+  .model-unavailable {
+    margin-bottom: 6px;
+    padding: 6px 8px;
+    border-radius: 8px;
+    border: 1px dashed var(--border-color);
+    background-color: var(--tag-bg, #f9fafb);
+    color: var(--placeholder-color);
+    font-size: 12px;
+  }
+}
+
+.chat-input-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+  padding-top: 4px;
+
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .session-info-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-left: 4px;
+      padding-left: 8px;
+      border-left: 2px solid var(--border-color);
+      border-radius: 1px;
+      position: relative;
+      height: 14px;
+      align-self: center;
+
+      .info-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 13px;
+        color: var(--sub-text-color, #9ca3af);
+        background-color: transparent;
+        padding: 2px 4px;
+        border-radius: 4px;
+        white-space: nowrap;
+        max-width: 150px;
+        cursor: pointer;
+        transition: all .2s;
+
+        .material-symbols-rounded {
+          font-size: 18px;
+        }
+
+        .info-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 400;
+        }
+
+        .arrow-icon {
+          font-size: 16px;
+          color: var(--sub-text-color, #9ca3af);
+          transition: transform .2s;
+        }
+
+        &:hover, &.active {
+          color: #3b82f6;
+          .arrow-icon {
+            color: #3b82f6;
+          }
+        }
+
+        &.active .arrow-icon {
+          transform: rotate(180deg);
+        }
+      }
+
+      .tools-list-popup {
+        position: absolute;
+        bottom: calc(100% + 12px);
+        left: 12px;
+        background: var(--bg-color);
+        border: 1px solid var(--border-color);
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
+        min-width: 200px;
+        max-height: 300px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        z-index: 100;
+        animation: slideUp .2s ease-out;
+
+        .popup-header {
+          padding: 10px 12px;
+          font-size: 12px;
+          font-weight: 600;
+          color: var(--sub-text-color, #9ca3af);
+          border-bottom: 1px solid var(--border-color);
+          background: var(--tag-bg, #f9fafb);
+        }
+
+        .popup-content {
+          padding: 6px;
+          overflow-y: auto;
+
+          .tool-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 10px;
+            border-radius: 6px;
+            color: var(--text-color);
+            transition: all .2s;
+
+            .material-symbols-rounded {
+              font-size: 18px;
+              color: #3b82f6;
+            }
+
+            .tool-name {
+              font-size: 13px;
+            }
+
+            &:hover {
+              background-color: var(--tag-hover-bg, #f3f4f6);
+              color: var(--text-color);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .toolbar-btn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--sub-text-color, #9ca3af);
+    transition: all .2s;
+
+    &:hover {
+      background-color: transparent;
+      color: #3b82f6;
+    }
+
+    .material-symbols-rounded {
+      font-size: 20px;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.model-switcher {
+      width: auto;
+      height: 28px;
+      padding: 0 8px;
+      gap: 4px;
+      background-color: var(--tag-hover-bg, #f3f4f6);
+      border: 1px solid var(--border-color);
+      color: var(--sub-text-color, #6b7280);
+
+      .model-name {
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .arrow {
+        font-size: 14px;
+      }
+
+      &:hover {
+        border-color: #3b82f6;
+        background-color: var(--bg-color);
+        color: #3b82f6;
+      }
+    }
+  }
+}
+
+.model-select {
+  min-width: 160px;
+
+  .ant-select-selector {
+    height: 28px !important;
+    border-radius: 8px !important;
+    border: 1px solid var(--border-color) !important;
+    background-color: var(--tag-hover-bg, #f3f4f6) !important;
+    padding: 0 8px !important;
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    font-size: 12px;
+    color: var(--text-color);
+    line-height: 1;
+  }
+
+  &.ant-select-disabled .ant-select-selector {
+    background-color: var(--tag-bg, #f9fafb) !important;
+    color: var(--sub-text-color, #9ca3af);
+  }
+}
+
+.model-select-popup {
+  .ant-select-item-group {
+    padding: 8px 8px 4px;
+    color: var(--text-color);
+    font-weight: 600;
+    font-size: 12px;
+  }
+
+  .model-group-label {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .model-group-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--placeholder-color);
+  }
+
+  .model-group-desc {
+    font-size: 11px;
+    color: var(--placeholder-color);
+  }
+
+  .model-option {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .model-option-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-color);
+  }
+
+  .model-option-desc {
+    font-size: 12px;
+    color: var(--sub-text-color, #9ca3af);
+  }
+}
+
+html.dark {
+  .chat-input-container {
+    --input-bg: #1f1f1f;
+    --input-focus-bg: #141414;
+  }
+}
+
+.chat-input-textarea {
+  background: transparent !important;
+  padding: 4px 0 !important;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #111827;
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+}
+
+.chat-send-btn {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 1px;
+  border-radius: 8px;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all .2s;
+  color: #9ca3af;
+  flex-shrink: 0;
+
+  .material-symbols-rounded {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    font-size: 20px;
+  }
+
+  &:hover {
+    color: #3b82f6;
+  }
+
+  &.active {
+    color: #3b82f6;
+
+    &:hover {
+      color: #2563eb;
+    }
+  }
+
+  &.thinking {
+    color: #ef4444;
+
+    &:hover {
+      color: #dc2626;
+    }
+  }
+
+  &.disabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+
+    &:hover {
+      color: #9ca3af;
+    }
+  }
+}
+
+.chat-input-hint {
+  margin-top: 4px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+}