chatkit

赞踩

回答下方的点赞与点踩。在 features.feedback 里给了 onRate 才显示。

feedback.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();

type Rating = 'like' | 'dislike' | undefined;

// 赞踩：给了 onRate 才显示。选中态由接入方保存（通常还要提交到自己的反馈接口），按消息 id 索引。
// 这里打开 Mock 预置的一个会话，回答下方已经有赞踩按钮。
export default function Feedback() {
  const runtime = useChatRuntime({ sessionId: 'mock-session-css', adapter });
  const [ratings, setRatings] = useState<Record<string, Rating>>({});
  if (!runtime) return null;
  return (
    <div className="demo-row">
      <div className="demo-main">
        <Chatkit
          runtime={runtime}
          features={{
            feedback: {
              ratings,
              // 保存选中态；已评价的消息不会再次触发内置赞踩按钮。
              onRate: (rating, message) =>
                setRatings(current => ({
                  ...current,
                  [message.id]: rating,
                })),
            },
          }}
        />
      </div>
      <aside className="demo-side">
        <h4>接入方保存的评价</h4>
        <pre>{JSON.stringify(ratings, null, 2)}</pre>
      </aside>
    </div>
  );
}
点回答下方的赞或踩；右侧是业务方保存的选中态新窗口打开

用法

const [ratings, setRatings] = useState<Record<string, 'like' | 'dislike' | undefined>>({});

<Chatkit
  sessions={sessions}
  features={{
    feedback: {
      ratings,
      onRate: (rating, message) => {
        setRatings(current => ({ ...current, [message.id]: rating }));
        void saveRating(message.id, rating);
      },
    },
  }}
/>;

配置项

配置项类型默认说明
features.feedback.onRate(rating: "like" | "dislike", message: ChatkitRenderMessage) => void—点了赞或踩时调用。
features.feedback.ratingsRecord<string, "like" | "dislike">—每条回答的选中态，按 getKey 的结果索引；未提供 getKey 时用消息 id。
features.copybooleantrue复制回答。

说明

  • 选中态由业务方保存：ratings 按消息 id 索引，chatkit 只负责显示。不给 ratings 时按钮没有选中态。
  • 一旦该消息的 ratings 有值，赞和踩都会设置原生 disabled，不能再次点击取消或改成另一种评价。选中的图标使用实心样式并保持完整不透明度，另一个按钮显示为普通禁用态；需要更改时由业务界面清除或更新该值。
  • 上例先更新本地状态，再保存到后端；实际接入需要处理保存失败并决定是否回滚选中态。onRate 不是等待服务端确认的提交接口。
  • 被停止或失败的回答不能赞踩。
  • 最后一条回答的操作栏一直显示，其余的鼠标移上去时出现。
  • 点踩后收集原因的弹窗由业务方在 onRate 里自己打开。