@kitnai/chat 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitnai/chat",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "SolidJS + Shadow-DOM web component kit for building AI chat interfaces.",
   "license": "MIT",

package/src/elements/chat.tsx

@@ -5,7 +5,10 @@ import { ChatContainer, ChatContainerContent, ChatContainerScrollAnchor } from '
 import { Message, MessageContent, MessageActions } from '../components/message';
 import { Reasoning, ReasoningTrigger, ReasoningContent } from '../components/reasoning';
 import { Tool } from '../components/tool';
+import { Attachments, Attachment, AttachmentPreview, AttachmentInfo } from '../components/attachments';
 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 type { ProseSize } from '../primitives/chat-config';
@@ -25,6 +28,10 @@ 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,
+};
+
 defineKitnElement<Props>('kitn-chat', {
   messages: [],
   value: undefined,
@@ -62,6 +69,18 @@ defineKitnElement<Props>('kitn-chat', {
                   <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'
@@ -80,7 +99,10 @@ defineKitnElement<Props>('kitn-chat', {
                             aria-label={ACTION_LABEL[a]}
                             onClick={() => dispatch('messageaction', { messageId: m.id, action: a })}
                           >
-                            <span class="text-xs">{ACTION_LABEL[a][0]}</span>
+                            {(() => {
+                              const Icon = ACTION_ICON[a];
+                              return <Icon class="size-3.5" />;
+                            })()}
                           </Button>
                         )}
                       </For>

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/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.)_