#OpenCode

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

import { Chatkit, SessionList, type SessionListProps, useChatSessions } from '@volcengine/chatkit';

import { adapter, connection } from './opencode-connection';
import { interactionRenderers } from './opencode-interaction';

// 会话由应用创建，id 存进自己的会话目录；这里让 bash 每次都先审批
export async function createSession(title: string): Promise<string> {
  const { sessionId } = await connection.createSession({
    title,
    permission: [{ permission: 'bash', pattern: '*', action: 'ask' }],
  });
  return sessionId;
}

export function App({
  sessions: items,
  activeSessionId,
  onSelect,
}: Pick<SessionListProps, 'sessions' | 'activeSessionId' | 'onSelect'>) {
  const sessions = useChatSessions({ activeSessionId, adapter });
  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <SessionList sessions={items} activeSessionId={activeSessionId} onSelect={onSelect} style={{ width: 260 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <Chatkit sessions={sessions} renderers={interactionRenderers} />
      </div>
    </div>
  );
}

import { type ChatkitProps, type ChatkitToolViewProps, useCurrentSession } from '@volcengine/chatkit';
import {
  getOpenCodeInteraction,
  type OpenCodeInteraction,
  type OpenCodeRespondRequest,
} from '@volcengine/chatkit/adapters/opencode';
import { useState } from 'react';

import { connection } from './opencode-connection';

/** 默认的工具行照常显示；工具上挂着审批或追问时，在下面加一张卡片。 */
function ToolWithInteraction({ metadata, defaultNode }: ChatkitToolViewProps) {
  const interaction = getOpenCodeInteraction({ metadata });
  return (
    <>
      {defaultNode}
      {interaction && <InteractionCard interaction={interaction} />}
    </>
  );
}

const DECISION_LABELS = { once: '允许一次', always: '总是允许', reject: '拒绝' } as const;

function InteractionCard({ interaction }: { interaction: OpenCodeInteraction }) {
  const sessionId = useCurrentSession().session?.id;
  // 每个问题选中的标签，按问题顺序
  const [selected, setSelected] = useState<string[][]>([]);
  // 只有 pending 时能回答；answering 是已经点了、等后端确认
  const disabled = interaction.status !== 'pending' || !interaction.requestId || !sessionId;
  const answer = (response: OpenCodeRespondRequest['response']) => {
    if (!sessionId || !interaction.requestId) return;
    void connection
      .respond({ sessionId, requestId: interaction.requestId, response })
      // 没送达时状态会退回 pending，可以再点一次
      .catch(error => console.error(error));
  };

  if (interaction.kind === 'approval')
    return (
      <div className="approval-card">
        <p>
          允许 {interaction.permission}：{interaction.patterns.join('、')}？
        </p>
        {interaction.status === 'answered' ? (
          <p>已回答：{interaction.decision ? DECISION_LABELS[interaction.decision] : '已处理'}</p>
        ) : (
          interaction.decisions.map(decision => (
            <button key={decision} disabled={disabled} onClick={() => answer(decision)}>
              {DECISION_LABELS[decision]}
            </button>
          ))
        )}
      </div>
    );

  // 已回答的追问（含刷新后从 question 工具还原的）直接显示答案
  if (interaction.status === 'answered')
    return (
      <div className="question-card">
        {interaction.questions.map((question, index) => (
          <p key={index}>
            {question.question}：{interaction.answers?.[index]?.join('、')}
          </p>
        ))}
      </div>
    );

  const toggle = (index: number, label: string, multiple?: boolean) =>
    setSelected(current => {
      const next = [...current];
      const labels = next[index] ?? [];
      next[index] = multiple
        ? labels.includes(label)
          ? labels.filter(item => item !== label)
          : [...labels, label]
        : [label];
      return next;
    });
  const complete = interaction.questions.every((_, index) => selected[index]?.length);

  return (
    <div className="question-card">
      {interaction.questions.map((question, index) => (
        <div key={index}>
          <p>{question.question}</p>
          {question.options.map(option => (
            <button
              key={option.label}
              disabled={disabled}
              aria-pressed={selected[index]?.includes(option.label) ?? false}
              onClick={() => toggle(index, option.label, question.multiple)}
            >
              {option.label}
            </button>
          ))}
        </div>
      ))}
      {/* 一次回答全部问题：每个问题一组标签 */}
      <button
        disabled={disabled || !complete}
        onClick={() => answer(interaction.questions.map((_, index) => selected[index] ?? []))}
      >
        提交
      </button>
    </div>
  );
}

// 审批挂在被审批的那个工具上（bash、edit…），追问挂在 question 工具上：用 match 接住全部工具
export const interactionRenderers: ChatkitProps['renderers'] = {
  tools: { interactions: { match: () => true, render: ToolWithInteraction } },
};

import { useEffect, useState } from 'react';

import { connection } from './opencode-connection';

interface Todo {
  content: string;
  status: string;
  priority: string;
}

/** 会话的待办：先取一次，之后跟着 todo.updated 事件更新；断线重连后再取一次，补上断线期间的变化。 */
export function useOpenCodeTodos(sessionId: string | undefined) {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [online, setOnline] = useState(true);
  useEffect(() => {
    if (!sessionId) return;
    let active = true;
    const refetch = () =>
      connection
        .request<Todo[]>('GET', `session/${encodeURIComponent(sessionId)}/todo`)
        .then(result => active && setTodos(result ?? []))
        .catch(() => undefined);
    void refetch();
    const off = connection.listen(sessionId, item => {
      if (item.kind === 'connection') {
        setOnline(item.status === 'reconnected');
        if (item.status === 'reconnected') void refetch();
        return;
      }
      if (item.kind === 'event' && item.event.type === 'todo.updated')
        setTodos((item.event.properties as { todos: Todo[] }).todos);
    });
    return () => {
      active = false;
      off();
    };
  }, [sessionId]);
  return { todos, online };
}