Svelte 5で「2フェーズUX」を実装する — パラメータ入力と生成結果のプログレッシブ・ディスクロージャー

// パラメータ入力の折りたたみ状態
let isParameterInputCollapsed = $state(false);

// 出力エリアの表示状態
let showOutput = $state(false);

// ストリーミング状態
let isLoading = $state(false);
let isStreaming = $state(false);

async function generateOutput() {
  if (!selectedTemplate) return;

  // バリデーション
  const missingRequired = Object.entries(selectedTemplate.parameters)
    .filter(([key, param]) => param.required && !parameterValues[key])
    .map(([key]) => key);

  if (missingRequired.length > 0) {
    // m はi18n（国際化）のメッセージ関数。SvelteKitのi18nライブラリ（Paraglideなど）が提供する。
    // m.key_name() で現在のロケールに応じた翻訳文字列を返す。
    // 例: m.please_fill_required() → "必須項目を入力してください" (ja) / "Please fill required fields" (en)
    error = m.please_fill_required({ fields: missingRequired.join(', ') });
    return;
  }

  // 出力をクリア
  output = '';
  error = null;
  isLoading = true;
  isStreaming = true;

  // ここがフェーズ切り替え
  isParameterInputCollapsed = true;  // 入力を折りたたむ
  showOutput = true;                  // 出力エリアを表示

  // ページトップにスクロール
  window.scrollTo({ top: 0, behavior: 'smooth' });

  // ストリーミング開始...
}

window.scrollTo({ top: 0, behavior: 'smooth' });

// Svelte 5 — 依存関係は自動追跡
let summary = $derived(() => parameterValues.name + selectedTemplate.title);

// React — 依存配列を手動で指定（漏れるとstale valueバグになる）
const summary = useMemo(() => parameterValues.name + selectedTemplate.title,
  [parameterValues.name, selectedTemplate.title]);

let parameterSummary = $derived(() => {
  if (!selectedTemplate || !isParameterInputCollapsed) return '';

  const filledParams = Object.entries(parameterValues)
    // 入力済みのパラメータのみ残す（空白のみの値はtrim()で空文字になりfalsyとして除外）
    .filter(([, value]) => value.trim())
    .map(([key, value]) => {
      // 長いテキストは50文字で切る
      const truncatedValue = value.length > 50 ? value.slice(0, 50) + '...' : value;
      return `${key}: ${truncatedValue}`;
    })
    .slice(0, 3); // 最大3パラメータまで表示

  if (filledParams.length === 0) {
    return m.no_parameters_set();
  }

  return filledParams.map(param => `• ${param}`).join('\n');
});

{#if !isParameterInputCollapsed}
  <!-- 入力フェーズ：全パラメータのフォームを表示 -->
  <div class="space-y-6 parameter-inputs">
    {#if selectedTemplate}
      {#each Object.entries(selectedTemplate.parameters) as [paramKey, param]}
        <div class="magical-input-group">
          <label for={paramKey}>
            <span>{paramKey}</span>
            {#if param.required}
              <span class="magical-badge required-badge">{m.required()}</span>
            {/if}
          </label>
          <p>{param.description}</p>
          <!-- bind:value で双方向バインディング。
               ユーザーの入力 → parameterValues[paramKey] に自動反映、
               parameterValues[paramKey] の変更 → textarea の表示に自動反映。
               Reactでは value + onChange の2つが必要だが、Svelteではbind:一つで済む。 -->
          <textarea
            bind:value={parameterValues[paramKey]}
            placeholder={m.enter_parameter({ parameter: paramKey })}
            required={param.required}
            rows="4"
          ></textarea>
        </div>
      {/each}
    {/if}

    <!-- 生成ボタン -->
    {#if selectedTemplate}
      <button onclick={generateOutput} disabled={isLoading || !hasAllRequiredParams()}>
        {#if isLoading}
          {m.generating_magic()}
        {:else}
          {m.generate_output()}
        {/if}
      </button>
    {/if}
  </div>
{/if}

<!-- 生成フェーズ：出力を表示 -->
{#if showOutput}
  <div class="output-section">
    <OutputDisplay {output} {isLoading} {isStreaming} />
  </div>
{/if}

function toggleParameterInput() {
  isParameterInputCollapsed = !isParameterInputCollapsed;
}

function handleTemplateSelect(template: Template) {
  selectedTemplate = template;
  parameterValues = Object.keys(template.parameters).reduce((acc, key) => {
    acc[key] = '';
    return acc;
  }, {} as Record<string, string>);
  error = null;

  // 折りたたみ状態をリセット
  isParameterInputCollapsed = false;
  showOutput = false;
  output = '';
}

<button
  onclick={$authState.isAuthenticated ? generateOutput : handleUnauthenticatedGenerate}
  disabled={isLoading || (!$authState.isAuthenticated ? false : !hasAllRequiredParams())}
>
  {#if isLoading}
    <div class="magical-loading mr-2"></div>
    {m.generating_magic()}
  {:else if !$authState.isAuthenticated}
    {m.sign_in_to_generate()}
  {:else if !hasAllRequiredParams()}
    {m.complete_required_fields()}
  {:else}
    {m.generate_output()}
  {/if}
</button>

function handleUnauthenticatedGenerate() {
  const authSettingsElement = document.querySelector('.magical-auth-container');
  if (authSettingsElement) {
    authSettingsElement.scrollIntoView({ behavior: 'smooth', block: 'center' });

    // 一時的にハイライトして注意を引く
    authSettingsElement.classList.add('auth-highlight');
    setTimeout(() => {
      authSettingsElement.classList.remove('auth-highlight');
    }, 2000);
  }
}