@kitnai/chat 0.3.1 → 0.5.0

package/src/elements/chat.tsx

@@ -1,234 +1,37 @@
-import { createSignal, For, Show } from 'solid-js';
 import { defineKitnElement } from './define';
-import { ChatConfig, useChatConfig } from '../primitives/chat-config';
-import { ChatContainer, ChatContainerContent, ChatContainerScrollAnchor } from '../components/chat-container';
-import { Message, MessageContent, MessageActions } from '../components/message';
-import { Reasoning, ReasoningTrigger, ReasoningContent } from '../components/reasoning';
-import { Tool } from '../components/tool';
-import { Attachments, Attachment, AttachmentPreview, AttachmentInfo, type AttachmentData } from '../components/attachments';
-import { ModelSwitcher } from '../components/model-switcher';
-import { ScrollButton } from '../components/scroll-button';
-import {
-  Context,
-  ContextTrigger,
-  ContextContent,
-  ContextContentHeader,
-  ContextContentBody,
-  ContextContentFooter,
-  ContextInputUsage,
-  ContextOutputUsage,
-} from '../components/context';
-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 { ChatMessage, ChatMessageAction } from './chat-types';
+import { ChatThread, type ChatThreadProps, type ChatThreadContextUsage } from '../components/chat-thread';
+import type { SlashCommandItem } from '../components/slash-command';
 import type { ProseSize } from '../primitives/chat-config';
 import type { ModelOption } from '../types';
 
-interface ContextUsage {
-  usedTokens: number;
-  maxTokens: number;
-  inputTokens?: number;
-  outputTokens?: number;
-  estimatedCost?: number;
-}
-
-interface Props extends Record<string, unknown> {
-  messages: ChatMessage[];
-  value?: string;
-  placeholder?: string;
-  loading?: boolean;
-  suggestions?: string[];
-  proseSize?: ProseSize;
-  codeTheme?: string;
-  codeHighlight?: boolean;
-  /** Optional header title shown on the left of the header. */
-  chatTitle?: string;
-  /** Optional model list. When set (>1 model) a ModelSwitcher is shown in the
-   *  header and a `modelchange` event fires on selection. */
-  models?: ModelOption[];
-  /** The currently selected model id (pairs with `models`). */
-  currentModel?: string;
-  /** Optional context-window token usage. When set, a Context token meter is
-   *  shown in the header. */
-  context?: ContextUsage;
-  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
-  scrollButton?: boolean;
-  /** Show a Search (Globe) button in the input toolbar; fires a `search` event. */
-  search?: boolean;
-  /** Show a Voice (Mic) button in the input toolbar; fires a `voice` event. */
-  voice?: boolean;
-}
-
-const ACTION_LABEL: Record<ChatMessageAction, string> = {
-  copy: 'Copy', like: 'Like', dislike: 'Dislike', regenerate: 'Regenerate', edit: 'Edit',
-};
-
-const ACTION_ICON: Record<ChatMessageAction, Component<{ class?: string }>> = {
-  copy: Copy, like: ThumbsUp, dislike: ThumbsDown, regenerate: RefreshCw, edit: Pencil,
-};
+type Props = Omit<ChatThreadProps,
+  'class' | 'onValueChange' | 'onSubmit' | 'onSuggestionClick' | 'onModelChange'
+  | 'onMessageAction' | 'onSearch' | 'onVoice' | 'onSlashSelect'> & Record<string, unknown>;
 
 defineKitnElement<Props>('kitn-chat', {
-  messages: [],
-  value: undefined,
-  placeholder: 'Send a message...',
-  loading: false,
-  suggestions: undefined,
-  proseSize: 'base',
-  codeTheme: 'github-dark-dimmed',
-  codeHighlight: true,
-  chatTitle: undefined,
-  models: undefined,
-  currentModel: undefined,
-  context: undefined,
-  scrollButton: true,
-  search: false,
-  voice: false,
-}, (props, { dispatch }) => {
-  // 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();
-
-  const [internal, setInternal] = createSignal(props.value ?? '');
-  const [attachments, setAttachments] = createSignal<AttachmentData[]>([]);
-  const current = () => props.value ?? internal();
-  const handleChange = (v: string) => { setInternal(v); dispatch('valuechange', { value: v }); };
-  const handleSubmit = () => {
-    dispatch('submit', { value: current(), attachments: attachments() });
-    setAttachments([]);
-  };
-  const handleSuggestionClick = (v: string) => { handleChange(v); dispatch('suggestionclick', { value: v }); };
-
-  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()}>
-      <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">
-            <div class="text-sm font-semibold text-foreground">
-              {props.chatTitle}
-            </div>
-            <div class="flex items-center gap-2">
-              <Show when={props.models}>
-                <ModelSwitcher
-                  models={props.models!}
-                  currentModelId={props.currentModel ?? props.models![0]?.id ?? ''}
-                  onModelChange={(modelId) => dispatch('modelchange', { modelId })}
-                />
-              </Show>
-              <Show when={props.context}>
-                <Context
-                  usedTokens={props.context!.usedTokens}
-                  maxTokens={props.context!.maxTokens}
-                  inputTokens={props.context!.inputTokens}
-                  outputTokens={props.context!.outputTokens}
-                  estimatedCost={props.context!.estimatedCost}
-                >
-                  <ContextTrigger />
-                  <ContextContent>
-                    <ContextContentHeader />
-                    <ContextContentBody>
-                      <div class="space-y-1.5">
-                        <ContextInputUsage />
-                        <ContextOutputUsage />
-                      </div>
-                    </ContextContentBody>
-                    <ContextContentFooter />
-                  </ContextContent>
-                </Context>
-              </Show>
-            </div>
-          </header>
-        </Show>
-        <div class="relative flex-1 overflow-hidden">
-        <ChatContainer class="h-full px-4 py-3">
-          <ChatContainerContent class="mx-auto w-full max-w-3xl space-y-4">
-            <For each={props.messages}>
-              {(m) => (
-                <Message class={m.role === 'user' ? 'flex-col items-end' : 'flex-col items-start'}>
-                  <Show when={m.reasoning}>
-                    <Reasoning class="mb-2 w-full">
-                      <ReasoningTrigger>{m.reasoning!.label ?? 'Reasoning'}</ReasoningTrigger>
-                      <ReasoningContent markdown>{m.reasoning!.text}</ReasoningContent>
-                    </Reasoning>
-                  </Show>
-                  <For each={m.tools ?? []}>
-                    {(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}
-                  </For>
-                  <Show when={m.attachments?.length}>
-                    <Attachments variant="inline" class={m.role === 'user' ? 'mb-2 justify-end' : 'mb-2'}>
-                      <For each={m.attachments!}>
-                        {(att) => (
-                          <Attachment data={att}>
-                            <AttachmentPreview />
-                            <AttachmentInfo />
-                          </Attachment>
-                        )}
-                      </For>
-                    </Attachments>
-                  </Show>
-                  <MessageContent
-                    markdown={m.role === 'assistant'}
-                    class={m.role === 'user'
-                      ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2'
-                      : 'bg-transparent p-0'}
-                  >
-                    {m.content}
-                  </MessageContent>
-                  <Show when={m.actions?.length}>
-                    <MessageActions class="mt-1 flex gap-0">
-                      <For each={m.actions!}>
-                        {(a) => (
-                          <Button
-                            variant="ghost" size="icon-sm" class="rounded-full"
-                            data-action={a}
-                            aria-label={ACTION_LABEL[a]}
-                            onClick={() => dispatch('messageaction', { messageId: m.id, action: a })}
-                          >
-                            {(() => {
-                              const Icon = ACTION_ICON[a];
-                              return <Icon class="size-3.5" />;
-                            })()}
-                          </Button>
-                        )}
-                      </For>
-                    </MessageActions>
-                  </Show>
-                </Message>
-              )}
-            </For>
-            <ChatContainerScrollAnchor />
-          </ChatContainerContent>
-          <Show when={showScrollButton()}>
-            <div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">
-              <ScrollButton class="shadow-sm" />
-            </div>
-          </Show>
-        </ChatContainer>
-        </div>
-        <div class="shrink-0 px-4 pb-4">
-          <div class="mx-auto max-w-3xl">
-            <DefaultPromptInput
-              value={current()}
-              placeholder={props.placeholder}
-              loading={props.loading}
-              suggestions={props.suggestions}
-              attachments={attachments()}
-              search={props.search}
-              voice={props.voice}
-              onValueChange={handleChange}
-              onSubmit={handleSubmit}
-              onSuggestionClick={handleSuggestionClick}
-              onAttachmentsChange={setAttachments}
-              onSearch={() => dispatch('search', {})}
-              onVoice={() => dispatch('voice', {})}
-            />
-          </div>
-        </div>
-      </div>
-    </ChatConfig>
-  );
-});
+  messages: [], value: undefined, placeholder: 'Send a message...', loading: false,
+  suggestions: undefined, suggestionMode: 'submit', proseSize: 'sm',
+  codeTheme: 'github-dark-dimmed', codeHighlight: true, chatTitle: undefined,
+  models: undefined, currentModel: undefined, context: undefined, scrollButton: true,
+  search: false, voice: false, slashCommands: undefined, slashActiveIds: undefined, slashCompact: false,
+}, (props, { dispatch, flag }) => (
+  <ChatThread
+    messages={props.messages} value={props.value as string | undefined} placeholder={props.placeholder as string}
+    loading={flag('loading')} suggestions={props.suggestions as string[] | undefined}
+    suggestionMode={props.suggestionMode as 'submit' | 'fill'} proseSize={props.proseSize as ProseSize}
+    codeTheme={props.codeTheme as string} codeHighlight={flag('codeHighlight')}
+    chatTitle={props.chatTitle as string | undefined} models={props.models as ModelOption[] | undefined}
+    currentModel={props.currentModel as string | undefined} context={props.context as ChatThreadContextUsage | undefined}
+    scrollButton={props.scrollButton !== false} search={flag('search')} voice={flag('voice')}
+    slashCommands={props.slashCommands as SlashCommandItem[] | undefined}
+    slashActiveIds={props.slashActiveIds as string[] | undefined} slashCompact={flag('slashCompact')}
+    onValueChange={(value) => dispatch('valuechange', { value })}
+    onSubmit={(detail) => dispatch('submit', detail)}
+    onSuggestionClick={(value) => dispatch('suggestionclick', { value })}
+    onModelChange={(modelId) => dispatch('modelchange', { modelId })}
+    onMessageAction={(detail) => dispatch('messageaction', detail)}
+    onSearch={() => dispatch('search', {})}
+    onVoice={() => dispatch('voice', {})}
+    onSlashSelect={(command) => dispatch('slashselect', { command })}
+  />
+));

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>
+  );
+});