@tbox.cn/app-template-agent 0.1.0

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

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import './index.less';
+
+interface Props {
+  reasoning: string;
+  /** 是否正在思考中（自动展开 + 计时） */
+  isActive?: boolean;
+}
+
+/** 思考过程折叠块（思考中自动展开并计时，结束后自动收起）。 */
+export default function ReasoningBlock({ reasoning, isActive }: Props) {
+  const [expanded, setExpanded] = useState(!!isActive);
+  const startTime = useRef(Date.now());
+  const [elapsed, setElapsed] = useState(0);
+  const wasActive = useRef(isActive);
+
+  useEffect(() => {
+    if (isActive) {
+      wasActive.current = true;
+      setExpanded(true);
+      startTime.current = Date.now();
+      const timer = setInterval(() => {
+        setElapsed(Math.floor((Date.now() - startTime.current) / 1000));
+      }, 1000);
+      return () => clearInterval(timer);
+    }
+    if (wasActive.current) {
+      setExpanded(false);
+      wasActive.current = false;
+    }
+  }, [isActive]);
+
+  const durationLabel = elapsed > 0 ? `${elapsed}s` : '';
+
+  return (
+    <div className={`reasoning ${isActive ? 'reasoning--active' : 'reasoning--done'}`}>
+      <div className="reasoning__header" onClick={() => setExpanded(!expanded)}>
+        <div className="reasoning__left">
+          <div className={`reasoning__indicator${isActive ? ' reasoning__indicator--pulse' : ''}`} />
+          <span className="reasoning__title">{isActive ? '思考中...' : '思考过程'}</span>
+          {durationLabel && <span className="reasoning__duration">({durationLabel})</span>}
+        </div>
+        <span className={`reasoning__toggle${expanded ? ' reasoning__toggle--up' : ''}`}>
+          {expanded ? '收起' : '展开'}
+        </span>
+      </div>
+      {expanded && (
+        <div className="reasoning__content">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{reasoning}</ReactMarkdown>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+.scroll-to-bottom-btn {
+  position: absolute;
+  right: 32px;
+  bottom: 32px;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+
+  &--visible {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+
+  &__arrow {
+    width: 0;
+    height: 0;
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
+    border-top: 14px solid #666;
+  }
+}

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

@@ -0,0 +1,10 @@
+import './index.less';
+
+/** 生成时出现的“回到底部”悬浮按钮。 */
+export default function ScrollToBottomButton({ visible, onClick }: { visible: boolean; onClick: () => void }) {
+  return (
+    <div className={`scroll-to-bottom-btn${visible ? ' scroll-to-bottom-btn--visible' : ''}`} onClick={onClick}>
+      <div className="scroll-to-bottom-btn__arrow" />
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+.tool-calls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0 0 12px;
+}
+
+.tool-call {
+  border-radius: 12px;
+  overflow: hidden;
+
+  &--calling {
+    background: rgba(16, 163, 127, 0.08);
+  }
+  &--done {
+    background: rgba(0, 0, 0, 0.03);
+  }
+  &--error {
+    background: rgba(239, 68, 68, 0.08);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  &__spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(16, 163, 127, 0.3);
+    border-top-color: #10a37f;
+    border-radius: 50%;
+    flex-shrink: 0;
+    animation: tool-spin 0.8s linear infinite;
+  }
+
+  &__name {
+    font-size: 22px;
+    line-height: 1.4;
+    color: #4a5568;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &--calling &__name {
+    color: #10a37f;
+  }
+  &--error &__name {
+    color: #ef4444;
+  }
+
+  &__toggle {
+    font-size: 20px;
+    color: #8b95b0;
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+
+  &__result {
+    padding: 0 16px 12px;
+  }
+
+  &__result-text {
+    font-size: 20px;
+    color: #6b7a99;
+    line-height: 1.6;
+    font-family: Menlo, Monaco, Consolas, monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+
+    &--error {
+      color: #dc2626;
+    }
+  }
+}
+
+@keyframes tool-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { Check, X } from '@phosphor-icons/react';
+import type { ToolCallInfo } from '@/types/chat';
+import './index.less';
+
+/** 工具调用状态卡片（调用中 spinner / 完成 / 失败，可展开详情）。 */
+export default function ToolCallBlock({ toolCalls }: { toolCalls: ToolCallInfo[] }) {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  return (
+    <div className="tool-calls">
+      {toolCalls.map((tc) => {
+        const isCalling = tc.status === 'calling';
+        const isError = tc.status === 'error';
+        const isDone = tc.status === 'done';
+        const isExpanded = expandedId === tc.id;
+        const hasDetail = !!(tc.result || tc.error);
+        const stateClass = isError ? 'tool-call--error' : isCalling ? 'tool-call--calling' : 'tool-call--done';
+
+        return (
+          <div key={tc.id} className={`tool-call ${stateClass}`}>
+            <div
+              className="tool-call__header"
+              onClick={() => hasDetail && setExpandedId(isExpanded ? null : tc.id)}
+            >
+              <div className="tool-call__left">
+                {isCalling && <div className="tool-call__spinner" />}
+                {isDone && <Check size={16} color="#10a37f" strokeWidth={2.5} />}
+                {isError && <X size={16} color="#ef4444" strokeWidth={2.5} />}
+                <span className="tool-call__name">
+                  {isCalling && `调用 ${tc.name}`}
+                  {isDone && `${tc.name} 已完成`}
+                  {isError && `${tc.name} 调用失败`}
+                </span>
+              </div>
+              {hasDetail && (
+                <span className={`tool-call__toggle${isExpanded ? ' tool-call__toggle--up' : ''}`}>
+                  {isExpanded ? '收起' : '详情'}
+                </span>
+              )}
+            </div>
+            {isExpanded && hasDetail && (
+              <div className="tool-call__result">
+                <span className={`tool-call__result-text${isError ? ' tool-call__result-text--error' : ''}`}>
+                  {formatResult(isError ? tc.error! : tc.result!)}
+                </span>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function formatResult(raw: string): string {
+  try {
+    const pretty = JSON.stringify(JSON.parse(raw), null, 2);
+    return pretty.length > 500 ? pretty.slice(0, 500) + '...' : pretty;
+  } catch {
+    return raw.length > 500 ? raw.slice(0, 500) + '...' : raw;
+  }
+}

package/apps/client/src/examples/tourism/TourismLanding.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { ArrowsClockwise, CaretRight } from '@phosphor-icons/react';
+import type { ChatLandingProps } from '@/pages/index/index';
+import './index.less';
+
+const CAROUSEL_ITEMS = [
+  { title: '预约购票', desc: '景区门票多种选择', img: 'https://mdn.alipayobjects.com/tcmarket/afts/img/HmxURLvK52sAAAAARYAAAAgAwxLNAQBr/original', prompt: '我想预约购票' },
+  { title: '智能导游', desc: '随心游无目的漫游', img: 'https://mdn.alipayobjects.com/tcmarket/afts/img/DbHcTK8C-JIAAAAARMAAAAgAwxLNAQBr/original', prompt: '请为我智能导游' },
+  { title: '景点介绍', desc: '智能推荐景点讲解', img: 'https://mdn.alipayobjects.com/tcmarket/afts/img/CKZLRLnGC9sAAAAARVAAAAgAwxLNAQBr/original', prompt: '介绍一下景区的景点' },
+];
+
+const SERVICE_ITEMS = [
+  { img: 'https://mdn.alipayobjects.com/tcmarket/afts/img/pBvTRZ2lWokAAAAAQHAAAAgAwxLNAQBr/original', title: '杭城美食', desc: '千家商户 7 折起', prompt: '推荐一些杭州特色美食' },
+  { img: 'https://mdn.alipayobjects.com/tcmarket/afts/img/OqxGT6_0RCYAAAAAQGAAAAgAwxLNAQBr/original', title: '酒店预定', desc: '万家酒店 5 折起', prompt: '帮我查找附近的酒店' },
+  { img: 'https://mdn.alipayobjects.com/tcmarket/afts/img/HYeNTLrh83AAAAAAQFAAAAgAwxLNAQBr/original', title: '天气查询', desc: '实时天气速览', prompt: '今天天气怎么样？' },
+  { img: 'https://mdn.alipayobjects.com/tcmarket/afts/img/atCHR6ykFnEAAAAAQHAAAAgAwxLNAQBr/original', title: '路线推荐', desc: '智能规划行程', prompt: '推荐一条游览路线' },
+];
+
+const ALL_SUGGESTIONS = [
+  { title: '热门景区推荐', prompt: '有哪些热门景区推荐？' },
+  { title: '门票优惠政策', prompt: '有哪些门票优惠政策？' },
+  { title: '景区开放时间', prompt: '景区的开放时间是什么时候？' },
+  { title: '项目推荐', prompt: '有什么推荐的游玩项目？' },
+  { title: '交通指南', prompt: '怎么到达景区？' },
+  { title: '住宿推荐', prompt: '附近有哪些住宿推荐？' },
+];
+
+const pickRandom = <T,>(items: T[], count: number): T[] =>
+  [...items].sort(() => Math.random() - 0.5).slice(0, count);
+
+/** @tbox-template-example tourism */
+export default function TourismLanding({ onSend }: ChatLandingProps) {
+  const [suggestions, setSuggestions] = useState(() => pickRandom(ALL_SUGGESTIONS, 4));
+
+  return (
+    <div className="tourism-example">
+      <div className="tourism-example__welcome">
+        <div className="tourism-example__welcome-title">欢迎来到文旅景区</div>
+        <div className="tourism-example__welcome-desc">
+          我是您的通用文旅景区 AI 智能体，适用于山水类单景区、城市类多景区的业务场景。
+        </div>
+      </div>
+
+      <section className="tourism-example__section tourism-example__carousel-section">
+        <h2 className="tourism-example__section-title">游玩服务</h2>
+        <div className="tourism-example__carousel">
+          {CAROUSEL_ITEMS.map((item) => (
+            <button key={item.title} className="tourism-example__carousel-item" onClick={() => onSend(item.prompt)}>
+              <img className="tourism-example__carousel-image" src={item.img} alt={item.title} />
+              <span className="tourism-example__carousel-overlay">
+                <span className="tourism-example__carousel-title">{item.title}</span>
+                <span className="tourism-example__carousel-desc">{item.desc}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className="tourism-example__section">
+        <h2 className="tourism-example__section-title">配套服务</h2>
+        <div className="tourism-example__service-grid">
+          {SERVICE_ITEMS.map((item) => (
+            <button key={item.title} className="tourism-example__service-item" onClick={() => onSend(item.prompt)}>
+              <img className="tourism-example__service-icon" src={item.img} alt={item.title} />
+              <span className="tourism-example__service-content">
+                <span className="tourism-example__service-title-row">
+                  <span className="tourism-example__service-title">{item.title}</span>
+                  <CaretRight size={20} color="#c0c4cc" />
+                </span>
+                <span className="tourism-example__service-desc">{item.desc}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className="tourism-example__section">
+        <div className="tourism-example__suggestion-header">
+          <h2 className="tourism-example__section-title">猜你想问</h2>
+          <button className="tourism-example__refresh" onClick={() => setSuggestions(pickRandom(ALL_SUGGESTIONS, 4))}>
+            <ArrowsClockwise size={12} />
+            <span>换一换</span>
+          </button>
+        </div>
+        <div className="tourism-example__suggestion-grid">
+          {suggestions.map((item) => (
+            <button key={item.prompt} className="tourism-example__suggestion" onClick={() => onSend(item.prompt)}>
+              <span>{item.title}</span>
+              <CaretRight size={20} color="#c0c4cc" />
+            </button>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

package/apps/client/src/examples/tourism/index.less

@@ -0,0 +1,192 @@
+.tourism-example {
+  &__welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 44px 48px 32px;
+  }
+
+  &__welcome-title {
+    margin-bottom: 24px;
+    color: #1f3b63;
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 48px;
+    text-align: center;
+  }
+
+  &__welcome-desc {
+    color: #1f3b63;
+    font-size: 30px;
+    line-height: 48px;
+    text-align: justify;
+  }
+
+  &__section {
+    margin: 24px;
+    padding: 24px;
+    background: #fff9;
+    border: 1px solid #fff3;
+    border-radius: 24px;
+    box-shadow: 0 2px 18px 0 #2a31380a;
+  }
+
+  &__carousel-section {
+    padding-right: 0;
+  }
+
+  &__section-title {
+    display: block;
+    margin: 0 0 24px;
+    color: #1f3b63;
+    font-size: 30px;
+    font-weight: 500;
+  }
+
+  &__carousel {
+    display: flex;
+    gap: 16px;
+    overflow-x: auto;
+    padding-right: 24px;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__carousel-item {
+    position: relative;
+    width: 280px;
+    height: 168px;
+    flex-shrink: 0;
+    overflow: hidden;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 32px;
+  }
+
+  &__carousel-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__carousel-overlay {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 16px 20px 14px;
+    background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 50%) 100%);
+    text-align: left;
+  }
+
+  &__carousel-title {
+    margin-bottom: 4px;
+    color: #fff;
+    font-size: 30px;
+  }
+
+  &__carousel-desc {
+    color: rgb(255 255 255 / 80%);
+    font-size: 22px;
+  }
+
+  &__service-grid,
+  &__suggestion-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+
+  &__service-item,
+  &__suggestion {
+    display: flex;
+    align-items: center;
+    width: calc(50% - 8px);
+    box-sizing: border-box;
+    background: #fff;
+    border: 1px solid #8d9fb866;
+    border-radius: 24px;
+    box-shadow: 0 0 24px 0 #8d9fb80d;
+    color: #1f3b63;
+    text-align: left;
+  }
+
+  &__service-item {
+    height: 112px;
+    padding: 0 8px 0 20px;
+  }
+
+  &__service-icon {
+    display: block;
+    width: 72px;
+    height: 72px;
+    margin-right: 16px;
+    flex-shrink: 0;
+    object-fit: contain;
+  }
+
+  &__service-content {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  &__service-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 4px;
+  }
+
+  &__service-title,
+  &__service-desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__service-title {
+    font-size: 28px;
+    font-weight: 500;
+  }
+
+  &__service-desc {
+    color: #1f3b6373;
+    font-size: 22px;
+  }
+
+  &__suggestion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__refresh {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    margin-bottom: 24px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: #10295399;
+    font-size: 26px;
+  }
+
+  &__suggestion {
+    justify-content: space-between;
+    height: 78px;
+    padding: 0 20px;
+    overflow: hidden;
+    font-size: 26px;
+    font-weight: 500;
+  }
+}