hikari-desktop/src/lib/components/ThinkingBlock.svelte

<script lang="ts">
  interface Props {
    content: string;
    timestamp: Date;
  }

  let { content, timestamp }: Props = $props();
  let isExpanded = $state(false);

  function toggleExpanded() {
    isExpanded = !isExpanded;
  }

  function formatTime(date: Date): string {
    return date.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
    });
  }
</script>

<div class="thinking-block">
  <button class="thinking-header" onclick={toggleExpanded} type="button">
    <span class="thinking-timestamp">{formatTime(timestamp)}</span>
    <svg
      class="thinking-icon"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      width="16"
      height="16"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
      />
    </svg>
    <span class="thinking-label">Extended Thinking</span>
    <svg
      class="chevron"
      class:expanded={isExpanded}
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      width="14"
      height="14"
    >
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </button>

  {#if isExpanded}
    <div class="thinking-content">
      {content}
    </div>
  {/if}
</div>

<style>
  .thinking-block {
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    opacity: 0.85;
  }

  .thinking-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: all 0.2s;
  }

  .thinking-header:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  .thinking-timestamp {
    font-family: monospace;
    font-size: 0.75rem;
    opacity: 0.7;
  }

  .thinking-icon {
    flex-shrink: 0;
  }

  .thinking-label {
    flex: 1;
    text-align: left;
    font-style: italic;
  }

  .chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .chevron.expanded {
    transform: rotate(180deg);
  }

  .thinking-content {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
  }
</style>