solid-drift 0.24.0 → 0.26.0

package/README.md

@@ -1506,6 +1506,71 @@ const bs = createBottomSheet(() => handle, {
 - While the pointer is down the sheet tracks 1:1 with light rubber-banding past the fully-open top and the dismissed bottom. On release, the target is the nearest snap to `y + velocity * 0.18`; dismissal happens past the midpoint between the lowest snap and closed, or on a downward flick over 700 px/s. Snap travel uses a spring (`options.spring`, default stiffness 400 / damping 40).
 - Bind `ref` to the drag handle when the sheet body scrolls (keeps drag and scroll from fighting), to the sheet root otherwise. The moving element gets `translateY(y())`; the drag target needs `touch-action: none`. Starts dismissed on the server (SSR-safe); under reduced motion it jumps straight to snap targets.
 
+### Streaming
+
+Token-by-token chat over OpenAI, Anthropic, Meta's Llama API, or your own provider, plus a low-level fetch-based SSE client for any event stream.
+
+```tsx
+import { createChatModel } from "solid-drift"
+
+const chat = createChatModel({
+  provider: "openai",
+  apiKey: () => localStorage.getItem("openai_key") ?? "",
+  model: "gpt-4o-mini",
+  system: "You are a concise assistant.",
+})
+
+// In your component:
+<For each={chat.messages()}>
+  {(m) => <div class={m.role}>{m.content}</div>}
+</For>
+<button onClick={() => chat.send(input())} disabled={chat.status() === "streaming"}>
+  Send
+</button>
+```
+
+- `createChatModel(options)` returns `{ messages, streamingText, status, error, send, stop, reset }`. `send(content)` appends the user message and streams the reply into a live assistant message, so UI bound to `messages()` renders token by token; `status()` is `idle`, `streaming`, or `error`. `stop()` aborts and keeps the partial reply; `send()` while streaming is ignored.
+- `provider` is `"openai"`, `"anthropic"`, `"meta"`, or a custom `{ kind: "custom", stream, parseDelta }`. OpenAI and Meta (Llama API via `/compat/v1`, OpenAI-compatible) use Bearer auth and `data:` chunks terminated by `[DONE]`; Anthropic uses `x-api-key` plus `anthropic-version: 2023-06-01`, a top-level `system` prompt, and `content_block_delta` text deltas (required `maxTokens` defaults to 1024).
+- Honest limitation: api.anthropic.com does not send CORS headers for browser origins, so from a browser Anthropic must go through your own server route or proxy; point `baseUrl` at it. For production with any provider, prefer a server route that holds the key and set `baseUrl` to it so keys never ship to the browser.
+- `createSSE(url, options?)` is a fetch-based event-stream client (`{ status, events, lastEvent, error, connect, disconnect }`): unlike `EventSource` it supports any method and custom headers, parses the full SSE framing (named events, multi-line data, comments, chunk splits), and leaves reconnection manual via `connect()`. SSR-safe: nothing connects until `connect()` (or `autoConnect`) runs on the client.
+
+### Voice
+
+A full voice loop: mic metering, speech-to-text, a voice state machine, canvas waveforms, text-to-speech (browser or cloud), thinking indicators, and a voice-enabled prompt input.
+
+```tsx
+import { createVoiceState, createSpeech, createTTS, createPrompt, createChatModel } from "solid-drift"
+
+const voice = createVoiceState()
+const chat = createChatModel({ provider: "openai", apiKey: getKey, model: "gpt-4o-mini" })
+const tts = createTTS()
+const prompt = createPrompt({
+  onSubmit: async (text) => {
+    voice.toThinking()
+    await chat.send(text)
+    voice.toSpeaking()
+    const msgs = chat.messages()
+    tts.speak(msgs[msgs.length - 1]?.content ?? "")
+    voice.toIdle()
+  },
+})
+
+<input
+  value={prompt.value()}
+  onInput={(e) => prompt.setValue(e.currentTarget.value)}
+  onKeyDown={(e) => e.key === "Enter" && prompt.submit()}
+/>
+<button onClick={() => { voice.toListening(); prompt.toggleMic(); }}>Mic</button>
+```
+
+- `createVoiceState()` is the turn state machine: `state()` is `idle`, `listening`, `thinking`, or `speaking`, with `toIdle`/`toListening`/`toThinking`/`toSpeaking` transitions.
+- `createMicLevel(options?)` returns `{ level, active, supported, analyser, error, start, stop }`: a 0..1 smoothed RMS meter from `getUserMedia` plus an `AnalyserNode` (call `start()` from a user gesture). The exposed `analyser` wires straight into `createWaveform`.
+- `createSpeech(options?)` wraps the Web Speech API (`SpeechRecognition` with `webkitSpeechRecognition` fallback): `{ supported, listening, transcript, interim, error, start, stop, reset }`. Final results accumulate into `transcript()`; `continuous` sessions auto-restart if the browser ends them mid-turn.
+- `createWaveform(canvas, options)` draws the analyser's time-domain wave (`mode: "line"`) or spectrum (`mode: "bars"`) on a canvas, DPR-aware, on the shared clock; under reduced motion it redraws at most every 250ms.
+- `createTTS(options?)` speaks via `speechSynthesis` by default (`{ supported, speaking, voices, speak, cancel }`, async voice loading, `speak()` cancels the current utterance first) and upgrades to any cloud voice through `provider: { speak(text, { signal }) }`.
+- `createThinking(options?)` cycles `"Thinking"`, `"Thinking."`, ... through `phrases` at `interval` ms: `{ text, running, start, stop }`.
+- `createPrompt(options?)` is the voice-enabled input: `{ value, setValue, listening, interim, supported, toggleMic, submit, clear }`. Mic finals are appended to the value as they arrive; `submit()` fires `onSubmit` and clears by default. Everything is SSR-safe: unsupported primitives report `supported: false` and their actions no-op on the server.
+
 ### Easings
 
 Named easings: `linear`, `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeOutExpo`, `easeOutBack`, plus the cartoon set: `easeInBack` (anticipation dip before movement), `easeInOutBack` (wind-up, overshoot, settle), `easeOutElastic` (decaying rubber-band oscillation), `easeOutBounce` (shrinking cartoon bounces). Also `cubicBezier(x1, y1, x2, y2)` for CSS-style curves. Pass a name or a custom `(t) => number` function anywhere an easing is accepted.

package/dist/index.d.ts

@@ -40,3 +40,7 @@ export { createTxLifecycle, createTicker, createMintReveal, createConnectButton,
 export type { TxState, TxStatusInput, TxLifecycleOptions, TxLifecycleControls, TickerOptions, TickerControls, MintRevealStatus, MintRevealOptions, MintRevealControls, ConnectButtonOptions, ConnectButtonStatus, ConnectButtonControls, AgentTxState, AgentTxProposal, AgentTxOptions, AgentTxControls, } from "./web3.js";
 export { createPoll, shortenAddress, isAddress, formatUnits, parseUnits, CHAINS, createChain, createTokenPrice, createPriceChange, createPriceCompare, createGasPrice, createBalance, createTxReceipt, createBlockNumber, createChainlinkPrice, createNFTMetadata, createENS, createIdenticon, } from "./web3data.js";
 export type { PollStatus, PollOptions, PollControls, ChainInfo, TokenPrice, TokenPriceOptions, PriceChangeOptions, GasPriceOptions, GasPriceData, BalanceOptions, BalanceData, TxReceiptData, TxReceiptOptions, BlockNumberOptions, ChainlinkPriceOptions, NFTMetadata, NFTMetadataOptions, ENSOptions, IdenticonOptions, } from "./web3data.js";
+export { createSSEParser, createSSE, createChatModel, } from "./stream.js";
+export type { SSEEvent, StreamStatus, SSEOptions, SSEControls, ChatMessage, ChatProviderKind, CustomChatProvider, ChatModelOptions, ChatModelControls, } from "./stream.js";
+export { createVoiceState, createMicLevel, createSpeech, createWaveform, createTTS, createThinking, createPrompt, } from "./voice.js";
+export type { VoiceStatus, VoiceStateControls, MicLevelOptions, MicLevelControls, SpeechOptions, SpeechControls, WaveformOptions, WaveformControls, TTSProvider, TTSOptions, TTSControls, ThinkingOptions, ThinkingControls, PromptOptions, PromptControls, } from "./voice.js";

package/dist/index.js

@@ -36,3 +36,5 @@ export { createDrag, createSwipe, } from "./gesture.js";
 export { createStreamReveal, createAgentState, parseDriftSpec, createSpecPlayer, DriftSpecError, } from "./ai.js";
 export { createTxLifecycle, createTicker, createMintReveal, createConnectButton, createAgentTx, } from "./web3.js";
 export { createPoll, shortenAddress, isAddress, formatUnits, parseUnits, CHAINS, createChain, createTokenPrice, createPriceChange, createPriceCompare, createGasPrice, createBalance, createTxReceipt, createBlockNumber, createChainlinkPrice, createNFTMetadata, createENS, createIdenticon, } from "./web3data.js";
+export { createSSEParser, createSSE, createChatModel, } from "./stream.js";
+export { createVoiceState, createMicLevel, createSpeech, createWaveform, createTTS, createThinking, createPrompt, } from "./voice.js";

package/dist/stream.d.ts

@@ -0,0 +1,177 @@
+import { type Accessor } from "solid-js";
+/** One parsed Server-Sent Event. */
+export interface SSEEvent {
+    /** Event name; defaults to "message" when the stream sets none. */
+    event: string;
+    /** Payload: data lines joined with newlines. */
+    data: string;
+    /** Last `id:` field seen, if any. */
+    id?: string;
+}
+/**
+ * Feed raw text chunks through the SSE framing rules and call
+ * `onEvent` for each dispatched event. Handles events split across
+ * chunk boundaries, multi-line `data:` payloads, and `:` comments.
+ */
+export declare function createSSEParser(onEvent: (event: SSEEvent) => void): (chunk: string) => void;
+type FetchFn = typeof fetch;
+/** Connection state of a stream. */
+export type StreamStatus = "idle" | "connecting" | "open" | "closed" | "error";
+export interface SSEOptions {
+    /** HTTP method. Default "GET". */
+    method?: string;
+    /** Extra headers, or a function returning them per connection. */
+    headers?: Record<string, string> | (() => Record<string, string>);
+    /** JSON-encoded request body (for POST-style SSE endpoints). */
+    body?: unknown;
+    /** Only surface events with this name. */
+    event?: string;
+    /** Called for each parsed event (after the name filter). */
+    onEvent?: (event: SSEEvent) => void;
+    /** Called when the stream opens (first byte accepted). */
+    onOpen?: () => void;
+    /** Called when the stream ends cleanly. */
+    onDone?: () => void;
+    /** Called on connection or HTTP errors. */
+    onError?: (error: Error) => void;
+    /** Connect immediately on creation. Default true. */
+    autoConnect?: boolean;
+    /** Fetch implementation (for tests or custom transports). */
+    fetchFn?: FetchFn;
+}
+export interface SSEControls {
+    /** Connection state. */
+    status: Accessor<StreamStatus>;
+    /** All parsed events received on this connection. */
+    events: Accessor<SSEEvent[]>;
+    /** The most recent event, if any. */
+    lastEvent: Accessor<SSEEvent | null>;
+    /** The last error, if any. */
+    error: Accessor<Error | null>;
+    /** Open (or re-open) the stream. */
+    connect: () => void;
+    /** Close the stream and abort the request. */
+    disconnect: () => void;
+}
+/**
+ * A fetch-based Server-Sent Events client.
+ *
+ * Unlike `EventSource`, this works with any HTTP method and custom
+ * headers, so it can reach authenticated or POST-style SSE endpoints.
+ * There is no automatic reconnection: a dropped stream moves to
+ * "closed" (or "error") and `connect()` re-opens it manually.
+ *
+ * SSR-safe: nothing connects until `connect()` runs (or
+ * `autoConnect` fires on the client).
+ *
+ * ```ts
+ * const sse = createSSE("https://api.example.com/events", {
+ *   headers: { Authorization: `Bearer ${token}` },
+ *   onEvent: (ev) => console.log(ev.event, ev.data),
+ * });
+ * sse.disconnect();
+ * ```
+ */
+export declare function createSSE(url: string | (() => string), options?: SSEOptions): SSEControls;
+/** A single chat turn. */
+export interface ChatMessage {
+    id: string;
+    role: "system" | "user" | "assistant";
+    content: string;
+}
+/** Built-in provider kinds. */
+export type ChatProviderKind = "openai" | "anthropic" | "meta";
+/**
+ * Custom streaming provider. `stream` opens the request and returns
+ * the raw Response; `parseDelta` maps each SSE data payload to text
+ * (appended to the reply) or a done flag.
+ */
+export interface CustomChatProvider {
+    kind: "custom";
+    stream: (messages: ChatMessage[], context: {
+        signal: AbortSignal;
+        fetchFn: FetchFn;
+    }) => Promise<Response>;
+    parseDelta: (data: string, event?: string) => {
+        text?: string;
+        done?: boolean;
+    };
+}
+export interface ChatModelOptions {
+    /**
+     * Provider. Built-in kinds:
+     * - `"openai"`: chat completions, `data:` chunks, `[DONE]` terminator.
+     * - `"anthropic"`: messages API, `content_block_delta` text deltas.
+     *   Note: api.anthropic.com does not send CORS headers for browser
+     *   origins, so from a browser you must call it through your own
+     *   server route or proxy (set `baseUrl` to that proxy).
+     * - `"meta"`: Llama API, OpenAI-compatible via /compat/v1.
+     * - custom `{ kind: "custom", stream, parseDelta }`.
+     */
+    provider: ChatProviderKind | CustomChatProvider;
+    /** API key, or a function returning it. Sent as Bearer (openai/meta) or x-api-key (anthropic). */
+    apiKey?: string | (() => string | undefined);
+    /** Model name, e.g. "gpt-4o-mini", "claude-sonnet-4-20250514". */
+    model: string;
+    /** Override the API root. Defaults per provider kind. */
+    baseUrl?: string;
+    /** System prompt, sent as a system message (top-level `system` for anthropic). */
+    system?: string;
+    /** Sampling temperature, passed through when set. */
+    temperature?: number;
+    /** Max output tokens. Default 1024. Required by the anthropic API. */
+    maxTokens?: number;
+    /** Extra headers merged into the request. */
+    headers?: Record<string, string>;
+    /** Fetch implementation (for tests or custom transports). */
+    fetchFn?: FetchFn;
+    /** Called with the finished assistant message. */
+    onFinish?: (message: ChatMessage) => void;
+    /** Called on request or stream errors. */
+    onError?: (error: Error) => void;
+}
+export interface ChatModelControls {
+    /** Full conversation, including the in-progress reply. */
+    messages: Accessor<ChatMessage[]>;
+    /** The reply text streamed so far (empty when idle). */
+    streamingText: Accessor<string>;
+    /** `idle`, `streaming`, or `error`. */
+    status: Accessor<"idle" | "streaming" | "error">;
+    /** The last error, if any. */
+    error: Accessor<Error | null>;
+    /** Send a user message and stream the reply. Ignored while streaming. */
+    send: (content: string) => Promise<void>;
+    /** Abort the in-flight reply, keeping the partial text. */
+    stop: () => void;
+    /** Clear the conversation and abort any in-flight reply. */
+    reset: () => void;
+}
+/**
+ * Streaming chat over OpenAI, Anthropic, Meta (Llama API), or a
+ * custom provider.
+ *
+ * `send()` appends the user message, opens the provider stream, and
+ * appends text deltas to a live assistant message as they arrive, so
+ * UI bound to `messages()` renders the reply token by token. Pairs
+ * well with `createTyping` for a typewriter reveal.
+ *
+ * Keys stay in your hands: pass `apiKey` directly, or a function
+ * reading it from your own store. For production, prefer calling
+ * through your own server route and pointing `baseUrl` at it so
+ * keys never ship to the browser.
+ *
+ * SSR-safe: nothing connects until `send()` is called.
+ *
+ * ```ts
+ * const chat = createChatModel({
+ *   provider: "openai",
+ *   apiKey: () => localStorage.getItem("openai_key") ?? "",
+ *   model: "gpt-4o-mini",
+ *   system: "You are a concise assistant.",
+ *   onFinish: (msg) => console.log("done:", msg.content.length),
+ * });
+ * await chat.send("What is a signal?");
+ * ```
+ */
+export declare function createChatModel(options: ChatModelOptions): ChatModelControls;
+export {};