@kitnai/chat 0.1.0 → 0.3.0

package/src/elements/default-input.tsx

@@ -2,6 +2,15 @@ import { For, Show } from 'solid-js';
 import { PromptInput, PromptInputTextarea, PromptInputActions } from '../components/prompt-input';
 import { PromptSuggestion } from '../components/prompt-suggestion';
 import { Button } from '../ui/button';
+import { Paperclip, Globe, Mic } from 'lucide-solid';
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+  type AttachmentData,
+} from '../components/attachments';
 
 export interface DefaultPromptInputProps {
   value: string;
@@ -9,12 +18,50 @@ export interface DefaultPromptInputProps {
   disabled?: boolean;
   loading?: boolean;
   suggestions?: string[];
+  /** Attachments staged in the input. Provide `onAttachmentsChange` to enable
+   *  the attach button + removable previews. */
+  attachments?: AttachmentData[];
+  /** Show a Search (Globe) button in the left toolbar; calls `onSearch`. */
+  search?: boolean;
+  /** Show a Voice (Mic) button in the left toolbar; calls `onVoice`. */
+  voice?: boolean;
   onValueChange: (v: string) => void;
   onSubmit: () => void;
   onSuggestionClick: (v: string) => void;
+  onAttachmentsChange?: (attachments: AttachmentData[]) => void;
+  onSearch?: () => void;
+  onVoice?: () => void;
+}
+
+function fileToAttachment(file: File): AttachmentData {
+  const id =
+    typeof crypto !== 'undefined' && crypto.randomUUID
+      ? crypto.randomUUID()
+      : `${file.name}-${file.size}-${file.lastModified}`;
+  return {
+    id,
+    type: 'file',
+    filename: file.name,
+    mediaType: file.type || undefined,
+    url: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
+  };
 }
 
 export function DefaultPromptInput(props: DefaultPromptInputProps) {
+  let fileInput: HTMLInputElement | undefined;
+  const attachments = () => props.attachments ?? [];
+  const canAttach = () => !!props.onAttachmentsChange;
+
+  const addFiles = (files: FileList | null) => {
+    if (!files?.length || !props.onAttachmentsChange) return;
+    props.onAttachmentsChange([...attachments(), ...Array.from(files).map(fileToAttachment)]);
+  };
+  const removeAttachment = (id: string) =>
+    props.onAttachmentsChange?.(attachments().filter((a) => a.id !== id));
+
+  const sendDisabled = () =>
+    props.disabled || props.loading || (!props.value.trim() && attachments().length === 0);
+
   return (
     <>
       <Show when={props.suggestions?.length}>
@@ -33,13 +80,80 @@ export function DefaultPromptInput(props: DefaultPromptInputProps) {
         isLoading={props.loading}
         disabled={props.disabled}
       >
+        <Show when={canAttach() && attachments().length}>
+          <div class="px-3 pt-3">
+            <Attachments variant="inline">
+              <For each={attachments()}>
+                {(att) => (
+                  <Attachment data={att} onRemove={() => removeAttachment(att.id)}>
+                    <AttachmentPreview />
+                    <AttachmentInfo />
+                    <AttachmentRemove />
+                  </Attachment>
+                )}
+              </For>
+            </Attachments>
+          </div>
+        </Show>
         <PromptInputTextarea placeholder={props.placeholder} class="min-h-[44px] pt-3 pl-4" />
-        <PromptInputActions class="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
+        <PromptInputActions class="mt-2 flex w-full items-center justify-between gap-2 px-3 pb-3">
+          <div class="flex items-center gap-2">
+            <Show when={canAttach()}>
+              <input
+                ref={fileInput}
+                type="file"
+                multiple
+                class="hidden"
+                onChange={(e) => {
+                  addFiles(e.currentTarget.files);
+                  e.currentTarget.value = ''; // allow re-picking the same file
+                }}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                class="rounded-full"
+                aria-label="Attach files"
+                disabled={props.disabled}
+                onClick={() => fileInput?.click()}
+              >
+                <Paperclip class="size-4" />
+              </Button>
+            </Show>
+            <Show when={props.search}>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                class="rounded-full gap-1"
+                aria-label="Search the web"
+                disabled={props.disabled}
+                onClick={() => props.onSearch?.()}
+              >
+                <Globe class="size-4" />
+                Search
+              </Button>
+            </Show>
+            <Show when={props.voice}>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                class="rounded-full"
+                aria-label="Voice input"
+                disabled={props.disabled}
+                onClick={() => props.onVoice?.()}
+              >
+                <Mic class="size-4" />
+              </Button>
+            </Show>
+          </div>
           <Button
             size="icon-sm"
             class="rounded-full"
             data-testid="send"
-            disabled={props.disabled || props.loading || !props.value.trim()}
+            disabled={sendDisabled()}
             onClick={props.onSubmit}
           >
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

package/src/elements/define.tsx

@@ -1,7 +1,24 @@
 import { customElement } from 'solid-element';
 import { ChatConfig } from '../primitives/chat-config';
 import { KITN_CSS } from './css';
-import type { JSX } from 'solid-js';
+import { createSignal, onCleanup, type JSX } from 'solid-js';
+
+/** Resolve whether the element should render dark, given its `theme` and the
+ *  system preference. `auto` (the default) follows `prefers-color-scheme`. */
+function createDarkMode(getTheme: () => string | undefined) {
+  const [systemDark, setSystemDark] = createSignal(false);
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    setSystemDark(mq.matches);
+    const onChange = (e: MediaQueryListEvent) => setSystemDark(e.matches);
+    mq.addEventListener('change', onChange);
+    onCleanup(() => mq.removeEventListener('change', onChange));
+  }
+  return () => {
+    const theme = getTheme() ?? 'auto';
+    return theme === 'dark' || (theme === 'auto' && systemDark());
+  };
+}
 
 export interface KitnElementContext {
   /** The custom-element host node. */
@@ -32,7 +49,13 @@ export function defineKitnElement<P extends Record<string, unknown>>(
 ): void {
   if (typeof customElements !== 'undefined' && customElements.get(tag)) return;
 
-  customElement(tag, propDefaults, (props: P, options: { element: object }) => {
+  // Every element gets a `theme` property/attribute: 'light' | 'dark' | 'auto'
+  // (default 'auto' = follow the OS `prefers-color-scheme`). It drives a `.dark`
+  // class on an inner wrapper, which the injected kit CSS already styles — so dark
+  // mode works in standalone Shadow-DOM usage with no token duplication.
+  const defaults = { theme: 'auto', ...propDefaults };
+
+  customElement(tag, defaults, (props: typeof defaults, options: { element: object }) => {
     const element = options.element as HTMLElement;
     let portalNode!: HTMLDivElement;
 
@@ -41,13 +64,18 @@ export function defineKitnElement<P extends Record<string, unknown>>(
         new CustomEvent(type, { detail, bubbles: false, composed: false }),
       );
 
+    const isDark = createDarkMode(() => props.theme as string | undefined);
+
     return (
       <>
         <style>{KITN_CSS}</style>
-        <div ref={portalNode} />
-        <ChatConfig portalMount={portalNode}>
-          {Facade(props, { element, dispatch })}
-        </ChatConfig>
+        {/* display:contents — no layout box; just carries the .dark token scope. */}
+        <div classList={{ dark: isDark() }} style={{ display: 'contents' }}>
+          <div ref={portalNode} />
+          <ChatConfig portalMount={portalNode}>
+            {Facade(props as unknown as P, { element, dispatch })}
+          </ChatConfig>
+        </div>
       </>
     );
   });

package/src/elements/prompt-input.tsx

@@ -1,6 +1,7 @@
 import { createSignal } from 'solid-js';
 import { defineKitnElement } from './define';
 import { DefaultPromptInput } from './default-input';
+import type { AttachmentData } from '../components/attachments';
 
 interface Props extends Record<string, unknown> {
   value?: string;
@@ -18,10 +19,14 @@ defineKitnElement<Props>('kitn-prompt-input', {
   suggestions: undefined,
 }, (props, { dispatch }) => {
   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() });
+  const handleSubmit = () => {
+    dispatch('submit', { value: current(), attachments: attachments() });
+    setAttachments([]);
+  };
   const handleSuggestionClick = (v: string) => { handleChange(v); dispatch('suggestionclick', { value: v }); };
 
   return (
@@ -31,9 +36,11 @@ defineKitnElement<Props>('kitn-prompt-input', {
       disabled={props.disabled}
       loading={props.loading}
       suggestions={props.suggestions}
+      attachments={attachments()}
       onValueChange={handleChange}
       onSubmit={handleSubmit}
       onSuggestionClick={handleSuggestionClick}
+      onAttachmentsChange={setAttachments}
     />
   );
 });

package/src/primitives/highlighter.ts

@@ -14,14 +14,15 @@ type Loader = () => Promise<unknown>;
 
 /**
  * Minimal default language set — each a separate lazy chunk, loaded only on use.
- * Kept deliberately small; hosts add more via `configureCodeHighlighting({ languages })`.
+ * Kept deliberately small to keep the bundle lean; hosts add more at runtime via
+ * `configureCodeHighlighting({ languages })` (no rebuild needed — see that fn).
  */
 const DEFAULT_LANGUAGES: Record<string, Loader> = {
+  bash: () => import('@shikijs/langs/bash'),
   javascript: () => import('@shikijs/langs/javascript'),
-  typescript: () => import('@shikijs/langs/typescript'),
-  tsx: () => import('@shikijs/langs/tsx'),
+  html: () => import('@shikijs/langs/html'),
+  css: () => import('@shikijs/langs/css'),
   json: () => import('@shikijs/langs/json'),
-  bash: () => import('@shikijs/langs/bash'),
 };
 
 const DEFAULT_THEMES: Record<string, Loader> = {
@@ -31,8 +32,8 @@ const DEFAULT_THEMES: Record<string, Loader> = {
 
 const DEFAULT_ALIASES: Record<string, string> = {
   js: 'javascript',
-  ts: 'typescript',
   sh: 'bash',
+  shell: 'bash',
 };
 
 const FALLBACK_THEME = 'github-dark-dimmed';

package/src/stories/docs/Theming.mdx

@@ -31,21 +31,19 @@ Edit every token for **light and dark** modes and watch a real chat UI re-skin l
 <a
   href="?path=/story/theming-editor--editor"
   style={{
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: '0.45rem',
+    display: 'inline-block',
     background: 'var(--color-primary, #18181b)',
-    color: 'var(--color-primary-foreground, #fafafa)',
-    padding: '0.55rem 1rem',
     borderRadius: 'var(--radius-md, 0.5rem)',
-    fontWeight: 600,
-    fontSize: '0.875rem',
-    lineHeight: 1,
+    padding: '0.4rem 0.85rem',
     textDecoration: 'none',
-    boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
   }}
 >
-  Open the theme editor <span aria-hidden="true">→</span>
+  <span style={{
+    color: 'var(--color-primary-foreground, #fafafa)',
+    fontWeight: 600,
+    fontSize: '0.8125rem',
+    lineHeight: 1.3,
+  }}>Open the theme editor</span>
 </a>
 
 _(Opens full-screen — it needs more room than this docs column.)_