@duskmoon-dev/el-chat (日语)

DuskMoon聊天自定义元素用于面向LLM的聊天界面.

要件

• el-dm-chat
• el-dm-chat-scroll
• el-dm-chat-bubble
• el-dm-chat-input
• el-dm-chat-work
• el-dm-chat-queue
• el-dm-chat-reasoning
• el-dm-chat-tool
• el-dm-chat-typing

使用量

import { register } from '@duskmoon-dev/el-chat';

register();

<el-dm-chat-scroll style="height: 22rem">
  <el-dm-chat agent timeline="1" author="Assistant" content="Hello from **DuskMoon**.">
    <el-dm-chat-reasoning slot="reasoning" summary="Thinking">
      Reviewing the request.
      <el-dm-chat-tool slot="tools" name="search" status="success"></el-dm-chat-tool>
    </el-dm-chat-reasoning>
  </el-dm-chat>

  <el-dm-chat align="end" color="primary" variant="filled"> Thanks! </el-dm-chat>
</el-dm-chat-scroll>

助理消息可能使用独有的 timeline 来自 1 结束 24滚动包 为每个映射的助手回复创建无障碍指标并保持指标导航 在记录板里 使用 reasoning 财务报告和审定财务报表 tools 放置折叠 LLM 细节的槽 在最后的减记内容之前.

目前 DuskMoonUI 设计

使用 agent 用于解答的助理消息。 指派 el-dm-chat-work 改为 slot="work" 将活动与最后答案分开。 用户 信件可以选择使用 collapsible; 显示更多/ 显示更少的按钮 当消息超过六行时.

<el-dm-chat agent content="The final answer stays visible.">
  <el-dm-chat-work slot="work" summary="Worked · 2 checks">
    <el-dm-chat-tool name="search" status="success"></el-dm-chat-tool>
  </el-dm-chat-work>
</el-dm-chat>
<el-dm-chat-input busy color="ghost" auto-grow clear-on-send>
  <el-dm-chat-queue slot="queue" label="Waiting messages"></el-dm-chat-queue>
</el-dm-chat-input>

设置队列 items 改为 { id, content, active?, attachment?, attachmentAlt? }[]。 。 。 . 队列 steer 财务报告和审定财务报表 remove 事件包含 { item, index }; 应用程序更新 它的队列和发送。 作曲家 send 财务报告和审定财务报表 steer 事件包含 { value, files }。输入发送/排队, Shift+ 输入新行并插入 Ctrl/Cmd+ 输入 旋转时 busy 或空闲时发送。 IME 组成从未提交。 取消 a 与 preventDefault() 保留其文本和文件; clear-on-send 只清除接受的草稿. focus() 聚焦本地编辑器 .

所有演示都采用Core Chat,按钮,和有Shadow DOM桥的Avatar风格.