chatkit

划词追问

选中回答里的一段文字，点「追问」把它作为引用放进输入框。默认启用，浮条在有有效选区时出现。

selection-ask.tsx
import { Chatkit, useChatRuntime } from '@volcengine/chatkit';
import { createMockAdapter } from '@volcengine/chatkit/adapters/mock';
import '@volcengine/chatkit/styles.css';
import { useState } from 'react';

const adapter = createMockAdapter();

// 划词追问一直有，不需要配置：在回答里选中一段文字，点浮条上的「追问」，文字作为引用进输入框。
// message.selection 里的内容显示在同一个浮条上，函数写法拿到选中的文字。
export default function SelectionAsk() {
  // 打开 Mock 预置的一个会话，里面已经有回答可以选
  const runtime = useChatRuntime({ sessionId: 'mock-session-debug', adapter });
  const [notes, setNotes] = useState<string[]>([]);
  if (!runtime) return null;
  return (
    <div className="demo-row">
      <div className="demo-main">
        <Chatkit
          runtime={runtime}
          settings={{ placeholder: '在回答里选中一段文字试试' }}
          slots={{
            'message.selection': ({ text, clear }) => (
              <button
                type="button"
                className="demo-chip"
                onClick={() => {
                  setNotes(current => [...current, text]);
                  clear();
                }}
              >
                记到笔记
              </button>
            ),
          }}
        />
      </div>
      <aside className="demo-side">
        <h4>笔记</h4>
        {notes.length === 0 ? <p className="demo-muted">选中文字后点「记到笔记」</p> : null}
        {notes.map((note, index) => (
          <pre key={index}>{note}</pre>
        ))}
      </aside>
    </div>
  );
}
选中回答里的一段文字：浮条上有内置的「追问」和业务方加的「记到笔记」新窗口打开

界面上是什么样

在回答里选中文字，选区旁边出现一个浮条，上面有「追问」。点击后：

  1. 选中的文字作为引用标签插进输入框。发送时它在正文里写成 Markdown 引用（> 选中的文字），同时作为一条 kind: 'quote' 的引用带给后端。
  2. 输入框获得焦点，可以接着输入问题。

用法

关掉：

<Chatkit sessions={sessions} features={{ selectionAsk: false }} />

在浮条里加自己的按钮

message.selection 里的内容显示在同一个浮条上，函数写法能拿到选中的文字：

<Chatkit
  sessions={sessions}
  slots={{
    'message.selection': ({ text, clear }) => (
      <button
        onClick={() => {
          saveToNotes(text);
          clear();
        }}
      >
        记到笔记
      </button>
    ),
  }}
/>

配置项

配置项类型默认说明
features.selectionAskbooleantrue划词追问。
slots.message.selectionChatkitStackSlot<ChatkitMessageSelectionSlotContext>—选中回答里的文字时出现的浮条。

说明

  • 只对回答生效，用户消息上不出现浮条。
  • 关掉划词追问后，如果 message.selection 里放了内容，浮条仍然出现，上面只有业务方的按钮。
  • 追问只准备草稿，不自动发送；引用的 id 是来源消息 id，文字是选中的内容。输入框隐藏或尚未挂载时无法插入，配置只读页面时应同时关闭 selectionAsk。