@tbox.cn/app-template-agent 0.1.0

package/apps/client/src/components/MessageBubble/index.less

@@ -0,0 +1,309 @@
+.msg-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  padding: 0 24px;
+
+  &--user {
+    flex-direction: row-reverse;
+  }
+  &--bot {
+    flex-direction: row;
+  }
+}
+
+.msg-main {
+  min-width: 0;
+}
+.msg-row--bot .msg-main {
+  flex: 1;
+}
+
+.msg-meta {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+
+  &--user {
+    justify-content: flex-end;
+    margin-right: 12px;
+  }
+  &--bot {
+    justify-content: flex-start;
+  }
+
+  &__role {
+    font-size: 19px;
+    color: #70788d;
+    margin-right: 8px;
+  }
+  &__time {
+    font-size: 18px;
+    color: #a0a7b8;
+  }
+}
+
+.msg-bubble {
+  padding: 18px 22px;
+  border-radius: 20px;
+  line-height: 1.6;
+  box-shadow: 0 4px 16px rgba(50, 65, 92, 0.08);
+
+  &--user {
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 48px 48px 8px;
+    width: fit-content;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: 12px;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+  }
+
+  &--bot {
+    position: relative;
+    font-size: 30px;
+    line-height: 1.6;
+    padding: 22px;
+    color: #1b1212;
+    background-color: rgba(255, 255, 255, 0.4);
+    border: 1px solid #edf0f6;
+    border-radius: 48px 8px 48px 48px;
+    box-shadow:
+      0 3px 8px 5px rgba(1, 112, 254, 0.0392),
+      0 2px 4px rgba(72, 78, 86, 0.0706);
+  }
+
+  &__text {
+    font-size: 25px;
+  }
+
+  &__error {
+    color: var(--tbox-error);
+    font-size: 25px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+
+    &--with-content {
+      margin-top: 14px;
+      padding-top: 14px;
+      border-top: 1px solid var(--tbox-error);
+    }
+  }
+
+  &--user &__text {
+    color: #1f3b63;
+    font-weight: 500;
+    overflow-wrap: break-word;
+  }
+}
+
+/* 用户消息附带的图片缩略图 */
+.msg-media {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: 16px;
+  direction: rtl;
+  margin-right: 12px;
+  margin-top: 4px;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__thumb {
+    direction: ltr;
+    width: var(--tbox-media-item-size);
+    min-width: var(--tbox-media-item-size);
+    height: var(--tbox-media-item-size);
+    border-radius: var(--tbox-media-item-radius);
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+}
+
+.msg-toolbar {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  opacity: 0.4;
+
+  &--user {
+    justify-content: flex-end;
+    padding-right: 12px;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 28px;
+  }
+}
+
+.msg-toolbar-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+/* 3 个点 loading 指示器 */
+.msg-thinking,
+.msg-thinking-inline {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+  margin-left: 12px;
+
+  &__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #8a9ab8;
+    animation: dot-fade 1.4s ease-in-out infinite;
+
+    &--2 {
+      animation-delay: 0.2s;
+    }
+    &--3 {
+      animation-delay: 0.4s;
+    }
+  }
+}
+
+@keyframes dot-fade {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+/* 流式光标 */
+.msg-cursor {
+  display: inline-block;
+  width: 4px;
+  height: 24px;
+  background: #5874ff;
+  margin-left: 4px;
+  vertical-align: middle;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Markdown */
+.msg-markdown {
+  font-size: 25px;
+  color: #2a3142;
+  overflow-wrap: anywhere;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 16px 0 8px;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+  h1 {
+    font-size: 36px;
+  }
+  h2 {
+    font-size: 32px;
+  }
+  h3 {
+    font-size: 30px;
+  }
+  h4 {
+    font-size: 28px;
+  }
+
+  p {
+    margin: 8px 0;
+  }
+  strong {
+    font-weight: 600;
+  }
+  em {
+    font-style: italic;
+  }
+  a {
+    color: #1677ff;
+    text-decoration: underline;
+  }
+  ul,
+  ol {
+    padding-left: 32px;
+    margin: 8px 0;
+  }
+  li {
+    margin: 4px 0;
+  }
+  blockquote {
+    border-left: 4px solid #667eea;
+    padding-left: 16px;
+    margin: 12px 0;
+    color: #666;
+  }
+  code {
+    background: rgba(0, 0, 0, 0.06);
+    padding: 2px 8px;
+    border-radius: 6px;
+    font-size: 26px;
+    font-family: Menlo, Monaco, Consolas, monospace;
+  }
+  pre {
+    background: #1e1e2e;
+    border-radius: 12px;
+    padding: 20px;
+    margin: 12px 0;
+    overflow-x: auto;
+
+    code {
+      background: none;
+      padding: 0;
+      color: #cdd6f4;
+      font-size: 24px;
+    }
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 12px 0;
+  }
+  th,
+  td {
+    border: 1px solid #ddd;
+    padding: 8px 12px;
+    text-align: left;
+    font-size: 26px;
+  }
+  th {
+    background: #f0f0f5;
+    font-weight: 600;
+  }
+}

package/apps/client/src/components/MessageBubble/index.tsx

@@ -0,0 +1,163 @@
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Copy } from '@phosphor-icons/react';
+import { previewImages } from '@/utils/imagePreview';
+import type { ChatMessage } from '@/types/chat';
+import ReasoningBlock from '@/components/ReasoningBlock';
+import ToolCallBlock from '@/components/ToolCallBlock';
+import { ActionBar, CopyButton, getMessageCopyText } from '@/components/ActionBar';
+import { DebugButton } from '@/components/ActionBar/DebugButton';
+import { CardRenderer } from '@/cards/CardRenderer';
+import { useChatStore } from '@/store/chat';
+import { copyText } from '@/utils/copyText';
+import { toast } from '@/utils/toast';
+import './index.less';
+
+const TBOX_FILE_URL = 'https://mdn.alipayobjects.com/tcmarket/afts/file/';
+
+/** 消息气泡（对齐原模板）：meta + 思考/工具/卡片 + 气泡 + 媒体 + 操作栏。 */
+export function MessageBubble({ message }: { message: ChatMessage }) {
+  const cardsByMessageId = useChatStore((s) => s.cardsByMessageId);
+  const conversationId = useChatStore((s) => s.conversationId);
+  const isUser = message.role === 'user';
+  const roleName = isUser ? '你' : 'AI 助手';
+  const timeLabel = new Date(message.createdAt).toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+  const isThinking = message.status === 'thinking';
+  const isStreaming = message.status === 'streaming';
+  const hasReasoning = !!message.reasoning;
+  const visibleToolCalls = useMemo(
+    () => (message.toolCalls || []).filter((tc) => tc.name !== '__a2uiFormSubmit'),
+    [message.toolCalls],
+  );
+  const hasToolCalls = visibleToolCalls.length > 0;
+
+  const messageCards = useMemo(
+    () => (isUser ? [] : cardsByMessageId[message.id] || []),
+    [cardsByMessageId, message.id, isUser],
+  );
+  const imageItems = isUser
+    ? message.mediaItems?.filter((i) => i.type === 'image' && (i.src || i.fileId))
+    : undefined;
+
+  const isPureThinking = isThinking && !hasReasoning && !message.content && !hasToolCalls;
+  const isReasoningActive = isThinking || (isStreaming && !message.content);
+  const showBubble = isUser || !!message.content || !!message.error || isStreaming;
+
+  const copy = async () => {
+    const copied = await copyText(message.content);
+    void toast(copied ? '复制成功' : '复制失败，请重试', copied ? 'success' : 'error');
+  };
+
+  const imageUrls = (imageItems || []).map((it) => it.src || `${TBOX_FILE_URL}${it.fileId}`);
+
+  return (
+    <div className={`msg-row ${isUser ? 'msg-row--user' : 'msg-row--bot'}`}>
+      <div className="msg-main">
+        <div className={`msg-meta ${isUser ? 'msg-meta--user' : 'msg-meta--bot'}`}>
+          <span className="msg-meta__role">{roleName}</span>
+          <span className="msg-meta__time">{timeLabel}</span>
+        </div>
+
+        {isPureThinking && (
+          <div className="msg-thinking">
+            <div className="msg-thinking__dot" />
+            <div className="msg-thinking__dot msg-thinking__dot--2" />
+            <div className="msg-thinking__dot msg-thinking__dot--3" />
+          </div>
+        )}
+
+        {hasReasoning && <ReasoningBlock reasoning={message.reasoning!} isActive={isReasoningActive} />}
+
+        {hasToolCalls && <ToolCallBlock toolCalls={visibleToolCalls} />}
+
+        {isThinking && hasToolCalls && !message.content && (
+          <div className="msg-thinking-inline">
+            <div className="msg-thinking-inline__dot" />
+            <div className="msg-thinking-inline__dot msg-thinking-inline__dot--2" />
+            <div className="msg-thinking-inline__dot msg-thinking-inline__dot--3" />
+          </div>
+        )}
+
+        {messageCards.map((card) => (
+          <CardRenderer key={card.id} card={card} />
+        ))}
+
+        {showBubble && (
+          <div className={`msg-bubble ${isUser ? 'msg-bubble--user' : 'msg-bubble--bot'}`}>
+            {isUser ? (
+              <span className="msg-bubble__text">{message.content}</span>
+            ) : (
+              <>
+                {message.content && (
+                  <div className="msg-markdown">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
+                  </div>
+                )}
+                {message.error && (
+                  <div
+                    className={`msg-bubble__error${message.content ? ' msg-bubble__error--with-content' : ''}`}
+                    role="alert"
+                  >
+                    {message.error}
+                  </div>
+                )}
+                {isStreaming && <span className="msg-cursor" />}
+              </>
+            )}
+          </div>
+        )}
+
+        {imageItems && imageItems.length > 0 && (
+          <div className="msg-media">
+            {imageItems.map((item, idx) => (
+              <img
+                key={item.id}
+                className="msg-media__thumb"
+                src={item.src || `${TBOX_FILE_URL}${item.fileId}`}
+                alt=""
+                onClick={() => previewImages(imageUrls, idx)}
+              />
+            ))}
+          </div>
+        )}
+
+        {isUser && !!message.content && (
+          <div className="msg-toolbar msg-toolbar--user">
+            <div className="msg-toolbar__action" onClick={copy}>
+              <Copy size={12} color="#5f7ec6" />
+            </div>
+          </div>
+        )}
+
+        {!isUser && message.status === 'done' && !!message.content && (
+          <div className="msg-toolbar-row">
+            <ActionBar message={message} />
+          </div>
+        )}
+
+        {/* 出错消息不提供朗读/反馈，但支持复制错误详情和拉 trace 排查。 */}
+        {!isUser && message.status === 'error' && (
+          <div className="msg-toolbar-row">
+            <div className="tbox-action-bar">
+              <CopyButton text={getMessageCopyText(message)} />
+              {message.requestId && (
+                <DebugButton
+                  requestId={message.requestId}
+                  conversationId={conversationId ?? undefined}
+                  messageId={message.id}
+                  messageCreatedAt={new Date(message.createdAt).getTime()}
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/client/src/components/PullDownIndicator/index.less

@@ -0,0 +1,32 @@
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  gap: 12px;
+
+  &--animated {
+    transition: margin-top 0.3s ease-out;
+  }
+
+  &__spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid #d0d5dd;
+    border-top-color: #1677ff;
+    border-radius: 50%;
+    animation: pull-spin 0.6s linear infinite;
+  }
+
+  &__text {
+    font-size: 26px;
+    color: #8c8c8c;
+    line-height: 1;
+  }
+}
+
+@keyframes pull-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/apps/client/src/components/PullDownIndicator/index.tsx

@@ -0,0 +1,33 @@
+import type { PullStatus } from '@/hooks/usePullDownHistory';
+import './index.less';
+
+const INDICATOR_HEIGHT = 60;
+
+/** 下拉加载历史的顶部指示器。 */
+export default function PullDownIndicator({ status, distance }: { status: PullStatus; distance: number }) {
+  if (status === 'idle') return null;
+
+  const marginTop = status === 'loading' ? 0 : -INDICATOR_HEIGHT + Math.min(distance, INDICATOR_HEIGHT);
+  const showTransition = status === 'loading' || status === 'noMore';
+
+  const content =
+    status === 'pulling'
+      ? '↓ 下拉加载更多'
+      : status === 'ready'
+        ? '↑ 释放加载历史'
+        : status === 'loading'
+          ? '加载中...'
+          : status === 'noMore'
+            ? '没有更多历史记录'
+            : '';
+
+  return (
+    <div
+      className={`pull-indicator${showTransition ? ' pull-indicator--animated' : ''}`}
+      style={{ marginTop: `${marginTop}px` }}
+    >
+      {status === 'loading' && <div className="pull-indicator__spinner" />}
+      <span className="pull-indicator__text">{content}</span>
+    </div>
+  );
+}

package/apps/client/src/components/QuickCommands/index.less

@@ -0,0 +1,48 @@
+.quick-commands {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: var(--tbox-content-max-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  padding: 0 24px 12px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__item {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 61px;
+    padding: 0 24px 0 16px;
+    appearance: none;
+    border: none;
+    background: #fff;
+    border-radius: 31px;
+    box-shadow: 0 2px 12px rgba(110, 139, 180, 0.12);
+  }
+
+  &__icon {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+  }
+
+  &__icon-svg {
+    color: var(--tbox-primary);
+  }
+
+  &__label {
+    font-size: 26px;
+    color: rgba(31, 59, 99, 0.85);
+    white-space: nowrap;
+  }
+}

package/apps/client/src/components/QuickCommands/index.tsx

@@ -0,0 +1,22 @@
+// ⚠️ 平台标准组件：输入框上方的「快捷指令」。视觉还原时不改本组件、不另画。
+// 改内容只改 client/config/chat.json 的 quickCommands 数组（{ label, query, icon? }）。
+// label 只写纯文字；前面的星标由本组件渲染（icon 字段或默认 ✦），不要把 ✦/emoji 写进 label。
+import { useChatConfigStore } from '@/store/chat-config';
+import starIcon from '../../../assets/quick-command-star.svg';
+import './index.less';
+
+export function QuickCommands({ onCommand }: { onCommand: (query: string) => void }) {
+  const commands = useChatConfigStore((s) => s.quickCommands);
+  if (!commands.length) return null;
+
+  return (
+    <div className="quick-commands">
+      {commands.map((cmd) => (
+        <button key={cmd.label} className="quick-commands__item" onClick={() => onCommand(cmd.query)}>
+          <img className="quick-commands__icon" src={cmd.icon || starIcon} alt="" />
+          <span className="quick-commands__label">{cmd.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/apps/client/src/components/ReasoningBlock/index.less

@@ -0,0 +1,90 @@
+.reasoning {
+  margin: 0 0 16px;
+  border-radius: 14px;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+
+  &--active {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.06) 100%);
+  }
+  &--done {
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #b0bec5;
+    flex-shrink: 0;
+
+    &--pulse {
+      background: #667eea;
+      animation: reasoning-pulse 1.5s ease-in-out infinite;
+    }
+  }
+
+  &__title {
+    font-size: 22px;
+    font-weight: 600;
+    color: #6b7a99;
+  }
+  &--active &__title {
+    color: #667eea;
+  }
+
+  &__duration {
+    font-size: 20px;
+    color: #9ba7c3;
+  }
+
+  &__toggle {
+    font-size: 20px;
+    color: #8b95b0;
+  }
+
+  &__content {
+    margin: 0 18px 16px;
+    padding-left: 42px;
+    border-left: 3px solid #d6dce8;
+    font-size: 22px;
+    color: #8b95b0;
+    line-height: 1.7;
+    overflow-wrap: break-word;
+    overflow: hidden;
+
+    p {
+      margin: 6px 0;
+    }
+  }
+  &--active &__content {
+    border-left-color: #667eea;
+  }
+}
+
+@keyframes reasoning-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}