@aphrody/m3-ai (英语)

材质设计 3 代理界面的回放组件(工具调用卡,打出标记,聊天泡和作曲,模型选择器,任务板)和OpenAI兼容聊天服务器的流媒体客户端,由SpaceUI重建 @spacedrive/ai。 。 。 .

bun add @aphrody/m3-ai @aphrody/m3-primitives @aphrody/m3-motion react react-dom tailwindcss

import { useState } from "react";
import { ChatComposer, MessageBubble } from "@aphrody/m3-ai";

export function Chat() {
  const [draft, setDraft] = useState("");
  return (
    <>
      <MessageBubble content="Hello" isUser />
      <ChatComposer
        draft={draft}
        onDraftChange={setDraft}
        onSend={() => setDraft("")}
      />
    </>
  );
}

许可证:Apache-2.0和麻省理工学院LICENSE, (中文(简体) ), LICENSE.spaceui) (中文(简体) ). 安装指南 : 文件/材料/立方米/INSTALL.md。 。 。 .

建造在 @aphrody/m3-primitives,M3颜色角色,打字尺,形状和运动,以及材料符号图标。 端点 : react 财务报告和审定财务报表 react-dom 18或19岁, tailwindcss 4.1+ (英语). @aphrody/m3-ai/ag-ui 持有AG-UI协议约束.

CSS 设置

使用 M3 公用事业的 Tailwind 级名称 @aphrody/m3-theme导入 然后让Tailwind扫描软件包的输出。 这个 全食谱在 空间-M3-未来.md, (中文(简体) ), 节"集成":

@import "tailwindcss";
@import "@aphrody/m3-tokens/m3-tokens.css";
@import "@aphrody/m3-theme/spaceui.css";
@import "@aphrody/m3-theme/tailwind.css";

@source "../node_modules/@aphrody/m3-primitives/dist";
@source "../node_modules/@aphrody/m3-ai/dist";

装入 材料符号字体一次: 导入 @aphrody/m3-fonts/fonts-symbols.css,或打电话 ensureMaterialSymbols() 从 @aphrody/material-web/icon/material-symbols.js。 。 。 .

使用量

import { ChatComposer, MessageBubble, ToolCall } from "@aphrody/m3-ai";
import type { ToolCallPair } from "@aphrody/m3-ai";

const pair: ToolCallPair = {
  id: "1",
  name: "file_read",
  argsRaw: '{"path":"README.md"}',
  args: { path: "README.md" },
  resultRaw: '{"text":"# Aphrody"}',
  result: { text: "# Aphrody" },
  status: "completed",
};

export function Conversation({ draft, setDraft, send }: Props) {
  return (
    <>
      <MessageBubble content="List the files" isUser />
      <ToolCall pair={pair} />
      <MessageBubble content="There is one file: `README.md`." isUser={false} />
      <ChatComposer draft={draft} onDraftChange={setDraft} onSend={send} />
    </>
  );
}

构成部分

来自 types.ts数字 : pairTranscriptSteps, (中文(简体) ), tryParseJson, (中文(简体) ), isErrorResult, (中文(简体) ), TASK_STATUS_ORDER, (中文(简体) ), TASK_STATUS_LABEL, (中文(简体) ), TASK_PRIORITY_LABEL,以及记录、任务和 模型类型.

本地聊天

在 OpenAI 兼容服务器( lama- server, vLLM, Apprody 网关) 上聊天 ,没有可见的字符串硬码:

Markdown (和 MessageBubble, (中文(简体) ), CitedMarkdown开放外部链接 target="_blank" rel="noopener noreferrer" 并带 onLinkClick(href, event) (电话) event.preventDefault() 从 Tauri 网页视图打开系统浏览器) 或 renderLink。 。 。 . ChatComposer 带 disabled (该模型没有可用性:输入、发送、语音和选择器为 相对于 isSending。 。 。 .

测试

bun test

test/preload.ts 决定 @aphrody/m3-primitives 因此,测试不需要一个 已建成 dist。 。 。 .

贷项

衍生自 SpaceUI @spacedrive/ai (麻省理工学院,见 LICENSE.spaceui),在材料设计3上重建. 新代码为Apache-2.0.