#调整内置功能

import '@volcengine/chatkit/styles.css';

import {
  AttachmentButton,
  Chatkit,
  type ChatkitSpeechRecognizer,
  type ChatkitToolbarSlotName,
  type ChatkitUploader,
  useChatRuntime,
  VoiceInput,
} from '@volcengine/chatkit';
import { createMockAdapter } from '@volcengine/chatkit/adapters/mock';
import { useState } from 'react';

import { localUpload } from '../backends/local-upload';

const adapter = createMockAdapter({});

// 上传和语音识别由接入方实现，这里用本地地址和一段固定文字代替。
const upload: ChatkitUploader = localUpload;

const recognize: ChatkitSpeechRecognizer = ({ onText, onEnd }) => {
  const timer = setTimeout(() => {
    onText('帮我写一份本周周报', true);
    onEnd();
  }, 600);
  return () => clearTimeout(timer);
};

// 附件按钮和语音按钮的三种摆法：不写 slot 用默认位置；写位置名换到那里；写 false 表示自己摆。
const PLACEMENTS: {
  label: string;
  attachments?: ChatkitToolbarSlotName | false;
  voice?: ChatkitToolbarSlotName | false;
}[] = [
  { label: '默认（附件在左，语音在右）' },
  { label: '两个对调', attachments: 'composer.toolbarEnd', voice: 'composer.toolbarStart' },
  { label: 'slot: false，自己摆', attachments: false, voice: false },
];

export default function FeaturePlacement() {
  const runtime = useChatRuntime({ sessionId: 'feature-placement', adapter });
  const [index, setIndex] = useState(0);
  if (!runtime) return null;
  const { attachments, voice } = PLACEMENTS[index]!;
  const selfPlaced = attachments === false;
  return (
    <div className="demo-column">
      <div className="demo-bar">
        {PLACEMENTS.map((item, itemIndex) => (
          <label key={item.label}>
            <input type="radio" checked={index === itemIndex} onChange={() => setIndex(itemIndex)} /> {item.label}
          </label>
        ))}
      </div>
      <div className="demo-main">
        <Chatkit
          runtime={runtime}
          settings={{ welcome: '换一种摆法，看输入框里两个按钮的位置' }}
          features={{
            attachments: { upload, ...(attachments === undefined ? {} : { slot: attachments }) },
            voice: { recognize, ...(voice === undefined ? {} : { slot: voice }) },
          }}
          // 自己摆：把导出的组件放进任意插槽，这里是输入框上方
          slots={
            selfPlaced
              ? {
                  'composer.top': (
                    <div className="demo-line">
                      <AttachmentButton />
                      <VoiceInput />
                    </div>
                  ),
                }
              : {}
          }
        />
      </div>
    </div>
  );
}

import '@volcengine/chatkit/styles.css';

import {
  AttachmentButton,
  Chatkit,
  ChatkitProvider,
  type ChatkitUploader,
  useChatRuntime,
  useComposer,
} from '@volcengine/chatkit';
import { createMockAdapter } from '@volcengine/chatkit/adapters/mock';

import { localUpload } from '../backends/local-upload';

const adapter = createMockAdapter({});

const TEMPLATE = '请按「背景 / 目标 / 方案 / 风险」四段，帮我写一份方案：';

// 上传由接入方实现，这里用本地地址代替。
const upload: ChatkitUploader = localUpload;

// 聊天区之外的按钮：公开 hooks 在 ChatkitProvider 下面的任何组件里都能用
function InsertTemplate() {
  const composer = useComposer();
  return (
    <button
      type="button"
      className="demo-chip"
      onClick={() => {
        composer.setText(TEMPLATE);
        composer.focus();
      }}
    >
      插入模板
    </button>
  );
}

// ChatkitProvider 把页面包起来：附件按钮和「插入模板」都在页面自己的头部，不在聊天区里。
// props 写在 Provider 上，里面的 <Chatkit /> 从它取。
export default function Provider() {
  const runtime = useChatRuntime({ sessionId: 'provider', adapter });
  if (!runtime) return null;
  return (
    <ChatkitProvider
      runtime={runtime}
      features={{ attachments: { upload, slot: false } }}
      settings={{ welcome: '附件按钮在页面头部', recommendations: ['帮我写一份方案'] }}
    >
      <div className="demo-column">
        <header className="demo-bar">
          <strong>我的应用</strong>
          <InsertTemplate />
          <AttachmentButton />
        </header>
        <div className="demo-main">
          <Chatkit />
        </div>
      </div>
    </ChatkitProvider>
  );
}