ttrpg-tools/src/components/md-yarn-spinner.tsx

import { customElement, noShadowDOM } from 'solid-element';
import { For, Show, createEffect } from 'solid-js';
import type {TextResult, RuntimeResult, OptionsResult} from '../yarn-spinner/runtime/results';
import { createYarnStore } from './stores/yarnStore';

export interface YarnSpinnerProps {
  start: string;
}

customElement<{start: string}>('md-yarn-spinner', {start: 'start'}, (props, { element }) => {
  noShadowDOM();
  
  let historyContainer: HTMLDivElement | undefined;

  const { store, advance, restart } = createYarnStore(element as any, props);

  // 滚动到底部
  const scrollToBottom = () => {
    if (historyContainer) {
      setTimeout(() => {
        historyContainer!.scrollTop = historyContainer!.scrollHeight;
      }, 0);
    }
  };

  // 监听对话历史变化，自动滚动到底部
  createEffect(() => {
    store.dialogueHistory;
    scrollToBottom();
  });

  // 渲染对话历史项
  const renderEntry = (result: RuntimeResult | OptionsResult['options'][0]) => {
    if(!('type' in result)){
      return <div class="dialogue-entry text-entry">
        <span class="text"> {"->"} {result.text}</span>
      </div>
    }
    if (result.type === 'text') {
      const textResult = result as TextResult;
      return (
        <div class="dialogue-entry text-entry">
          <Show when={textResult.speaker}>
            <span class="speaker font-bold text-blue-600">{textResult.speaker}: </span>
          </Show>
          <span class="text">{textResult.text}</span>
        </div>
      );
    }

    if (result.type === 'command') {
      return (
        <div class="dialogue-entry command-entry text-gray-500 italic">
          [{result.command}]
        </div>
      );
    }

    return null;
  };

  return (
    <div class="w-full max-w-2xl mx-auto shadow-sm relative">
      {/* 对话历史 */}
      <div
        ref={historyContainer}
        class="dialogue-history p-4 h-64 overflow-y-auto bg-gray-50"
      >
        <Show when={store.dialogueHistory.length === 0 && !store.runnerInstance}>
          <div class="text-gray-400 text-center py-8">点击重新开始开始对话</div>
        </Show>
        <For each={store.dialogueHistory}>
          {renderEntry}
        </For>
      </div>

      {/* 浮动工具栏 */}
      <div class="toolbar absolute right-0 rounded-bl-lg shadow-sm flex">
        <button
            onClick={restart}
            class="restart-button px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300
                 rounded-bl-md transition-colors cursor-pointer"
            title="重新开始"
        >
          🔄 
        </button>
        <button
            onClick={() => advance()}
            class="advance-button px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300
                 transition-colors cursor-pointer"
            title="继续"
        >
          ⏩ 
        </button>
      </div>

      {/* 当前选项 */}
        <div class="current-options p-4 border-t border-gray-300 bg-white min-h-34">
          <div class="options-list flex flex-col gap-2">
            <For each={store.currentOptions?.options || []}>
              {(option, index) => (
                <button
                  onClick={() => advance(index())}
                  class="option-button text-left px-4 py-2 bg-blue-50 hover:bg-blue-100
                         rounded border border-blue-200 transition-colors cursor-pointer"
                >
                  → {option.text}
                </button>
              )}
            </For>
          </div>
        </div>
    </div>
  );
});