glirastes 0.2.1 → 0.3.1

package/dist/cjs/react/provider/chat-context.d.ts

@@ -0,0 +1,84 @@
+import type { CSSProperties } from 'react';
+import type { ChatMessage, PendingApproval, MentionResult, MentionData, MentionConfig, ChatClassNames, ChatComponents, ChatLocale, SuggestionsConfig, TruncationInfo, ToolResultDisplayConfig, ToolLabelConfig, VoiceInputConfig, PipelineStepReport, PipelineState, PipelineMessageTranslator, StepSummaryFormatter, SessionSummary } from '../types.js';
+type MentionTrigger = '@' | '/' | null;
+export interface ChatContextValue {
+    classNames: ChatClassNames;
+    components: ChatComponents;
+    locale: ChatLocale;
+    /**
+     * Resolved theme vars (CSS custom properties). Spread this onto the
+     * `style` prop of any widget root (`data-component="ai-chat-panel"`,
+     * `chat-window`, `ai-trigger-button`) to apply the `theme` prop.
+     */
+    themeVars: CSSProperties;
+    /**
+     * Optional hint for themes that require special CSS treatment (e.g.
+     * `liquid-glass` needs `backdrop-filter`). Apply as
+     * `data-theme-effect={themeEffect}` on widget roots.
+     */
+    themeEffect: string | undefined;
+    suggestions: SuggestionsConfig;
+    toolLabels: ToolLabelConfig;
+    toolResults: ToolResultDisplayConfig;
+    voice: VoiceInputConfig;
+    mentionConfig?: MentionConfig;
+    pipelineMessageTranslator?: PipelineMessageTranslator;
+    stepSummaryFormatter?: StepSummaryFormatter;
+    messages: ChatMessage[];
+    isLoading: boolean;
+    error: Error | null;
+    send: (message: string) => void;
+    stop: () => void;
+    clear: () => void;
+    loadMore: () => void;
+    hasMore: boolean;
+    pipelineSteps: PipelineStepReport[];
+    pipelineState: PipelineState | null;
+    pendingApprovals: PendingApproval[];
+    approve: (id: string) => void;
+    reject: (id: string) => void;
+    isProcessingApproval: boolean;
+    approvalDescription: (toolName: string, approvalId: string, args: unknown) => PendingApproval;
+    truncation: TruncationInfo | null;
+    continueTruncation: () => void;
+    dismissTruncation: () => void;
+    mentionQuery: string;
+    mentionTrigger: MentionTrigger;
+    mentionResults: MentionResult[];
+    setMentionSearch: (query: string, trigger: MentionTrigger) => void;
+    clearMentionSearch: () => void;
+    selectMention: (result: MentionResult) => void;
+    activeMentions: MentionData[];
+    addActiveMention: (mention: MentionData) => void;
+    removeActiveMention: (mentionId: string) => void;
+    clearActiveMentions: () => void;
+    isMentionSearching: boolean;
+    hasMentions: boolean;
+    suggestionChips: string[];
+    selectSuggestion: (suggestion: string) => void;
+    refreshSuggestions: () => void;
+    isSuggestionsGenerating: boolean;
+    /** All known sessions; empty when the consumer does not supply `session.list`. */
+    sessions: SessionSummary[];
+    /** Currently-active session id. Defaults to `'default'` when no session config is given. */
+    activeSessionId: string;
+    /** `true` when the consumer provided `list`, `create`, and `remove`. */
+    sessionsSupported: boolean;
+    /** `true` while session CRUD or loading is in flight. */
+    isSessionsLoading: boolean;
+    /** Switch to an existing session. Reloads messages from `session.load`. */
+    switchSession: (id: string) => Promise<void>;
+    /** Create a new session, switch to it, refresh the list. */
+    createSession: (opts?: {
+        title?: string;
+    }) => Promise<SessionSummary | null>;
+    /** Remove a session. If it was active, falls back to the first remaining session. */
+    removeSession: (id: string) => Promise<void>;
+    /** Rename a session. */
+    renameSession: (id: string, title: string) => Promise<void>;
+    /** Manually re-fetch the session list (e.g. after external mutation). */
+    refreshSessions: () => Promise<void>;
+}
+export declare const ChatContext: import("react").Context<ChatContextValue | null>;
+export declare function useChatContext(): ChatContextValue;
+export {};

package/dist/cjs/react/provider/chat-context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatContext = void 0;
+exports.useChatContext = useChatContext;
+const react_1 = require("react");
+exports.ChatContext = (0, react_1.createContext)(null);
+function useChatContext() {
+    const context = (0, react_1.useContext)(exports.ChatContext);
+    if (!context) {
+        throw new Error('useChatContext must be used within an <AiChatProvider>');
+    }
+    return context;
+}

package/dist/cjs/react/template.d.ts

@@ -0,0 +1,84 @@
+import type { AiChatPanelProps, ChatInputProps, MessageBubbleProps, MessageListProps } from './types.js';
+type ClassDictionary = Record<string, boolean | null | undefined>;
+type ClassArray = ClassValue[];
+type ClassPrimitive = string | number | null | undefined | false;
+export type ClassValue = ClassPrimitive | ClassDictionary | ClassArray;
+export declare function cn(...values: ClassValue[]): string;
+export declare const defaultTheme: {
+    readonly colors: {
+        readonly primary: "#6366f1";
+        readonly background: "#ffffff";
+        readonly bubbleUser: "#e0e7ff";
+        readonly bubbleAssistant: "#f3f4f6";
+        readonly border: "#e5e7eb";
+        readonly text: "#111827";
+        readonly textMuted: "#6b7280";
+    };
+    readonly radius: {
+        readonly panel: "0.75rem";
+        readonly bubble: "0.75rem";
+        readonly input: "0.5rem";
+        readonly chip: "9999px";
+    };
+    readonly spacing: {
+        readonly panelPadding: "1rem";
+        readonly bubbleGap: "0.75rem";
+        readonly inputPadding: "0.75rem";
+    };
+};
+export type ChatTheme = typeof defaultTheme;
+export declare const tailwindThemeExtension: {
+    readonly colors: {
+        readonly 'chat-primary': "rgb(var(--chat-primary) / <alpha-value>)";
+        readonly 'chat-background': "rgb(var(--chat-background) / <alpha-value>)";
+        readonly 'chat-bubble-user': "rgb(var(--chat-bubble-user) / <alpha-value>)";
+        readonly 'chat-bubble-assistant': "rgb(var(--chat-bubble-assistant) / <alpha-value>)";
+        readonly 'chat-border': "rgb(var(--chat-border) / <alpha-value>)";
+        readonly 'chat-text': "rgb(var(--chat-text) / <alpha-value>)";
+        readonly 'chat-text-muted': "rgb(var(--chat-text-muted) / <alpha-value>)";
+    };
+    readonly borderRadius: {
+        readonly 'chat-panel': "0.75rem";
+        readonly 'chat-bubble': "0.75rem";
+        readonly 'chat-input': "0.5rem";
+        readonly 'chat-chip': "9999px";
+    };
+};
+export interface StyledMessageBubbleProps extends MessageBubbleProps {
+    classNames?: {
+        base?: string;
+        user?: string;
+        assistant?: string;
+        system?: string;
+    };
+}
+export declare function StyledMessageBubble({ message, className, classNames, }: StyledMessageBubbleProps): import("react/jsx-runtime").JSX.Element;
+export interface StyledMessageListProps extends MessageListProps {
+    classNames?: {
+        root?: string;
+        loadMore?: string;
+        bubble?: string;
+    };
+}
+export declare function StyledMessageList({ className, classNames }: StyledMessageListProps): import("react/jsx-runtime").JSX.Element;
+export interface StyledChatInputProps extends ChatInputProps {
+    classNames?: {
+        root?: string;
+        textarea?: string;
+        sendButton?: string;
+        stopButton?: string;
+    };
+}
+export declare function StyledChatInput({ className, onSubmit, classNames, }: StyledChatInputProps): import("react/jsx-runtime").JSX.Element;
+export interface StyledChatPanelProps extends AiChatPanelProps {
+    classNames?: {
+        root?: string;
+        errorBanner?: string;
+        emptyState?: string;
+        suggestionBar?: string;
+        suggestionChip?: string;
+        mentionChip?: string;
+    };
+}
+export declare function StyledChatPanel({ className, classNames }: StyledChatPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/react/template.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tailwindThemeExtension = exports.defaultTheme = void 0;
+exports.cn = cn;
+exports.StyledMessageBubble = StyledMessageBubble;
+exports.StyledMessageList = StyledMessageList;
+exports.StyledChatInput = StyledChatInput;
+exports.StyledChatPanel = StyledChatPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ai_chat_panel_js_1 = require("./components/ai-chat-panel.js");
+const chat_input_js_1 = require("./components/chat-input.js");
+const message_bubble_js_1 = require("./components/message-bubble.js");
+const message_list_js_1 = require("./components/message-list.js");
+function appendClass(output, value) {
+    if (!value)
+        return;
+    if (typeof value === 'string' || typeof value === 'number') {
+        output.push(String(value));
+        return;
+    }
+    if (Array.isArray(value)) {
+        for (const item of value)
+            appendClass(output, item);
+        return;
+    }
+    for (const [key, enabled] of Object.entries(value)) {
+        if (enabled)
+            output.push(key);
+    }
+}
+function cn(...values) {
+    const output = [];
+    for (const value of values)
+        appendClass(output, value);
+    return output.join(' ');
+}
+// ---------------------------------------------------------------------------
+// Theme tokens
+// ---------------------------------------------------------------------------
+exports.defaultTheme = {
+    colors: {
+        primary: '#6366f1',
+        background: '#ffffff',
+        bubbleUser: '#e0e7ff',
+        bubbleAssistant: '#f3f4f6',
+        border: '#e5e7eb',
+        text: '#111827',
+        textMuted: '#6b7280',
+    },
+    radius: {
+        panel: '0.75rem',
+        bubble: '0.75rem',
+        input: '0.5rem',
+        chip: '9999px',
+    },
+    spacing: {
+        panelPadding: '1rem',
+        bubbleGap: '0.75rem',
+        inputPadding: '0.75rem',
+    },
+};
+exports.tailwindThemeExtension = {
+    colors: {
+        'chat-primary': 'rgb(var(--chat-primary) / <alpha-value>)',
+        'chat-background': 'rgb(var(--chat-background) / <alpha-value>)',
+        'chat-bubble-user': 'rgb(var(--chat-bubble-user) / <alpha-value>)',
+        'chat-bubble-assistant': 'rgb(var(--chat-bubble-assistant) / <alpha-value>)',
+        'chat-border': 'rgb(var(--chat-border) / <alpha-value>)',
+        'chat-text': 'rgb(var(--chat-text) / <alpha-value>)',
+        'chat-text-muted': 'rgb(var(--chat-text-muted) / <alpha-value>)',
+    },
+    borderRadius: {
+        'chat-panel': '0.75rem',
+        'chat-bubble': '0.75rem',
+        'chat-input': '0.5rem',
+        'chat-chip': '9999px',
+    },
+};
+function StyledMessageBubble({ message, className, classNames, }) {
+    return ((0, jsx_runtime_1.jsx)(message_bubble_js_1.MessageBubble, { message: message, className: cn('max-w-[85%] rounded-xl px-4 py-3 text-sm leading-relaxed shadow-sm', classNames?.base, message.role === 'user' && 'ml-auto bg-[rgb(var(--chat-bubble-user,224_231_255))] text-right', message.role === 'user' && classNames?.user, message.role === 'assistant' && 'mr-auto bg-[rgb(var(--chat-bubble-assistant,243_244_246))] text-left', message.role === 'assistant' && classNames?.assistant, message.role === 'system' && 'mx-auto bg-[rgb(var(--chat-bubble-assistant,243_244_246))] text-center', message.role === 'system' && classNames?.system, className) }));
+}
+function StyledMessageList({ className, classNames }) {
+    return ((0, jsx_runtime_1.jsx)(message_list_js_1.MessageList, { className: cn('flex-1 min-h-0 overflow-y-auto px-4 py-3', '[&>[data-action=load-more]]:mx-auto [&>[data-action=load-more]]:mb-3', '[&>[data-action=load-more]]:rounded-md [&>[data-action=load-more]]:border', '[&>[data-action=load-more]]:border-[rgb(var(--chat-border,229_231_235))]', '[&>[data-action=load-more]]:px-3 [&>[data-action=load-more]]:py-1.5', '[&>[data-action=load-more]]:text-xs [&>[data-action=load-more]]:font-medium', '[&>[data-component=message-bubble]]:mb-3', classNames?.root, classNames?.loadMore, classNames?.bubble, className) }));
+}
+function StyledChatInput({ className, onSubmit, classNames, }) {
+    return ((0, jsx_runtime_1.jsx)(chat_input_js_1.ChatInput, { className: cn('shrink-0 border-t border-[rgb(var(--chat-border,229_231_235))]', 'bg-[rgb(var(--chat-background,255_255_255))] px-4 py-3', 'flex items-end gap-2', '[&_textarea]:min-h-[44px] [&_textarea]:max-h-[160px] [&_textarea]:flex-1 [&_textarea]:resize-none', '[&_textarea]:rounded-lg [&_textarea]:border [&_textarea]:border-[rgb(var(--chat-border,229_231_235))]', '[&_textarea]:bg-transparent [&_textarea]:px-3 [&_textarea]:py-2.5', '[&_textarea]:text-[rgb(var(--chat-text,17_24_39))]', '[&_textarea]:placeholder:text-[rgb(var(--chat-text-muted,107_114_128))]', '[&_textarea]:outline-none [&_textarea]:focus:ring-2 [&_textarea]:focus:ring-indigo-200', '[&_[data-action=send]]:rounded-lg [&_[data-action=send]]:bg-[rgb(var(--chat-primary,99_102_241))]', '[&_[data-action=send]]:px-3 [&_[data-action=send]]:py-2 [&_[data-action=send]]:text-sm', '[&_[data-action=send]]:font-medium [&_[data-action=send]]:text-white', '[&_[data-action=send]]:disabled:cursor-not-allowed [&_[data-action=send]]:disabled:opacity-50', '[&_[data-action=stop]]:rounded-lg [&_[data-action=stop]]:border', '[&_[data-action=stop]]:border-[rgb(var(--chat-border,229_231_235))]', '[&_[data-action=stop]]:px-3 [&_[data-action=stop]]:py-2 [&_[data-action=stop]]:text-sm', classNames?.root, classNames?.textarea, classNames?.sendButton, classNames?.stopButton, className), onSubmit: onSubmit }));
+}
+function StyledChatPanel({ className, classNames }) {
+    return ((0, jsx_runtime_1.jsx)(ai_chat_panel_js_1.AiChatPanel, { className: cn('flex h-full min-h-0 flex-col overflow-hidden rounded-xl border', 'border-[rgb(var(--chat-border,229_231_235))]', 'bg-[rgb(var(--chat-background,255_255_255))] text-[rgb(var(--chat-text,17_24_39))]', 'shadow-sm', '[&_[data-component=error-banner]]:border-b [&_[data-component=error-banner]]:border-red-200', '[&_[data-component=error-banner]]:bg-red-50 [&_[data-component=error-banner]]:px-4', '[&_[data-component=error-banner]]:py-2.5 [&_[data-component=error-banner]]:text-sm', '[&_[data-component=empty-state]]:flex-1 [&_[data-component=empty-state]]:grid', '[&_[data-component=empty-state]]:place-items-center [&_[data-component=empty-state]]:px-6', '[&_[data-component=empty-state]]:text-sm [&_[data-component=empty-state]]:text-[rgb(var(--chat-text-muted,107_114_128))]', '[&_[data-component=suggestion-bar]]:px-4 [&_[data-component=suggestion-bar]]:pb-2', '[&_[data-component=suggestion-chip]]:rounded-full', '[&_[data-component=suggestion-chip]]:bg-[rgb(var(--chat-primary,99_102_241))]', '[&_[data-component=suggestion-chip]]:px-3 [&_[data-component=suggestion-chip]]:py-1.5', '[&_[data-component=suggestion-chip]]:text-xs [&_[data-component=suggestion-chip]]:font-medium', '[&_[data-component=suggestion-chip]]:text-white', '[&_[data-component=mention-chip]]:inline-flex [&_[data-component=mention-chip]]:items-center', '[&_[data-component=mention-chip]]:rounded-full [&_[data-component=mention-chip]]:bg-slate-100', '[&_[data-component=mention-chip]]:px-2.5 [&_[data-component=mention-chip]]:py-1', '[&_[data-component=mention-chip]]:text-xs', classNames?.root, classNames?.errorBanner, classNames?.emptyState, classNames?.suggestionBar, classNames?.suggestionChip, classNames?.mentionChip, className) }));
+}

package/dist/cjs/react/themes.d.ts

@@ -0,0 +1,24 @@
+import type { ChatTheme, ChatThemeColors, ChatThemePreset } from './types.js';
+interface ResolvedTheme {
+    colors: Required<ChatThemeColors>;
+    radius: string;
+    radiusSmall: string;
+    fontFamily: string;
+    /** Optional effect hint applied as `data-theme-effect` on widget roots. */
+    effect?: 'glass';
+}
+declare const PRESETS: Record<ChatThemePreset, ResolvedTheme>;
+export declare const DEFAULT_THEME_PRESET: ChatThemePreset;
+/** Returns the `data-theme-effect` attribute value for a theme, or `undefined`. */
+export declare function getThemeEffect(theme?: ChatTheme): string | undefined;
+/**
+ * Resolve a `ChatTheme` prop into a plain `Record<string, string>` of
+ * CSS custom properties that can be spread onto a component `style` prop.
+ *
+ * ```tsx
+ * const vars = getThemeVars(theme);
+ * <div style={vars}>…</div>
+ * ```
+ */
+export declare function getThemeVars(theme?: ChatTheme): Record<string, string>;
+export { PRESETS as CHAT_THEME_PRESETS };

package/dist/cjs/react/themes.js

@@ -0,0 +1,273 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHAT_THEME_PRESETS = exports.DEFAULT_THEME_PRESET = void 0;
+exports.getThemeEffect = getThemeEffect;
+exports.getThemeVars = getThemeVars;
+const DEFAULT_FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+const MONO_FONT = '"JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+const PROFESSIONAL_LIGHTBLUE = {
+    colors: {
+        primary: '#6366f1',
+        primarySoft: '#818cf8',
+        primaryTint: 'rgba(99, 102, 241, 0.12)',
+        bg: '#ffffff',
+        bgMuted: '#f9fafb',
+        bubbleUser: '#e0e7ff',
+        bubbleAssistant: '#f3f4f6',
+        text: '#111827',
+        textMuted: '#6b7280',
+        border: '#e5e7eb',
+        danger: '#dc2626',
+    },
+    radius: '0.875rem',
+    radiusSmall: '0.5rem',
+    fontFamily: DEFAULT_FONT,
+};
+const PROFESSIONAL_DARK = {
+    colors: {
+        primary: '#818cf8',
+        primarySoft: '#a78bfa',
+        primaryTint: 'rgba(129, 140, 248, 0.18)',
+        bg: '#0f172a',
+        bgMuted: '#1e293b',
+        bubbleUser: '#312e81',
+        bubbleAssistant: '#1e293b',
+        text: '#f8fafc',
+        textMuted: '#94a3b8',
+        border: '#334155',
+        danger: '#f87171',
+    },
+    radius: '0.875rem',
+    radiusSmall: '0.5rem',
+    fontFamily: DEFAULT_FONT,
+};
+const MINIMAL_WHITE = {
+    colors: {
+        primary: '#111827',
+        primarySoft: '#374151',
+        primaryTint: 'rgba(17, 24, 39, 0.06)',
+        bg: '#ffffff',
+        bgMuted: '#fafafa',
+        bubbleUser: '#f3f4f6',
+        bubbleAssistant: '#fafafa',
+        text: '#111827',
+        textMuted: '#6b7280',
+        border: '#e5e7eb',
+        danger: '#991b1b',
+    },
+    radius: '0.5rem',
+    radiusSmall: '0.375rem',
+    fontFamily: DEFAULT_FONT,
+};
+const VIBRANT_INDIGO = {
+    colors: {
+        primary: '#8b5cf6',
+        primarySoft: '#ec4899',
+        primaryTint: 'rgba(139, 92, 246, 0.16)',
+        bg: '#ffffff',
+        bgMuted: '#faf5ff',
+        bubbleUser: '#ede9fe',
+        bubbleAssistant: '#fdf2f8',
+        text: '#1e1b4b',
+        textMuted: '#6b21a8',
+        border: '#e9d5ff',
+        danger: '#dc2626',
+    },
+    radius: '1.25rem',
+    radiusSmall: '0.75rem',
+    fontFamily: DEFAULT_FONT,
+};
+const TERMINAL_GREEN = {
+    colors: {
+        primary: '#22c55e',
+        primarySoft: '#4ade80',
+        primaryTint: 'rgba(34, 197, 94, 0.15)',
+        bg: '#000000',
+        bgMuted: '#0a0a0a',
+        bubbleUser: '#052e16',
+        bubbleAssistant: '#0a0a0a',
+        text: '#4ade80',
+        textMuted: '#15803d',
+        border: '#14532d',
+        danger: '#ef4444',
+    },
+    radius: '0.25rem',
+    radiusSmall: '0.125rem',
+    fontFamily: MONO_FONT,
+};
+/** Translucent frosted-glass look — pairs with a blurred background. */
+const LIQUID_GLASS = {
+    colors: {
+        primary: '#60a5fa',
+        primarySoft: '#c4b5fd',
+        primaryTint: 'rgba(96, 165, 250, 0.18)',
+        bg: 'rgba(255, 255, 255, 0.72)',
+        bgMuted: 'rgba(255, 255, 255, 0.55)',
+        bubbleUser: 'rgba(96, 165, 250, 0.22)',
+        bubbleAssistant: 'rgba(255, 255, 255, 0.82)',
+        text: '#0f172a',
+        textMuted: '#475569',
+        border: 'rgba(255, 255, 255, 0.6)',
+        danger: '#ef4444',
+    },
+    radius: '1.5rem',
+    radiusSmall: '0.875rem',
+    fontFamily: DEFAULT_FONT,
+    effect: 'glass',
+};
+const PURPLE_HAZE = {
+    colors: {
+        primary: '#a855f7',
+        primarySoft: '#d946ef',
+        primaryTint: 'rgba(168, 85, 247, 0.18)',
+        bg: '#1a0b2e',
+        bgMuted: '#2a1348',
+        bubbleUser: '#4c1d95',
+        bubbleAssistant: '#2a1348',
+        text: '#f5f3ff',
+        textMuted: '#c4b5fd',
+        border: '#4c1d95',
+        danger: '#fb7185',
+    },
+    radius: '1rem',
+    radiusSmall: '0.625rem',
+    fontFamily: DEFAULT_FONT,
+};
+const BLUE_DREAM = {
+    colors: {
+        primary: '#3b82f6',
+        primarySoft: '#0ea5e9',
+        primaryTint: 'rgba(59, 130, 246, 0.14)',
+        bg: '#f0f9ff',
+        bgMuted: '#e0f2fe',
+        bubbleUser: '#dbeafe',
+        bubbleAssistant: '#ffffff',
+        text: '#0c4a6e',
+        textMuted: '#0369a1',
+        border: '#bae6fd',
+        danger: '#dc2626',
+    },
+    radius: '1.125rem',
+    radiusSmall: '0.625rem',
+    fontFamily: DEFAULT_FONT,
+};
+const SUNSET_ORANGE = {
+    colors: {
+        primary: '#f97316',
+        primarySoft: '#ec4899',
+        primaryTint: 'rgba(249, 115, 22, 0.16)',
+        bg: '#fffbeb',
+        bgMuted: '#fef3c7',
+        bubbleUser: '#fed7aa',
+        bubbleAssistant: '#ffffff',
+        text: '#7c2d12',
+        textMuted: '#b45309',
+        border: '#fde68a',
+        danger: '#dc2626',
+    },
+    radius: '1.25rem',
+    radiusSmall: '0.75rem',
+    fontFamily: DEFAULT_FONT,
+};
+const OCEAN_TEAL = {
+    colors: {
+        primary: '#14b8a6',
+        primarySoft: '#06b6d4',
+        primaryTint: 'rgba(20, 184, 166, 0.14)',
+        bg: '#042f2e',
+        bgMuted: '#134e4a',
+        bubbleUser: '#115e59',
+        bubbleAssistant: '#134e4a',
+        text: '#ccfbf1',
+        textMuted: '#5eead4',
+        border: '#134e4a',
+        danger: '#fb7185',
+    },
+    radius: '0.875rem',
+    radiusSmall: '0.5rem',
+    fontFamily: DEFAULT_FONT,
+};
+/** Pure monochrome. Black background, stark white text, zero color. */
+const MIDNIGHT_MONO = {
+    colors: {
+        primary: '#ffffff',
+        primarySoft: '#d4d4d4',
+        primaryTint: 'rgba(255, 255, 255, 0.08)',
+        bg: '#0a0a0a',
+        bgMuted: '#171717',
+        bubbleUser: '#262626',
+        bubbleAssistant: '#171717',
+        text: '#fafafa',
+        textMuted: '#a3a3a3',
+        border: '#262626',
+        danger: '#f87171',
+    },
+    radius: '0.75rem',
+    radiusSmall: '0.375rem',
+    fontFamily: DEFAULT_FONT,
+};
+const PRESETS = {
+    'professional-lightblue': PROFESSIONAL_LIGHTBLUE,
+    'professional-dark': PROFESSIONAL_DARK,
+    'minimal-white': MINIMAL_WHITE,
+    'vibrant-indigo': VIBRANT_INDIGO,
+    'terminal-green': TERMINAL_GREEN,
+    'liquid-glass': LIQUID_GLASS,
+    'purple-haze': PURPLE_HAZE,
+    'blue-dream': BLUE_DREAM,
+    'sunset-orange': SUNSET_ORANGE,
+    'ocean-teal': OCEAN_TEAL,
+    'midnight-mono': MIDNIGHT_MONO,
+};
+exports.CHAT_THEME_PRESETS = PRESETS;
+exports.DEFAULT_THEME_PRESET = 'professional-lightblue';
+// ---------------------------------------------------------------------------
+// Resolution
+// ---------------------------------------------------------------------------
+function resolve(theme) {
+    if (!theme)
+        return PROFESSIONAL_LIGHTBLUE;
+    if (typeof theme === 'string')
+        return PRESETS[theme] ?? PROFESSIONAL_LIGHTBLUE;
+    const override = theme;
+    const base = (override.preset && PRESETS[override.preset]) ?? PROFESSIONAL_LIGHTBLUE;
+    return {
+        colors: { ...base.colors, ...(override.colors ?? {}) },
+        radius: override.radius ?? base.radius,
+        radiusSmall: override.radiusSmall ?? base.radiusSmall,
+        fontFamily: override.fontFamily ?? base.fontFamily,
+        effect: base.effect,
+    };
+}
+/** Returns the `data-theme-effect` attribute value for a theme, or `undefined`. */
+function getThemeEffect(theme) {
+    return resolve(theme).effect;
+}
+/**
+ * Resolve a `ChatTheme` prop into a plain `Record<string, string>` of
+ * CSS custom properties that can be spread onto a component `style` prop.
+ *
+ * ```tsx
+ * const vars = getThemeVars(theme);
+ * <div style={vars}>…</div>
+ * ```
+ */
+function getThemeVars(theme) {
+    const r = resolve(theme);
+    return {
+        '--cm-primary': r.colors.primary,
+        '--cm-primary-soft': r.colors.primarySoft,
+        '--cm-primary-tint': r.colors.primaryTint,
+        '--cm-bg': r.colors.bg,
+        '--cm-bg-muted': r.colors.bgMuted,
+        '--cm-bubble-user': r.colors.bubbleUser,
+        '--cm-bubble-assistant': r.colors.bubbleAssistant,
+        '--cm-text': r.colors.text,
+        '--cm-text-muted': r.colors.textMuted,
+        '--cm-border': r.colors.border,
+        '--cm-danger': r.colors.danger,
+        '--cm-radius': r.radius,
+        '--cm-radius-sm': r.radiusSmall,
+        '--cm-font': r.fontFamily,
+    };
+}

package/dist/cjs/react/transports/langgraph/index.d.ts

@@ -0,0 +1,2 @@
+export { useLangGraphChatTransport, useLangGraphChatTransport as useLangGraph, type UseLangGraphChatTransportOptions, type LangGraphUpdatesEvent, type LangGraphMessageEvent, type LangGraphCustomEvent, type LangGraphToolCallEvent, type LangGraphToolResultEvent, type LangGraphErrorEvent, type LangGraphRequestBody, } from '../langgraph.js';
+export { LangGraphAiChat, type LangGraphAiChatProps } from './langgraph-ai-chat.js';

package/dist/cjs/react/transports/langgraph/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LangGraphAiChat = exports.useLangGraph = exports.useLangGraphChatTransport = void 0;
+var langgraph_js_1 = require("../langgraph.js");
+Object.defineProperty(exports, "useLangGraphChatTransport", { enumerable: true, get: function () { return langgraph_js_1.useLangGraphChatTransport; } });
+Object.defineProperty(exports, "useLangGraph", { enumerable: true, get: function () { return langgraph_js_1.useLangGraphChatTransport; } });
+var langgraph_ai_chat_js_1 = require("./langgraph-ai-chat.js");
+Object.defineProperty(exports, "LangGraphAiChat", { enumerable: true, get: function () { return langgraph_ai_chat_js_1.LangGraphAiChat; } });

package/dist/cjs/react/transports/langgraph/langgraph-ai-chat.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+import { type FloatingChatUIProps } from '../../components/floating-chat-ui.js';
+import { type LangGraphCustomEvent } from '../langgraph.js';
+import type { AiChatProviderConfig, ChatTransportDataPart, SessionConfig } from '../../types.js';
+export interface LangGraphAiChatProps extends AiChatProviderConfig, FloatingChatUIProps {
+    /** Chat API endpoint URL (e.g. `/api/chat`). */
+    endpoint: string;
+    /** Static headers or a function that returns headers per request. */
+    headers?: Record<string, string> | (() => Record<string, string>);
+    /**
+     * Fixed LangGraph thread id. Ignored when `sessions` is provided —
+     * in that mode the active session id is used as the thread id.
+     */
+    threadId?: string;
+    /** Extra fields to merge into every request body. */
+    bodyExtras?: Record<string, unknown> | (() => Record<string, unknown>);
+    /** fetch credentials mode. Default: `same-origin`. */
+    credentials?: RequestCredentials;
+    /** Hook for translating backend `event: custom` events into data parts. */
+    onCustomEvent?: (evt: LangGraphCustomEvent) => ChatTransportDataPart | null;
+    /** Hook for rendering LangGraph `event: updates` as status labels. */
+    renderUpdate?: (node: string, update: Record<string, unknown>) => string | null;
+    /**
+     * Multi-session hooks. When provided, the drop-in renders a session
+     * switcher in the header and wires the active session id into the
+     * LangGraph transport as `threadId`. Pass your own `SessionConfig`
+     * (typically a bridge to `chatService.getSessions/createSession/...`).
+     *
+     * See `SessionConfig` in `glirastes/react`.
+     */
+    sessions?: SessionConfig;
+    /**
+     * Replace the default floating UI with custom children. Useful when you
+     * want to compose `<MessageList />`, `<ChatInput />`, etc. yourself or
+     * render an inline `<AiChatPanel />` instead of a floating window.
+     */
+    children?: ReactNode;
+}
+/**
+ * Drop-in LangGraph chat widget. Bundles transport, provider, and a
+ * floating (trigger button + draggable window) chat UI into one component.
+ * Zero dependency on `@ai-sdk/react` or `ai`.
+ *
+ * ```tsx
+ * 'use client';
+ * import { LangGraphAiChat } from 'glirastes/react/langgraph';
+ *
+ * export default function Layout({ children }) {
+ *   return (
+ *     <>
+ *       {children}
+ *       <LangGraphAiChat endpoint="/api/chat" />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * All `AiChatProviderConfig` fields (session, mentions, classNames, etc.)
+ * and `FloatingChatUIProps` (title, defaultOpen, width, height, draggable,
+ * resizable) are accepted as top-level props.
+ */
+export declare function LangGraphAiChat({ endpoint, headers, threadId, bodyExtras, credentials, onCustomEvent, renderUpdate, sessions, title, open, onOpenChange, defaultOpen, draggable, resizable, size, hideTriggerWhenOpen, shortcut, showClearButton, confirmClear, showSessionSwitcher, headerActions, triggerIcon, showMic, welcomeMessage, children, ...providerConfig }: LangGraphAiChatProps): import("react/jsx-runtime").JSX.Element;