@kitnai/chat 0.1.0

package/src/primitives/highlighter.ts

@@ -0,0 +1,150 @@
+// On-demand code highlighter built on Shiki's fine-grained core.
+//
+// Nothing here loads until `highlight()` is first called with highlighting
+// enabled — so a component set that never renders a code block ships and runs
+// with ZERO Shiki bytes. When a code block does appear, only the core, the
+// JavaScript regex engine (no WASM), the one theme, and the one language grammar
+// it needs are dynamically imported, each as its own small lazy chunk.
+//
+// Hosts extend or disable this via `configureCodeHighlighting()`.
+
+import type { HighlighterCore } from 'shiki/core';
+
+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 })`.
+ */
+const DEFAULT_LANGUAGES: Record<string, Loader> = {
+  javascript: () => import('@shikijs/langs/javascript'),
+  typescript: () => import('@shikijs/langs/typescript'),
+  tsx: () => import('@shikijs/langs/tsx'),
+  json: () => import('@shikijs/langs/json'),
+  bash: () => import('@shikijs/langs/bash'),
+};
+
+const DEFAULT_THEMES: Record<string, Loader> = {
+  'github-dark-dimmed': () => import('@shikijs/themes/github-dark-dimmed'),
+  'github-light': () => import('@shikijs/themes/github-light'),
+};
+
+const DEFAULT_ALIASES: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  sh: 'bash',
+};
+
+const FALLBACK_THEME = 'github-dark-dimmed';
+
+export interface CodeHighlightingOptions {
+  /** Turn highlighting on/off globally. When false, code renders as plain text. */
+  enabled?: boolean;
+  /** Register/override language loaders, e.g. `{ ruby: () => import('@shikijs/langs/ruby') }`. */
+  languages?: Record<string, Loader>;
+  /** Register/override theme loaders. */
+  themes?: Record<string, Loader>;
+  /** Map short names to canonical language keys, e.g. `{ vue: 'html' }`. */
+  aliases?: Record<string, string>;
+}
+
+let enabled = true;
+let langLoaders: Record<string, Loader> = { ...DEFAULT_LANGUAGES };
+let themeLoaders: Record<string, Loader> = { ...DEFAULT_THEMES };
+let aliases: Record<string, string> = { ...DEFAULT_ALIASES };
+
+let highlighterPromise: Promise<HighlighterCore> | null = null;
+const loadedLangs = new Set<string>();
+const loadedThemes = new Set<string>();
+
+function getHighlighter(): Promise<HighlighterCore> {
+  if (!highlighterPromise) {
+    highlighterPromise = (async () => {
+      const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([
+        import('shiki/core'),
+        import('shiki/engine/javascript'),
+      ]);
+      return createHighlighterCore({
+        themes: [],
+        langs: [],
+        engine: createJavaScriptRegexEngine(),
+      });
+    })();
+  }
+  return highlighterPromise;
+}
+
+function resolveLang(lang: string): string {
+  return aliases[lang] ?? lang;
+}
+
+async function ensureLang(hl: HighlighterCore, lang: string): Promise<boolean> {
+  const name = resolveLang(lang);
+  if (loadedLangs.has(name)) return true;
+  const loader = langLoaders[name];
+  if (!loader) return false;
+  await hl.loadLanguage(loader() as never);
+  loadedLangs.add(name);
+  return true;
+}
+
+async function ensureTheme(hl: HighlighterCore, theme: string): Promise<boolean> {
+  if (loadedThemes.has(theme)) return true;
+  const loader = themeLoaders[theme];
+  if (!loader) return false;
+  await hl.loadTheme(loader() as never);
+  loadedThemes.add(theme);
+  return true;
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function plain(code: string): string {
+  return `<pre><code>${escapeHtml(code)}</code></pre>`;
+}
+
+/**
+ * Highlight `code` as `lang` with `theme`, returning HTML. Loads only what's
+ * needed, on demand. Falls back to escaped plain `<pre><code>` when highlighting
+ * is disabled, the language has no registered loader, or anything fails.
+ */
+export async function highlight(code: string, lang: string, theme: string): Promise<string> {
+  if (!enabled || !code) return plain(code);
+  try {
+    const hl = await getHighlighter();
+    const hasLang = await ensureLang(hl, lang);
+    if (!hasLang) return plain(code);
+    const useTheme = (await ensureTheme(hl, theme))
+      ? theme
+      : (await ensureTheme(hl, FALLBACK_THEME)) ? FALLBACK_THEME : null;
+    if (!useTheme) return plain(code);
+    return hl.codeToHtml(code, { lang: resolveLang(lang), theme: useTheme });
+  } catch {
+    return plain(code);
+  }
+}
+
+/** Register additional languages/themes/aliases, or disable highlighting entirely. */
+export function configureCodeHighlighting(options: CodeHighlightingOptions): void {
+  if (options.enabled !== undefined) enabled = options.enabled;
+  if (options.languages) langLoaders = { ...langLoaders, ...options.languages };
+  if (options.themes) themeLoaders = { ...themeLoaders, ...options.themes };
+  if (options.aliases) aliases = { ...aliases, ...options.aliases };
+}
+
+export function isCodeHighlightingEnabled(): boolean {
+  return enabled;
+}
+
+/** Test helper — reset the singleton and registries to defaults. */
+export function __resetCodeHighlightingForTests(): void {
+  enabled = true;
+  langLoaders = { ...DEFAULT_LANGUAGES };
+  themeLoaders = { ...DEFAULT_THEMES };
+  aliases = { ...DEFAULT_ALIASES };
+  highlighterPromise = null;
+  loadedLangs.clear();
+  loadedThemes.clear();
+}

package/src/primitives/use-auto-resize.ts

@@ -0,0 +1,31 @@
+import { onCleanup } from 'solid-js';
+
+interface UseAutoResizeOptions {
+  maxHeight?: number;
+}
+
+export function useAutoResize(options: UseAutoResizeOptions = {}) {
+  let textareaEl: HTMLTextAreaElement | undefined;
+
+  function resize() {
+    if (!textareaEl) return;
+    textareaEl.style.height = 'auto';
+    const scrollHeight = textareaEl.scrollHeight;
+    if (options.maxHeight && scrollHeight > options.maxHeight) {
+      textareaEl.style.height = `${options.maxHeight}px`;
+      textareaEl.style.overflowY = 'auto';
+    } else {
+      textareaEl.style.height = `${scrollHeight}px`;
+      textareaEl.style.overflowY = 'hidden';
+    }
+  }
+
+  function ref(el: HTMLTextAreaElement) {
+    textareaEl = el;
+    el.addEventListener('input', resize);
+    requestAnimationFrame(resize);
+    onCleanup(() => el.removeEventListener('input', resize));
+  }
+
+  return { ref, resize };
+}

package/src/primitives/use-stick-to-bottom.ts

@@ -0,0 +1,43 @@
+import { createSignal, onCleanup } from 'solid-js';
+
+const SCROLL_THRESHOLD = 50;
+
+export function useStickToBottom() {
+  const [isAtBottom, setIsAtBottom] = createSignal(true);
+  let containerEl: HTMLElement | undefined;
+  let shouldStick = true;
+
+  function checkIfAtBottom() {
+    if (!containerEl) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerEl;
+    const atBottom = scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD;
+    setIsAtBottom(atBottom);
+    shouldStick = atBottom;
+  }
+
+  function scrollToBottom(behavior: ScrollBehavior = 'smooth') {
+    if (!containerEl) return;
+    containerEl.scrollTo({ top: containerEl.scrollHeight, behavior });
+    shouldStick = true;
+    setIsAtBottom(true);
+  }
+
+  function onNewContent() {
+    if (shouldStick) {
+      requestAnimationFrame(() => scrollToBottom('instant'));
+    }
+  }
+
+  function ref(el: HTMLElement) {
+    containerEl = el;
+    el.addEventListener('scroll', checkIfAtBottom, { passive: true });
+    const observer = new MutationObserver(onNewContent);
+    observer.observe(el, { childList: true, subtree: true, characterData: true });
+    onCleanup(() => {
+      el.removeEventListener('scroll', checkIfAtBottom);
+      observer.disconnect();
+    });
+  }
+
+  return { ref, isAtBottom, scrollToBottom };
+}

package/src/primitives/use-text-stream.ts

@@ -0,0 +1,112 @@
+import { createSignal, onCleanup } from 'solid-js';
+
+export interface UseTextStreamOptions {
+  mode: 'typewriter' | 'fade';
+  speed?: number;
+  characterChunkSize?: number;
+  fadeDuration?: number;
+}
+
+export interface TextStreamSegment {
+  text: string;
+  index: number;
+}
+
+export function useTextStream(options: UseTextStreamOptions) {
+  const speed = options.speed ?? 20;
+  const chunkSize = options.characterChunkSize ?? 3;
+
+  const [displayedText, setDisplayedText] = createSignal('');
+  const [isComplete, setIsComplete] = createSignal(true);
+  const [segments, setSegments] = createSignal<TextStreamSegment[]>([]);
+
+  let fullText = '';
+  let charIndex = 0;
+  let intervalId: ReturnType<typeof setInterval> | undefined;
+  let isPaused = false;
+  let asyncIterator: AsyncIterator<string> | undefined;
+
+  function clearInterval_() {
+    if (intervalId !== undefined) {
+      clearInterval(intervalId);
+      intervalId = undefined;
+    }
+  }
+
+  function typewriterTick() {
+    if (isPaused) return;
+    if (charIndex >= fullText.length) {
+      if (!asyncIterator) {
+        clearInterval_();
+        setIsComplete(true);
+      }
+      return;
+    }
+    const end = Math.min(charIndex + chunkSize, fullText.length);
+    charIndex = end;
+    setDisplayedText(fullText.slice(0, charIndex));
+  }
+
+  async function consumeAsyncIterable(source: AsyncIterable<string>) {
+    asyncIterator = source[Symbol.asyncIterator]();
+    try {
+      while (true) {
+        const { value, done } = await asyncIterator.next();
+        if (done) break;
+        if (value) {
+          fullText += value;
+          setSegments((prev) => [...prev, { text: value, index: prev.length }]);
+        }
+      }
+    } finally {
+      asyncIterator = undefined;
+    }
+  }
+
+  function startStreaming(source: string | AsyncIterable<string>) {
+    reset();
+    setIsComplete(false);
+
+    if (typeof source === 'string') {
+      fullText = source;
+      if (options.mode === 'typewriter') {
+        intervalId = setInterval(typewriterTick, speed);
+      } else {
+        // Deliver all segments at once — CSS animation-delay handles staggered fade-in
+        const words = source.split(/(\s+)/).filter(Boolean);
+        setSegments(words.map((text, index) => ({ text, index })));
+        setDisplayedText(source);
+        // isComplete fires after animation has time to play
+        // (segments count * delay per segment from ResponseStream)
+      }
+    } else {
+      if (options.mode === 'typewriter') {
+        intervalId = setInterval(typewriterTick, speed);
+      }
+      consumeAsyncIterable(source).then(() => {
+        if (options.mode === 'fade') {
+          setDisplayedText(fullText);
+          setIsComplete(true);
+        }
+      });
+    }
+  }
+
+  function pause() { isPaused = true; }
+  function resume() { isPaused = false; }
+
+  function reset() {
+    clearInterval_();
+    fullText = '';
+    charIndex = 0;
+    isPaused = false;
+    asyncIterator = undefined;
+    setDisplayedText('');
+    setIsComplete(true);
+    setSegments([]);
+  }
+
+  onCleanup(() => clearInterval_());
+
+  return { displayedText, isComplete, segments, startStreaming, pause, resume, reset };
+}

package/src/primitives/use-voice-recorder.ts

@@ -0,0 +1,50 @@
+import { createSignal, onCleanup } from 'solid-js';
+
+export interface UseVoiceRecorderOptions {
+  mimeType?: string;
+}
+
+export function useVoiceRecorder(options: UseVoiceRecorderOptions = {}) {
+  const mimeType = options.mimeType ?? 'audio/webm;codecs=opus';
+  const [isRecording, setIsRecording] = createSignal(false);
+  const [error, setError] = createSignal<string | null>(null);
+
+  let mediaRecorder: MediaRecorder | undefined;
+  let chunks: Blob[] = [];
+  let resolveBlob: ((blob: Blob) => void) | undefined;
+
+  async function start(): Promise<Blob> {
+    setError(null);
+    chunks = [];
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      mediaRecorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunks.push(e.data);
+      };
+      mediaRecorder.onstop = () => {
+        const blob = new Blob(chunks, { type: mimeType });
+        stream.getTracks().forEach((t) => t.stop());
+        setIsRecording(false);
+        resolveBlob?.(blob);
+      };
+      mediaRecorder.start();
+      setIsRecording(true);
+      return new Promise<Blob>((resolve) => { resolveBlob = resolve; });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Microphone access denied');
+      setIsRecording(false);
+      throw err;
+    }
+  }
+
+  function stop() {
+    if (mediaRecorder && mediaRecorder.state === 'recording') {
+      mediaRecorder.stop();
+    }
+  }
+
+  onCleanup(() => stop());
+
+  return { isRecording, error, start, stop };
+}

package/src/stories/chat-panel-layout.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal } from 'solid-js';
+import { Message, MessageAvatar, MessageContent, MessageActions } from '../components/message';
+import { ChatContainer } from '../components/chat-container';
+import { ChatConfig } from '../primitives/chat-config';
+import { PromptInput, PromptInputTextarea, PromptInputActions } from '../components/prompt-input';
+import { Button } from '../ui/button';
+import { ScrollButton } from '../components/scroll-button';
+import { Copy, ArrowUp } from 'lucide-solid';
+
+const meta: Meta = {
+  title: 'Patterns/Chat Panel Layout',
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+const assistantMsg1 = `The document is a transcript of a YouTube video by Cole Medin, where he discusses building a self-evolving memory system for coding agents using Large Language Models (LLMs), inspired by Andre Karpathy's ideas on LLM knowledge bases.`;
+
+const assistantMsg2 = `Short answer: **it has to be a separate browser window** (or tab/iframe), not just a normal component in your application.
+
+Here's why:
+
+- The OAuth flow requires redirecting to the provider's login page
+- The callback URL needs to be a real URL the browser can navigate to
+- Security policies prevent embedding auth pages in iframes`;
+
+const userMsg1 = 'What is this video about?';
+const userMsg2 = 'And from what I understand, does that need to be another browser window pop-up that happens, or can I just have a component that does that in my application?';
+
+function CopyButton(props: { text: string }) {
+  return (
+    <button onClick={() => navigator.clipboard.writeText(props.text)}>
+      <Copy size={14} />
+    </button>
+  );
+}
+
+/**
+ * Reference layout — uses variant props, no custom class overrides.
+ */
+export const ChatGPTStyle: Story = {
+  render: () => {
+    const [input, setInput] = createSignal('');
+    return (
+      <ChatConfig proseSize="base">
+        <div
+          style={{ width: '420px', height: '700px' }}
+          class="flex flex-col overflow-hidden rounded-lg bg-card"
+        >
+          {/* Header */}
+          <div class="px-3 py-2.5 bg-muted/30 text-sm font-semibold text-foreground flex-shrink-0 flex items-center justify-between">
+            <span>Chat Panel</span>
+            <span class="text-xs text-muted-foreground">GPT-4o Mini</span>
+          </div>
+
+          {/* Messages */}
+          <ChatContainer class="flex-1 min-w-0 px-4 py-3 space-y-4">
+              {/* Assistant message 1 — with avatar */}
+              <Message>
+                <MessageAvatar src="" alt="AI" fallback="AI" />
+                <div class="flex w-full flex-col min-w-0">
+                  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+                    {assistantMsg1}
+                  </MessageContent>
+                  <MessageActions>
+                    <CopyButton text={assistantMsg1} />
+                  </MessageActions>
+                </div>
+              </Message>
+
+              {/* User message 1 */}
+              <Message class="group flex-col items-end">
+                <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
+                  {userMsg1}
+                </MessageContent>
+                <MessageActions class="opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+                  <CopyButton text={userMsg1} />
+                </MessageActions>
+              </Message>
+
+              {/* Assistant message 2 — with avatar, markdown */}
+              <Message>
+                <MessageAvatar src="" alt="AI" fallback="AI" />
+                <div class="flex w-full flex-col min-w-0">
+                  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+                    {assistantMsg2}
+                  </MessageContent>
+                  <MessageActions>
+                    <CopyButton text={assistantMsg2} />
+                  </MessageActions>
+                </div>
+              </Message>
+
+              {/* User message 2 — longer */}
+              <Message class="group flex-col items-end">
+                <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
+                  {userMsg2}
+                </MessageContent>
+                <MessageActions class="opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+                  <CopyButton text={userMsg2} />
+                </MessageActions>
+              </Message>
+
+              {/* Assistant message 3 — with avatar, short */}
+              <Message>
+                <MessageAvatar src="" alt="AI" fallback="AI" />
+                <div class="flex w-full flex-col min-w-0">
+                  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+                    Got it — let me know if you have more questions!
+                  </MessageContent>
+                  <MessageActions>
+                    <CopyButton text="Got it — let me know if you have more questions!" />
+                  </MessageActions>
+                </div>
+              </Message>
+            <ScrollButton />
+          </ChatContainer>
+
+          {/* Input */}
+          <div class="px-3 pb-3 pt-1 flex-shrink-0">
+            <PromptInput
+              value={input()}
+              onValueChange={setInput}
+              onSubmit={() => setInput('')}
+            >
+              <PromptInputTextarea placeholder="Ask about this page..." 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">
+                <Button
+                  size="icon-sm"
+                  class="rounded-full"
+                  disabled={!input().trim()}
+                >
+                  <ArrowUp class="size-4" />
+                </Button>
+              </PromptInputActions>
+            </PromptInput>
+          </div>
+        </div>
+      </ChatConfig>
+    );
+  },
+};