hikari-desktop/src/lib/components/docs/DocsChatInput.svelte

<h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">Chat & Input</h3>

<div class="space-y-4 text-sm text-[var(--text-secondary)]">
  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Sending Messages</h4>
    <ul class="space-y-1">
      <li>• Press <kbd class="kbd">Enter</kbd> to send your message</li>
      <li>• Press <kbd class="kbd">Shift+Enter</kbd> to insert a newline</li>
      <li>• Paste images directly into the input — Hikari can see and discuss them</li>
      <li>• Paste code or multi-line text — Hikari will handle it as context</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Quick Actions</h4>
    <p>
      Click the <strong>⚡ lightning bolt</strong> icon in the input toolbar to open a panel of predefined
      prompt shortcuts. These let you trigger common tasks (explain code, write tests, refactor, and more)
      with a single click instead of typing.
    </p>
    <p class="mt-2">
      Quick actions send a pre-written prompt to Hikari immediately — no extra typing needed.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Snippet Library</h4>
    <p>
      Click the <strong>snippet icon</strong> in the input toolbar to open your personal snippet library
      — a collection of reusable text blocks you can insert into the input with one click.
    </p>
    <ul class="space-y-1 mt-2">
      <li>• Snippets are organised by category</li>
      <li>• Click a snippet to insert it at the cursor position</li>
      <li>• Default snippets are provided; add your own to build a personal library</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Clipboard History</h4>
    <p>
      Click the <strong>clipboard icon</strong> in the input toolbar to browse your clipboard history
      — a list of text you've previously copied or pasted during the session.
    </p>
    <ul class="space-y-1 mt-2">
      <li>• Longer text blocks and code snippets are captured automatically</li>
      <li>• Click an entry to insert it into the current input</li>
      <li>• Filter by language for code-specific entries</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Drafts</h4>
    <p>
      Click the <strong>draft icon</strong> in the input toolbar to open the Drafts panel — a place to
      save and retrieve partially written messages.
    </p>
    <ul class="space-y-1 mt-2">
      <li>• Save the current input as a draft for later</li>
      <li>• Click a saved draft to restore it to the input</li>
      <li>• Drafts persist across sessions so you can pick up where you left off</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Compact Mode</h4>
    <p>
      Compact mode shrinks the app to a small <strong>280×400 px</strong> floating window — useful for
      keeping Hikari visible whilst working in another application.
    </p>
    <ul class="space-y-1 mt-2">
      <li>
        • Toggle via <strong>Compact Mode</strong> in the menu or
        <kbd class="kbd">Ctrl+Shift+M</kbd>
      </li>
      <li>• Press the same shortcut again (or use the menu) to return to normal size</li>
      <li>• Your previous window size is restored automatically when you exit compact mode</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Discord Rich Presence</h4>
    <p>
      Hikari Desktop can share your activity in Discord — showing the model you're using and session
      duration as your Rich Presence status.
    </p>
    <p class="mt-2">
      Toggle this in Settings (<kbd class="kbd">Ctrl+,</kbd>) under the Discord section. Disable it
      if you'd rather keep your coding sessions private.
    </p>
  </div>
</div>

<style>
  kbd.kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
  }
</style>