@vibe-forge/client 0.2.0-alpha.0

package/src/components/chat/MarkdownContent.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { CodeBlock } from './CodeBlock'
+
+export function MarkdownContent({
+  content
+}: {
+  content: string
+}) {
+  return (
+    <div className='markdown-body'>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          pre({ children }) {
+            return <>{children}</>
+          },
+          code({ inline, className, children, ...props }: any) {
+            const langClass = typeof className === 'string' ? className : ''
+            const match = /language-(\w+)/.exec(langClass)
+            const isInline = inline === true
+            const codeContent = String(children).replace(/\n$/, '')
+            return !isInline && match != null
+              ? (
+                <CodeBlock
+                  code={codeContent}
+                  lang={match[1]}
+                />
+              )
+              : (
+                <code className={langClass} {...props}>
+                  {children}
+                </code>
+              )
+          }
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

package/src/components/chat/MessageFooter.tsx

@@ -0,0 +1,48 @@
+import type { ChatMessage } from '@vibe-forge/core'
+import { App } from 'antd'
+import React from 'react'
+
+export function MessageFooter({
+  msg,
+  isUser
+}: {
+  msg: ChatMessage
+  isUser: boolean
+}) {
+  const { message } = App.useApp()
+
+  return (
+    <div className='msg-footer'>
+      {isUser && msg.model != null && (
+        <span className='msg-model'>
+          {msg.model.split(',').pop()}
+        </span>
+      )}
+      {isUser && msg.usage != null && (
+        <span className='msg-usage'>
+          Tokens: {msg.usage.input_tokens + msg.usage.output_tokens}
+        </span>
+      )}
+      <span
+        className='timestamp'
+        onDoubleClick={() => {
+          // eslint-disable-next-line no-console
+          console.log('Debug Message:', msg)
+          void navigator.clipboard.writeText(new Date(msg.createdAt).toISOString())
+          void message.success('ISO 时间已复制到剪贴板')
+        }}
+        title='双击复制 ISO 时间 (控制台打印消息结构)'
+      >
+        {new Date(msg.createdAt).toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        })}
+      </span>
+    </div>
+  )
+}

package/src/components/chat/MessageItem.scss

@@ -0,0 +1,251 @@
+.chat-message-user, .chat-message-assistant {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 12px;
+  margin-bottom: 0;
+  position: relative;
+
+  .message-body-container {
+    display: flex;
+    flex-direction: column;
+    max-width: 90%;
+  }
+
+  .bubble {
+    position: relative;
+    width: fit-content;
+  }
+
+  .msg-footer {
+    opacity: 0;
+    transition: opacity .2s ease;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    color: var(--sub-text-color, #9ca3af);
+
+    .timestamp {
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+
+  &.chat-message-user {
+    .message-body-container {
+      align-items: flex-end;
+    }
+    .msg-footer {
+      justify-content: flex-end;
+    }
+  }
+
+  &.chat-message-assistant {
+    .message-body-container {
+      align-items: flex-start;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
+  &:hover .msg-footer {
+    opacity: 1;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.chat-message-user {
+  flex-direction: row-reverse;
+  gap: 8px;
+
+  &.consecutive {
+    margin-top: 4px;
+  }
+
+  .bubble {
+    background-color: var(--user-bubble-bg, #3b82f6);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 16px 0 16px 16px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+  }
+
+  &.consecutive .bubble {
+    border-radius: 16px;
+  }
+}
+
+.chat-message-assistant {
+  flex-direction: row;
+  gap: 0;
+  padding-left: 0;
+
+  &.consecutive {
+    margin-top: 0;
+  }
+
+  .bubble {
+    background-color: transparent;
+    color: var(--text-color);
+    padding: 0;
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+html.dark {
+  .chat-message-user {
+    --user-bubble-bg: #1d4ed8;
+  }
+  .chat-message-assistant {
+    .bubble {
+      color: #e5e7eb;
+    }
+  }
+
+  .markdown-body {
+    --border-color: #30363d;
+    --code-block-bg: #0d1117;
+    --code-header-bg: #161b22;
+    --hover-bg: rgba(255, 255, 255, .1);
+  }
+}
+
+.message-contents {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.markdown-body {
+  --border-color: #e5e7eb;
+  --code-block-bg: #ffffff;
+  --code-header-bg: #f6f8fa;
+  --hover-bg: rgba(0, 0, 0, .05);
+
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  width: 100%;
+
+  p {
+    margin: 0 0 4px 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  code {
+    background-color: var(--tag-bg, #f3f4f6);
+    padding: 1px 3px;
+    border-radius: 3px;
+    font-family:
+      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: .9em;
+    color: var(--text-color);
+  }
+
+  pre {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+    overflow-x: visible;
+    margin: 8px 0;
+
+    code {
+      background-color: transparent;
+      padding: 0;
+      font-size: 12px;
+    }
+  }
+
+  ul, ol {
+    margin: 4px 0;
+    padding-left: 18px;
+  }
+
+  li {
+    margin-bottom: 2px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 12px 0 6px 0;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  a {
+    color: #3b82f6;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  blockquote {
+    margin: 8px 0;
+    padding-left: 10px;
+    border-left: 3px solid #e5e7eb;
+    color: #6b7280;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 12px 0;
+
+    th, td {
+      border: 1px solid #e5e7eb;
+      padding: 6px 13px;
+    }
+
+    tr:nth-child(2n) {
+      background-color: #f9fafb;
+    }
+  }
+}
+
+.chat-message-user {
+  .markdown-body {
+    color: white;
+    code {
+      background-color: rgba(255, 255, 255, .2);
+      color: white;
+    }
+    pre {
+      background-color: rgba(0, 0, 0, .1);
+      code {
+        background-color: transparent;
+      }
+    }
+    a {
+      color: white;
+      text-decoration: underline;
+    }
+    blockquote {
+      border-left-color: rgba(255, 255, 255, .3);
+      color: rgba(255, 255, 255, .9);
+    }
+  }
+}
+
+.adapter-event-item {
+  opacity: 0;
+  transition: opacity .2s ease;
+  font-size: 11px;
+  color: #9ca3af;
+  margin: 2px 0;
+  padding: 2px 6px;
+  background-color: #f9fafb;
+  border-radius: 4px;
+  border: 1px solid #f3f4f6;
+
+  &:hover {
+    opacity: 1;
+  }
+}

package/src/components/chat/MessageItem.tsx

@@ -0,0 +1,78 @@
+import './MessageItem.scss'
+import type { ChatMessage } from '@vibe-forge/core'
+import React from 'react'
+import { MessageFooter } from './MessageFooter'
+import { MarkdownContent } from './MarkdownContent'
+import { ToolRenderer } from './ToolRenderer'
+
+export function MessageItem({
+  msg,
+  isFirstInGroup
+}: {
+  msg: ChatMessage
+  isFirstInGroup: boolean
+}) {
+  const isUser = msg.role === 'user'
+
+  const renderContent = () => {
+    if (msg.content == null) return null
+
+    if (typeof msg.content === 'string') {
+      return (
+        <MarkdownContent content={msg.content} />
+      )
+    }
+
+    if (!Array.isArray(msg.content)) return null
+
+    const hasContent = msg.content.some(c => c.type === 'text') || msg.toolCall != null
+    if (!hasContent) return null
+
+    return (
+      <div className='message-contents'>
+        {msg.content.map((item, i) => {
+          if (item.type === 'text') {
+            return (
+              <MarkdownContent key={i} content={item.text} />
+            )
+          }
+          return null
+        })}
+        {msg.toolCall != null && (
+          <ToolRenderer
+            item={{
+              type: 'tool_use',
+              id: msg.toolCall.id ?? 'legacy',
+              name: msg.toolCall.name,
+              input: msg.toolCall.args
+            }}
+            resultItem={msg.toolCall.output != null
+              ? {
+                type: 'tool_result',
+                tool_use_id: msg.toolCall.id ?? 'legacy',
+                content: msg.toolCall.output,
+                is_error: msg.toolCall.status === 'error'
+              }
+              : undefined}
+          />
+        )}
+      </div>
+    )
+  }
+
+  const content = renderContent()
+  if (content == null) return null
+
+  return (
+    <div
+      className={`${isUser ? 'chat-message-user' : 'chat-message-assistant'} ${!isFirstInGroup ? 'consecutive' : ''}`}
+    >
+      <div className='message-body-container'>
+        <div className='bubble'>
+          {content}
+        </div>
+        <MessageFooter msg={msg} isUser={isUser} />
+      </div>
+    </div>
+  )
+}

package/src/components/chat/NewSessionGuide.scss

@@ -0,0 +1,186 @@
+.new-session-guide {
+  width: 100%;
+  max-width: 1100px;
+}
+
+.new-session-guide__announcements {
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  background: var(--tag-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.new-session-guide__announcements-header {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.new-session-guide__announcements-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+}
+
+.new-session-guide__announcements-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.new-session-guide__announcements-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--sub-text-color);
+  line-height: 1.4;
+}
+
+.new-session-guide__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.new-session-guide__card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 16px;
+  background: var(--bg-color);
+}
+
+.new-session-guide__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.new-session-guide__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.new-session-guide__title-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+}
+
+.new-session-guide__count {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  color: var(--sub-text-color);
+  background: var(--tag-bg);
+}
+
+.new-session-guide__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 160px;
+}
+
+.new-session-guide__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.new-session-guide__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--tag-bg);
+}
+
+.new-session-guide__item-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.new-session-guide__item-icon {
+  font-size: 16px;
+  color: var(--sub-text-color);
+}
+
+.new-session-guide__item-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+  line-height: 1.4;
+}
+
+.new-session-guide__meta {
+  font-size: 11px;
+  color: var(--sub-text-color);
+}
+
+.new-session-guide__empty {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.new-session-guide__empty-desc {
+  font-size: 12px;
+  color: var(--sub-text-color);
+  line-height: 1.4;
+}
+
+.new-session-guide__loading {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+.new-session-guide__help {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.new-session-guide__help-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--sub-text-color);
+  line-height: 1.4;
+}
+
+.new-session-guide__help-icon {
+  font-size: 14px;
+  margin-top: 2px;
+  color: var(--sub-text-color);
+}
+
+.new-session-guide__help-footer {
+  font-size: 12px;
+  color: var(--sub-text-color);
+}
+
+@media (max-width: 1100px) {
+  .new-session-guide__grid {
+    grid-template-columns: 1fr;
+  }
+}