@kitnai/chat 0.3.0 → 0.4.0

package/src/elements/attachments.tsx

@@ -0,0 +1,132 @@
+import { For, Show } from 'solid-js';
+import { defineKitnElement } from './define';
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+  AttachmentHoverCard,
+  AttachmentHoverCardTrigger,
+  AttachmentHoverCardContent,
+  AttachmentEmpty,
+  getAttachmentLabel,
+  getMediaCategory,
+  type AttachmentData,
+  type AttachmentVariant,
+} from '../components/attachments';
+
+interface Props extends Record<string, unknown> {
+  /** The attachments to render. Set as a JS property (array). */
+  items: AttachmentData[];
+  /** Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows. */
+  variant?: AttachmentVariant;
+  /** Wrap each item in a hover card that previews its details. */
+  hoverCard?: boolean;
+  /** Show a remove button per item; clicking it fires a `remove` event. */
+  removable?: boolean;
+  /** Also show the media type beneath the filename (non-grid variants). */
+  showMediaType?: boolean;
+  /** Text shown when `items` is empty. */
+  emptyText?: string;
+}
+
+/** Events fired by `<kitn-attachments>`. */
+interface Events {
+  /** A remove button was clicked. */
+  remove: { id: string };
+}
+
+/**
+ * `<kitn-attachments>` — the exemplar for the "collapse a compound primitive to
+ * ONE configurable element" pattern (Route 1). The presentation knobs that the
+ * SolidJS layer expresses by composing sub-parts (`<AttachmentPreview>`,
+ * `<AttachmentInfo>`, `<AttachmentHoverCard>`, `<AttachmentRemove>`) become
+ * attributes/flags here:
+ *
+ *   - icon + label .......... `variant="inline"`
+ *   - visual + hover card .... `variant="grid" hover-card`
+ *   - removable chips ........ add `removable` (emits `remove` → { id })
+ *
+ * Data in via the `items` property; the only interaction (`remove`) comes back
+ * as an event. For fully-custom hover content, the SolidJS primitives remain the
+ * escape hatch (a templated slot — "Route 2" — is a deliberate future add).
+ */
+defineKitnElement<Props, Events>('kitn-attachments', {
+  items: [],
+  variant: 'grid',
+  hoverCard: false,
+  removable: false,
+  showMediaType: false,
+  emptyText: undefined,
+}, (props, { dispatch, flag }) => {
+  const variant = () => props.variant ?? 'grid';
+  const hoverCard = () => flag('hoverCard');
+  const removable = () => flag('removable');
+  const showMediaType = () => flag('showMediaType');
+
+  return (
+    <Show
+      when={props.items.length}
+      fallback={<Show when={props.emptyText}><AttachmentEmpty>{props.emptyText}</AttachmentEmpty></Show>}
+    >
+      <Attachments variant={variant()}>
+        <For each={props.items}>
+          {(item) => (
+            <Attachment
+              data={item}
+              onRemove={removable() ? () => dispatch('remove', { id: item.id }) : undefined}
+            >
+              <Show
+                when={hoverCard() && variant() !== 'grid'}
+                fallback={
+                  <>
+                    <AttachmentPreview />
+                    {/* Info only for non-grid; grid is a self-contained visual tile. */}
+                    <Show when={variant() !== 'grid'}>
+                      <AttachmentInfo showMediaType={showMediaType()} />
+                    </Show>
+                  </>
+                }
+              >
+                {/* Hover preview is for compact inline/list chips; grid tiles are
+                    already the visual, so they skip it (wrapping them would also
+                    collapse non-image tiles to the icon's height). */}
+                <AttachmentHoverCard>
+                  <AttachmentHoverCardTrigger>
+                    <div class="flex items-center gap-1.5">
+                      <AttachmentPreview />
+                      <AttachmentInfo showMediaType={showMediaType()} />
+                    </div>
+                  </AttachmentHoverCardTrigger>
+                  <AttachmentHoverCardContent>
+                    {/* For image attachments, preview the actual thumbnail;
+                        otherwise fall back to the label + media-type details. */}
+                    <Show
+                      when={getMediaCategory(item) === 'image' && item.type === 'file' && item.url}
+                      fallback={
+                        <>
+                          <div class="text-body font-medium">{getAttachmentLabel(item)}</div>
+                          <Show when={item.mediaType}>
+                            <div class="text-muted-foreground text-caption">{item.mediaType}</div>
+                          </Show>
+                        </>
+                      }
+                    >
+                      <img
+                        src={item.url}
+                        alt={getAttachmentLabel(item)}
+                        class="block max-h-64 max-w-xs rounded object-contain"
+                      />
+                    </Show>
+                  </AttachmentHoverCardContent>
+                </AttachmentHoverCard>
+              </Show>
+              <AttachmentRemove />
+            </Attachment>
+          )}
+        </For>
+      </Attachments>
+    </Show>
+  );
+});

package/src/elements/chain-of-thought.tsx

@@ -0,0 +1,45 @@
+import { For, Show } from 'solid-js';
+import { defineKitnElement } from './define';
+import {
+  ChainOfThought,
+  ChainOfThoughtStep,
+  ChainOfThoughtTrigger,
+  ChainOfThoughtContent,
+  ChainOfThoughtItem,
+} from '../components/chain-of-thought';
+
+interface Step {
+  /** The step's heading (the always-visible trigger). */
+  label: string;
+  /** Optional expandable detail. */
+  content?: string;
+}
+
+interface Props extends Record<string, unknown> {
+  /** The reasoning steps. Set as a JS property. Compound sub-parts collapse to
+   *  this one data model (Route 1). */
+  steps: Step[];
+}
+
+/**
+ * `<kitn-chain-of-thought>` — step-by-step reasoning with connectors and
+ * per-step collapsible detail. Data via the `steps` property.
+ */
+defineKitnElement<Props>('kitn-chain-of-thought', {
+  steps: [],
+}, (props) => (
+  <ChainOfThought>
+    <For each={props.steps}>
+      {(step, i) => (
+        <ChainOfThoughtStep isLast={i() === props.steps.length - 1}>
+          <ChainOfThoughtTrigger>{step.label}</ChainOfThoughtTrigger>
+          <Show when={step.content}>
+            <ChainOfThoughtContent>
+              <ChainOfThoughtItem>{step.content}</ChainOfThoughtItem>
+            </ChainOfThoughtContent>
+          </Show>
+        </ChainOfThoughtStep>
+      )}
+    </For>
+  </ChainOfThought>
+));

package/src/elements/chat-scope-picker.tsx

@@ -0,0 +1,36 @@
+import { defineKitnElement } from './define';
+import { ChatScopePicker } from '../components/chat-scope-picker';
+import type { SearchFilters } from '../types';
+
+interface Props extends Record<string, unknown> {
+  /** Authors to offer as scope filters. Set as a JS property. */
+  availableAuthors: string[];
+  /** Tags to offer as scope filters. Set as a JS property. */
+  availableTags: string[];
+  /** The label shown on the trigger for the active scope. */
+  currentLabel?: string;
+}
+
+/** Events fired by `<kitn-chat-scope-picker>`. */
+interface Events {
+  /** A scope was chosen (`undefined` filters = "All Content"). */
+  scopechange: { filters: SearchFilters | undefined };
+}
+
+/**
+ * `<kitn-chat-scope-picker>` — a dropdown to scope a chat by author or tag.
+ * Options via `available-authors`/`available-tags` properties; emits
+ * `scopechange`.
+ */
+defineKitnElement<Props, Events>('kitn-chat-scope-picker', {
+  availableAuthors: [],
+  availableTags: [],
+  currentLabel: 'All Content',
+}, (props, { dispatch }) => (
+  <ChatScopePicker
+    currentLabel={props.currentLabel ?? 'All Content'}
+    availableAuthors={props.availableAuthors}
+    availableTags={props.availableTags}
+    onScopeChange={(filters) => dispatch('scopechange', { filters })}
+  />
+));

package/src/elements/chat.tsx

@@ -22,6 +22,7 @@ import { Button } from '../ui/button';
 import { Copy, ThumbsUp, ThumbsDown, RefreshCw, Pencil } from 'lucide-solid';
 import type { Component } from 'solid-js';
 import { DefaultPromptInput } from './default-input';
+import type { SlashCommandItem } from '../components/slash-command';
 import type { ChatMessage, ChatMessageAction } from './chat-types';
 import type { ProseSize } from '../primitives/chat-config';
 import type { ModelOption } from '../types';
@@ -35,13 +36,32 @@ interface ContextUsage {
 }
 
 interface Props extends Record<string, unknown> {
+  /** The full message thread to render, newest last. Each entry carries its role,
+   *  content, and optional reasoning/tools/attachments/actions. Set as a JS
+   *  property (`el.messages = [...]`). */
   messages: ChatMessage[];
+  /** Controlled value of the input. When set, the host owns the input text and
+   *  must update it on `valuechange`; leave unset for uncontrolled behavior. */
   value?: string;
+  /** Placeholder text shown in the empty input. */
   placeholder?: string;
+  /** When true, shows the loading/streaming state and disables submit (use while
+   *  awaiting the assistant's reply). */
   loading?: boolean;
+  /** Starter prompts shown above the input when the thread is empty. Clicking one
+   *  follows `suggestionMode`. Set as a JS property. */
   suggestions?: string[];
+  /** What clicking a suggestion does: `'submit'` (default) sends it immediately
+   *  as if typed and submitted; `'fill'` just places it in the input. */
+  suggestionMode?: 'submit' | 'fill';
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`).
+   *  Defaults to `'sm'`. */
   proseSize?: ProseSize;
+  /** Shiki theme name for syntax-highlighted code blocks (e.g.
+   *  `'github-dark-dimmed'`). */
   codeTheme?: string;
+  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain
+   *  `<pre>` blocks (lighter, no highlighter load). Default true. */
   codeHighlight?: boolean;
   /** Optional header title shown on the left of the header. */
   chatTitle?: string;
@@ -59,6 +79,13 @@ interface Props extends Record<string, unknown> {
   search?: boolean;
   /** Show a Voice (Mic) button in the input toolbar; fires a `voice` event. */
   voice?: boolean;
+  /** Slash commands — when set, typing `/` in the input opens the command
+   *  palette and fires `slashselect`. Set as a JS property. */
+  slashCommands?: SlashCommandItem[];
+  /** Command ids to highlight as active in the palette. */
+  slashActiveIds?: string[];
+  /** Single-line palette rows. */
+  slashCompact?: boolean;
 }
 
 const ACTION_LABEL: Record<ChatMessageAction, string> = {
@@ -75,7 +102,8 @@ defineKitnElement<Props>('kitn-chat', {
   placeholder: 'Send a message...',
   loading: false,
   suggestions: undefined,
-  proseSize: 'base',
+  suggestionMode: 'submit',
+  proseSize: 'sm',
   codeTheme: 'github-dark-dimmed',
   codeHighlight: true,
   chatTitle: undefined,
@@ -85,7 +113,10 @@ defineKitnElement<Props>('kitn-chat', {
   scrollButton: true,
   search: false,
   voice: false,
-}, (props, { dispatch }) => {
+  slashCommands: undefined,
+  slashActiveIds: undefined,
+  slashCompact: false,
+}, (props, { dispatch, flag }) => {
   // Preserve the shadow-root portal mount from the wrapper's outer ChatConfig
   // when we nest a second ChatConfig to set proseSize/codeTheme.
   const outer = useChatConfig();
@@ -98,13 +129,22 @@ defineKitnElement<Props>('kitn-chat', {
     dispatch('submit', { value: current(), attachments: attachments() });
     setAttachments([]);
   };
-  const handleSuggestionClick = (v: string) => { handleChange(v); dispatch('suggestionclick', { value: v }); };
+  const handleSuggestionClick = (v: string) => {
+    if ((props.suggestionMode ?? 'submit') === 'fill') {
+      handleChange(v);
+      dispatch('suggestionclick', { value: v });
+    } else {
+      // Default: behave as if the user typed the suggestion and pressed submit.
+      dispatch('submit', { value: v, attachments: attachments() });
+      setAttachments([]);
+    }
+  };
 
   const showHeader = () => !!(props.chatTitle || props.models || props.context);
   const showScrollButton = () => props.scrollButton !== false;
 
   return (
-    <ChatConfig proseSize={props.proseSize} codeTheme={props.codeTheme} codeHighlight={props.codeHighlight} portalMount={outer.portalMount()}>
+    <ChatConfig proseSize={props.proseSize} codeTheme={props.codeTheme} codeHighlight={flag('codeHighlight')} portalMount={outer.portalMount()}>
       <div class="flex h-full flex-col bg-background">
         <Show when={showHeader()}>
           <header class="flex h-14 shrink-0 items-center justify-between border-b border-border px-5">
@@ -214,17 +254,21 @@ defineKitnElement<Props>('kitn-chat', {
             <DefaultPromptInput
               value={current()}
               placeholder={props.placeholder}
-              loading={props.loading}
+              loading={flag('loading')}
               suggestions={props.suggestions}
               attachments={attachments()}
-              search={props.search}
-              voice={props.voice}
+              search={flag('search')}
+              voice={flag('voice')}
+              slashCommands={props.slashCommands}
+              slashActiveIds={props.slashActiveIds}
+              slashCompact={flag('slashCompact')}
               onValueChange={handleChange}
               onSubmit={handleSubmit}
               onSuggestionClick={handleSuggestionClick}
               onAttachmentsChange={setAttachments}
               onSearch={() => dispatch('search', {})}
               onVoice={() => dispatch('voice', {})}
+              onSlashSelect={(command) => dispatch('slashselect', { command })}
             />
           </div>
         </div>

package/src/elements/checkpoint.tsx

@@ -0,0 +1,43 @@
+import { Show } from 'solid-js';
+import { defineKitnElement } from './define';
+import { Checkpoint, CheckpointIcon, CheckpointTrigger } from '../components/checkpoint';
+
+interface Props extends Record<string, unknown> {
+  /** Optional text beside the icon. */
+  label?: string;
+  /** Tooltip on hover. */
+  tooltip?: string;
+  /** Visual button style. */
+  variant?: 'ghost' | 'default' | 'outline';
+  /** Button size (use an `icon*` size for an icon-only checkpoint). */
+  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+}
+
+/** Events fired by `<kitn-checkpoint>`. */
+interface Events {
+  /** The checkpoint was clicked. */
+  select: void;
+}
+
+/**
+ * `<kitn-checkpoint>` — a bookmark/checkpoint button (optional tooltip + label).
+ * Emits `select`.
+ */
+defineKitnElement<Props, Events>('kitn-checkpoint', {
+  label: undefined,
+  tooltip: undefined,
+  variant: 'ghost',
+  size: 'sm',
+}, (props, { dispatch }) => (
+  <Checkpoint>
+    <CheckpointTrigger
+      tooltip={props.tooltip}
+      variant={props.variant}
+      size={props.size}
+      onClick={() => dispatch('select')}
+    >
+      <CheckpointIcon />
+      <Show when={props.label}><span class="ml-1.5">{props.label}</span></Show>
+    </CheckpointTrigger>
+  </Checkpoint>
+));

package/src/elements/code-block.tsx

@@ -0,0 +1,42 @@
+import { defineKitnElement } from './define';
+import { CodeBlock, CodeBlockCode } from '../components/code-block';
+import { ChatConfig, useChatConfig, type ProseSize } from '../primitives/chat-config';
+
+interface Props extends Record<string, unknown> {
+  /** The source code to render. */
+  code: string;
+  /** Language grammar (e.g. `js`, `python`). Defaults to `tsx`. */
+  language?: string;
+  /** Shiki theme name. */
+  codeTheme?: string;
+  /** Disable syntax highlighting (renders plain text, no Shiki). */
+  codeHighlight?: boolean;
+  /** Code text sizing. */
+  proseSize?: ProseSize;
+}
+
+/**
+ * `<kitn-code-block>` — one syntax-highlighted code block (with a copy button).
+ * Code via the `code` property; `language`/`code-theme` via attributes.
+ */
+defineKitnElement<Props>('kitn-code-block', {
+  code: '',
+  language: undefined,
+  codeTheme: 'github-dark-dimmed',
+  codeHighlight: true,
+  proseSize: 'sm',
+}, (props, { flag }) => {
+  const outer = useChatConfig();
+  return (
+    <ChatConfig
+      proseSize={props.proseSize}
+      codeTheme={props.codeTheme}
+      codeHighlight={flag('codeHighlight')}
+      portalMount={outer.portalMount()}
+    >
+      <CodeBlock>
+        <CodeBlockCode code={props.code} language={props.language} />
+      </CodeBlock>
+    </ChatConfig>
+  );
+});