@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/chat/ChatMessage.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { renderMarkdown } from '../markdown'
+  import { Button } from '#lib/components/ui/button/index.js'
+
+  let {
+    role,
+    text,
+    label,
+    status,
+    reasoning,
+    reasoningLabel = 'Reasoning',
+    process,
+    attachments,
+    children,
+    actions,
+    latest = false,
+    selected = false,
+    showMoreLabel = 'Show more',
+    showLessLabel = 'Show less',
+  }: {
+    role: 'user' | 'assistant'
+    text: string
+    label?: string | undefined
+    status?: string | undefined
+    reasoning?: string | undefined
+    reasoningLabel?: string | undefined
+    process?: Snippet | undefined
+    attachments?: Snippet | undefined
+    children?: Snippet | undefined
+    actions?: Snippet | undefined
+    latest?: boolean | undefined
+    selected?: boolean | undefined
+    showMoreLabel?: string | undefined
+    showLessLabel?: string | undefined
+  } = $props()
+  const html = $derived(role === 'assistant' ? renderMarkdown(text) : '')
+  const preview = $derived.by(() => {
+    if (role !== 'user') return null
+    let lines = 0
+    let end = 0
+    for (const line of text.split('\n')) {
+      if (line.trim() && ++lines > 5) return text.slice(0, end).trimEnd()
+      end += line.length + 1
+    }
+    return null
+  })
+  let expanded = $state(false)
+</script>
+
+<div
+  class="chat-message"
+  data-status={status}
+  class:user={role === 'user'}
+  class:assistant={role === 'assistant'}
+  class:latest
+  class:selected
+>
+  {#if label}<div class="reply-source">{label}</div>{/if}
+  {#if attachments}{@render attachments()}{/if}
+  {#if reasoning}<details class="thinking">
+      <summary>{reasoningLabel}</summary>
+      <p>{reasoning}</p>
+    </details>{/if}
+  {#if process}{@render process()}{/if}
+  {#if role === 'user'}
+    <div class="user-bubble">
+      <p class="user-message">{preview !== null && !expanded ? preview : text}</p>
+      {#if preview !== null}<Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          aria-expanded={expanded}
+          onclick={() => {
+            expanded = !expanded
+          }}>{expanded ? showLessLabel : showMoreLabel}</Button
+        >{/if}
+    </div>
+  {:else}
+    <div
+      class="markdown"
+      {@attach (node) => {
+        node.innerHTML = html
+      }}
+    ></div>
+  {/if}
+  {#if children}{@render children()}{/if}
+  {#if actions}<div class="message-actions">{@render actions()}</div>{/if}
+</div>
+
+<style>
+  /* Hallmark · component: open assistant message · theme: host semantic tokens */
+  .chat-message {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    color: var(--color-foreground);
+  }
+  .assistant {
+    padding-block: 0.75rem;
+  }
+  .selected {
+    outline: 1px solid var(--color-border);
+    outline-offset: 0.5rem;
+    border-radius: var(--kit-radius, var(--radius));
+  }
+  .user {
+    align-items: flex-end;
+  }
+  .user-bubble {
+    max-width: min(90%, 42rem);
+    border-radius: var(--kit-radius, var(--radius));
+    padding: 0.625rem 0.875rem;
+    background: var(--color-muted);
+  }
+  .user-message {
+    margin: 0;
+    font-size: var(--kit-text-base);
+    white-space: pre-wrap;
+  }
+  .reply-source,
+  .thinking {
+    color: var(--color-muted-foreground);
+    font-size: var(--kit-text-sm);
+  }
+  .thinking summary {
+    cursor: pointer;
+  }
+  .thinking summary:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+  .thinking p {
+    white-space: pre-wrap;
+    margin-block: 0.5rem;
+  }
+  .message-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    min-height: 2rem;
+  }
+  .message-actions :global(button) {
+    min-width: 2rem;
+    min-height: 2rem;
+  }
+  @media (hover: hover) {
+    .assistant:not(.latest) .message-actions {
+      opacity: 0;
+    }
+    .assistant:hover .message-actions,
+    .assistant:focus-within .message-actions {
+      opacity: 1;
+    }
+  }
+  .markdown {
+    font-size: var(--kit-text-base);
+    line-height: 1.6;
+  }
+  .markdown :global(p),
+  .markdown :global(ul),
+  .markdown :global(ol),
+  .markdown :global(blockquote),
+  .markdown :global(pre),
+  .markdown :global(table) {
+    margin: 0.75em 0;
+  }
+  .markdown :global(h1),
+  .markdown :global(h2),
+  .markdown :global(h3),
+  .markdown :global(h4),
+  .markdown :global(h5),
+  .markdown :global(h6) {
+    margin: 1em 0 0.5em;
+    font-weight: 600;
+    line-height: 1.35;
+  }
+  .markdown :global(h1) {
+    font-size: 1.4em;
+  }
+  .markdown :global(h2) {
+    font-size: 1.25em;
+  }
+  .markdown :global(h3) {
+    font-size: 1.1em;
+  }
+  .markdown :global(ul),
+  .markdown :global(ol) {
+    padding-inline-start: 1.5em;
+  }
+  .markdown :global(ul) {
+    list-style: disc;
+  }
+  .markdown :global(ol) {
+    list-style: decimal;
+  }
+  .markdown :global(li) {
+    margin: 0.25em 0;
+  }
+  .markdown :global(li::marker) {
+    color: var(--color-muted-foreground);
+  }
+  .markdown :global(blockquote) {
+    border-inline-start: 3px solid var(--color-border);
+    padding-inline-start: 0.75em;
+    color: var(--color-muted-foreground);
+  }
+  .markdown :global(a) {
+    color: var(--color-primary);
+    text-decoration: underline;
+    overflow-wrap: anywhere;
+  }
+  .markdown :global(code) {
+    border-radius: var(--kit-radius-sm);
+    background: var(--color-background);
+    padding: 0.1em 0.3em;
+    font-size: 0.95em;
+  }
+  .markdown :global(pre) {
+    max-width: 100%;
+    overflow-x: auto;
+    padding: 0.75em;
+    border: 1px solid var(--color-border);
+    border-radius: var(--kit-radius-sm);
+    background: var(--color-background);
+    white-space: pre;
+    overflow-wrap: normal;
+  }
+  .markdown :global(pre code) {
+    padding: 0;
+    background: none;
+  }
+  .markdown :global(table) {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+  }
+  .markdown :global(th),
+  .markdown :global(td) {
+    padding: 0.4em 0.6em;
+    border: 1px solid var(--color-border);
+  }
+  .markdown :global(th) {
+    font-weight: 600;
+  }
+  .markdown :global(img),
+  .markdown :global(video) {
+    max-width: 100%;
+    height: auto;
+  }
+  .markdown :global(:first-child) {
+    margin-top: 0;
+  }
+  .markdown :global(:last-child) {
+    margin-bottom: 0;
+  }
+</style>

package/src/chat/ChatPanel.css

@@ -0,0 +1,386 @@
+  .chat-panel {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    container-type: size;
+  }
+  .chat-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: none;
+    min-width: 0;
+  }
+  .title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .title-row h2 {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font: inherit;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .title-row :global(button) {
+    flex-shrink: 0;
+  }
+  .model-row {
+    min-width: 0;
+  }
+  .turns {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .empty-message {
+    color: var(--color-muted-foreground);
+    text-align: center;
+    padding: 1.5rem 0.5rem;
+    margin: 0;
+  }
+  .context-chip {
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    gap: 0.25rem;
+    max-width: calc(100% - 2rem);
+    padding-left: 0.5rem;
+    background: var(--color-muted);
+    border-radius: var(--kit-radius, var(--radius));
+  }
+  .context-chip span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .context-chip :global(button) {
+    flex-shrink: 0;
+  }
+  .image-tray {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .image-tray li {
+    position: relative;
+  }
+  .image-tray img {
+    width: 3.5rem;
+    height: 3.5rem;
+    object-fit: cover;
+    border: 1px solid var(--color-border);
+    border-radius: var(--kit-radius, var(--radius));
+  }
+  .image-tray :global(button) {
+    position: absolute;
+    top: -0.375rem;
+    right: -0.375rem;
+  }
+  .approval-override {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  .approval-override > :global(button) {
+    align-self: flex-end;
+  }
+  .chat-panel :global(button.search-toggle) {
+    color: var(--color-muted-foreground);
+  }
+  .chat-panel :global(button.search-toggle[aria-pressed='true']) {
+    color: var(--color-primary-foreground);
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+  .chat-panel :global(button.search-toggle[aria-pressed='true']:hover:not(:disabled)) {
+    background: color-mix(in oklch, var(--color-primary) 85%, var(--color-foreground));
+  }
+  :global(.tools-menu) {
+    z-index: 50;
+    box-sizing: border-box;
+    width: min(16rem, calc(100vw - 1rem));
+    display: flex;
+    flex-direction: column;
+    padding: 0.25rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--kit-radius, var(--radius));
+    background: var(--color-popover);
+    color: var(--color-popover-foreground);
+    box-shadow: 0 4px 12px color-mix(in oklch, var(--color-foreground) 12%, transparent);
+    font-size: var(--kit-font-size-sm, 0.8125rem);
+  }
+  :global(.tools-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 2.25rem;
+    padding: 0.25rem 0.625rem;
+    border: 0;
+    border-radius: calc(var(--kit-radius, var(--radius)) - 2px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  :global(.tools-item:hover:not(:disabled)),
+  :global(.tools-item:focus-visible) {
+    background: var(--color-accent);
+    color: var(--color-accent-foreground);
+    outline: none;
+  }
+  :global(.tools-item:disabled) {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  :global(.tools-item svg) {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+  :global(.tools-item small) {
+    margin-left: auto;
+    color: var(--color-muted-foreground);
+    font-size: 0.75rem;
+  }
+  :global(.tools-item > svg:last-child:not(:first-child)) {
+    margin-left: auto;
+  }
+  :global(.tools-footer) {
+    margin-top: 0.25rem;
+    border-top: 1px solid var(--color-border);
+    border-radius: 0 0 calc(var(--kit-radius, var(--radius)) - 2px)
+      calc(var(--kit-radius, var(--radius)) - 2px);
+    color: var(--color-muted-foreground);
+  }
+  :global(.tools-title) {
+    margin: 0;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+  :global(.tools-order) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :global(.tools-row) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 2rem;
+    padding: 0 0.375rem;
+    border-radius: calc(var(--kit-radius, var(--radius)) - 2px);
+    font-size: 0.875rem;
+  }
+  :global(.tools-row:hover) {
+    background: var(--color-accent);
+  }
+  :global(.tools-row > svg) {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--color-muted-foreground);
+  }
+  :global(.tools-row > span) {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :global(.tools-grip) {
+    display: inline-flex;
+    padding: 0.125rem;
+    border: 0;
+    border-radius: 0.25rem;
+    background: none;
+    color: var(--color-muted-foreground);
+    cursor: grab;
+    touch-action: none;
+  }
+  :global(.tools-grip:focus-visible) {
+    outline: 2px solid var(--color-ring);
+  }
+  :global(.tools-grip svg) {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .plan-badge {
+    padding: 0.125rem 0.5rem;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    color: var(--color-muted-foreground);
+    font-size: var(--kit-font-size-sm, 0.8125rem);
+    white-space: nowrap;
+  }
+  :global(.mode-menu) {
+    width: min(35rem, calc(100vw - 1rem));
+    padding: 0.375rem;
+    border-radius: 0.75rem;
+  }
+  :global(.mode-option) {
+    display: grid;
+    grid-template-columns: 1rem 7.5rem minmax(0, 1fr) 1rem 0.875rem;
+    align-items: center;
+    column-gap: 0.5rem;
+    min-height: 2.125rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: 0.5rem;
+    font-size: var(--kit-font-size-sm, 0.8125rem);
+  }
+  :global(.mode-option[aria-current='true']) {
+    background: var(--color-muted);
+  }
+  :global(.mode-option > svg) {
+    color: var(--color-muted-foreground);
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .mode-name {
+    white-space: nowrap;
+  }
+  .mode-description {
+    color: var(--color-muted-foreground);
+    font-size: var(--kit-font-size-xs, 0.75rem);
+    text-align: right;
+    line-height: 1.5;
+  }
+  .mode-notice,
+  .mode-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-muted-foreground);
+  }
+  .mode-notice {
+    color: var(--color-warning, var(--color-muted-foreground));
+  }
+  .mode-notice :global(svg),
+  .mode-check :global(svg) {
+    display: block;
+    width: 0.8125rem;
+    height: 0.8125rem;
+  }
+  :global(.mode-danger),
+  :global(.mode-danger) :is(.mode-name, .mode-description, .mode-notice),
+  :global(.mode-option.mode-danger > svg) {
+    color: var(--color-destructive);
+  }
+  .mode-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.625rem 0.375rem 0.125rem;
+    color: var(--color-muted-foreground);
+    font-size: var(--kit-font-size-xs, 0.75rem);
+  }
+  .mode-keys {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .mode-keys kbd {
+    padding: 0 0.25rem;
+    border-radius: 0.25rem;
+    background: var(--color-muted);
+    font: inherit;
+  }
+  .mode-keys kbd:not(:first-child) {
+    margin-left: 0.375rem;
+  }
+  @media (max-width: 480px) {
+    :global(.mode-option) {
+      grid-template-columns: 1rem minmax(0, 1fr) 1rem 0.875rem;
+      row-gap: 0.125rem;
+    }
+    .mode-description {
+      grid-column: 2;
+      grid-row: 2;
+      text-align: left;
+    }
+    .mode-notice {
+      grid-column: 3;
+      grid-row: 1;
+    }
+    .mode-check {
+      grid-column: 4;
+      grid-row: 1;
+    }
+  }
+  .skills-control {
+    min-width: 0;
+    max-width: 100%;
+  }
+  .skills-control :global(div:first-child) {
+    flex-wrap: wrap;
+    min-width: 0;
+  }
+  .skills-control :global([data-slot='select-trigger']) {
+    width: auto;
+    max-width: 100%;
+  }
+  .search-status,
+  .draft-recovery {
+    margin: 0;
+    color: var(--color-muted-foreground);
+    font-size: var(--kit-font-size-sm, 0.8125rem);
+  }
+  .draft-recovery {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    max-height: 40vh;
+    overflow-y: auto;
+    min-width: 0;
+  }
+  .history-list :global(button) {
+    justify-content: flex-start;
+    min-width: 0;
+  }
+  .history-list span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :global(.reply-dialog) {
+    max-height: calc(100dvh - 2rem);
+    overflow-y: auto;
+  }
+  :global(.reply-dialog form),
+  :global(.reply-dialog [data-slot='field-group']) {
+    min-width: 0;
+  }
+  :global(.reply-dialog textarea) {
+    max-height: 45dvh;
+    overflow-y: auto;
+  }