Agent 对话输入框
直接迁入 Deep Agent 原版对话输入框，包含权限菜单、上下文容量、附件、模型选择和思考强度滑块。
面板形变六框架TypeScript
演示
点击原版模型胶囊调整思考强度，也可体验权限菜单、上下文容量、附件和发送。原版 React 界面独立运行，不连接模型。
安装
npm install react react-dom gsap@3.12.7 deep-agent-base-ui@npm:@base-ui/react@1.8.0 deep-agent-lucide@npm:lucide-react@1.43.0 @fortawesome/fontawesome-svg-core@6.7.2 @fortawesome/free-solid-svg-icons@6.7.2 @fortawesome/react-fontawesome@0.2.6 @radix-ui/react-slider@1.4.7 react-circular-progressbar@2.2.0 clsx tailwind-merge将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。
依赖
上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。
npm install react react-dom gsap@3.12.7 deep-agent-base-ui@npm:@base-ui/react@1.8.0 deep-agent-lucide@npm:lucide-react@1.43.0 @fortawesome/fontawesome-svg-core@6.7.2 @fortawesome/free-solid-svg-icons@6.7.2 @fortawesome/react-fontawesome@0.2.6 @radix-ui/react-slider@1.4.7 react-circular-progressbar@2.2.0 clsx tailwind-merge代码
DeepAgentComposer.tsx
正在加载代码…
使用示例
App.tsx
import { DeepAgentComposer } from "./DeepAgentComposer";
export default function App() {
return <DeepAgentComposer />;
}各框架入口挂载同一套 Deep Agent 原版 React 组件，均需要 React 与 React DOM。
复刻提示词
正在加载提示词…
API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
options.value当前思考档位，支持在同一实例中更新与回滚。 | "simple" | "medium" | "deep" | "medium" |
options.onValueChange拖动松手、点击或键盘切换到新档位时调用一次。 | (value: ThinkingDepth) => void | |
options.disabled禁用交互，同时保留当前档位展示。 | boolean | false |
options.models由接入应用提供的模型列表，默认模型名仅用于演示。 | string[] | |
options.selectedModel当前模型，可直接更新而无需重新挂载。 | string | |
options.onModelChange选中另一个模型时调用。 | (model: string) => void | |
options.onSubmit接收消息及界面设置，在此接入自己的 Agent API；演示不会发起网络请求。 | (message: { text: string; model: string; thinking: ThinkingDepth; attachments: ComposerAttachment[]; skills: ComposerSkillSelection[]; mentions: ComposerMention[]; permission: string }) => void | |
options.busy / options.stopping / options.onStop控制原版输入框的发送、停止与取消中状态。 | boolean / boolean / (() => void) | |
options.height场景的建议高度，内容较多时布局会相应延展。 | number | 600 |
options.reducedMotion覆盖系统的减少动态效果偏好，同时保留完整交互状态。 | boolean |