2c:"/_next/static/immutable/chunks/1hi_kbrxinju_.js" 2d:"/_next/static/immutable/chunks/2u_5bv_v1g3_j.js" 2e:"/_next/static/immutable/chunks/2nm39d601clar.js" 2f:"/_next/static/immutable/chunks/2o69lt5hiomv_.js" 30:"/_next/static/immutable/chunks/3qrefk0nnnzbk.js" 31:I[712953,["$3","$4","$5","$6","$7","$8","$9","$d","$e","$f","$10","$11","$12","$2c","$2d","$2e","$2f","$30"],"ComponentView"] 32:T58b,/** * OrbChatBubble usage — copy into any chat screen. */ import { useEffect, useState } from "react"; import { View } from "react-native"; import { OrbChatBubble, type OrbChatStep, } from "./orb-chat-bubble"; import type { OrbState } from "thinking-orbs/engine"; const SCRIPT: Array<{ state: OrbState; title: string; description: string; steps: OrbChatStep[]; }> = [ { state: "searching", title: "Searching…", description: "Scanning your library for relevant notes.", steps: [{ label: "Querying sources", done: true }, { label: "Reading matches" }], }, { state: "composing", title: "Answering…", description: "Drafting a reply from 3 sources.", steps: [ { label: "Querying sources", done: true }, { label: "Reading matches", done: true }, { label: "Writing answer" }, ], }, ]; export function OrbChatBubbleUsage() { const [phase, setPhase] = useState(0); useEffect(() => { const id = setInterval( () => setPhase((p) => (p + 1) % SCRIPT.length), 3200 ); return () => clearInterval(id); }, []); const active = SCRIPT[phase] ?? SCRIPT[0]!; return ( ); } 33:T2995,/** * OrbChatBubble — chat-style thinking bubble for Expo AI apps. * * An orb avatar beside a message bubble with a status title, subtext and * checkable progress steps — the mobile equivalent of a chat "thinking" * row, tuned for streaming agent runs (search → read → answer). * * Stack: React Native + react-native-svg + HeroUI Native + Uniwind. * The orb renders geometry from `thinking-orbs/engine` (the same frame * math the web `ThinkingOrb` and the Skia native port run) as SVG dots, * so it works in Expo Go and web previews with no native modules. * For max fidelity on device, swap `OrbDots` for `ThinkingOrb` from * `thinking-orbs-native` (Skia) — the props line up one to one. * * Install: * npx expo install thinking-orbs react-native-svg heroui-native uniwind @expo/vector-icons * * Setup: Uniwind + HeroUI Native providers once at your app root — * import "./global.css"; // @import "tailwindcss"; @import "uniwind"; @import "heroui-native/styles"; * import { HeroUINativeProvider } from "heroui-native"; * // … */ import { useEffect, useMemo, useReducer, useRef, useState } from "react"; import type { ReactNode } from "react"; import type { ViewStyle } from "react-native"; import { AccessibilityInfo, AppState, useColorScheme, View, } from "react-native"; import Svg, { Circle, Line as SvgLine } from "react-native-svg"; import { Ionicons } from "@expo/vector-icons"; import { Text } from "heroui-native"; import { MODE_FRAMES, resolvePreset } from "thinking-orbs/engine"; import type { Dot, Line, OrbSize, OrbState } from "thinking-orbs/engine"; export type OrbTheme = "auto" | "dark" | "light"; const STATE_LABELS: Record = { working: "Working…", searching: "Searching…", solving: "Solving…", listening: "Listening…", connecting: "Connecting…", weaving: "Weaving…", composing: "Composing…", breathing: "Thinking…", shaping: "Shaping…", }; /** The static instant reduced-motion users see — same as the web orb. */ const REDUCED_MOTION_T = 0.6; /** ~30fps: one SVG commit per frame stays inside budget for a single orb. */ const FRAME_MS = 33; function nowSeconds(): number { const perf = (globalThis as { performance?: { now?: () => number } }) .performance; return typeof perf?.now === "function" ? perf.now() / 1000 : Date.now() / 1000; } function useResolvedDark(theme: OrbTheme): boolean { const scheme = useColorScheme(); if (theme === "dark") return true; if (theme === "light") return false; return scheme !== "light"; } function usePrefersReducedMotion(): boolean { const [reduced, setReduced] = useState(false); useEffect(() => { let alive = true; AccessibilityInfo.isReduceMotionEnabled().then((v) => { if (alive) setReduced(v); }); const sub = AccessibilityInfo.addEventListener( "reduceMotionChanged", setReduced ); return () => { alive = false; sub.remove(); }; }, []); return reduced; } function useAppActive(): boolean { const [active, setActive] = useState( AppState.currentState !== "background" ); useEffect(() => { const sub = AppState.addEventListener("change", (s) => setActive(s !== "background") ); return () => sub.remove(); }, []); return active; } export type OrbDotsProps = { /** Which orb animation to show. */ state?: OrbState; /** Tuned geometry preset — 64 (avatar) or 20 (inline). */ size?: OrbSize; /** Render at this many dp; geometry still comes from `size`. */ displaySize?: number; /** `auto` follows the OS appearance. */ theme?: OrbTheme; /** Speed multiplier on the preset's baked speed. */ speed?: number; /** Freeze on the current frame. */ paused?: boolean; /** Overrides the per-state default. */ accessibilityLabel?: string; style?: ViewStyle; }; /** * SVG orb — internal renderer. Geometry is the official engine output; * only the painter (SVG circles) differs from the Skia native port. */ export function OrbDots({ state = "working", size = 64, displaySize, theme = "auto", speed = 1, paused = false, accessibilityLabel, style, }: OrbDotsProps) { const dark = useResolvedDark(theme); const reduced = usePrefersReducedMotion(); const appActive = useAppActive(); const [, bump] = useReducer((x: number) => x + 1, 0); const frame = useRef<{ dots: Dot[]; lines: Line[] }>({ dots: [], lines: [], }); const { mode, speed: baseSpeed, opts } = useMemo( () => resolvePreset(state, size), [state, size] ); const box = displaySize ?? size; useEffect(() => { const build = MODE_FRAMES[mode]; const effSpeed = baseSpeed * speed; frame.current = build( size, reduced ? REDUCED_MOTION_T : nowSeconds() * effSpeed, opts ); bump(); if (reduced || paused || !appActive) return; let raf = 0; let last = 0; let live = true; const loop = (ms: number) => { if (!live) return; if (ms - last >= FRAME_MS) { last = ms; frame.current = build(size, nowSeconds() * effSpeed, opts); bump(); } raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => { live = false; cancelAnimationFrame(raf); }; }, [mode, size, opts, baseSpeed, speed, reduced, paused, appActive]); const { dots, lines } = frame.current; return ( ); } export type OrbChatStep = { label: string; /** Done steps show a check; the first pending step shows a mini orb. */ done?: boolean; }; export type OrbChatBubbleProps = { /** Which orb animation to show. */ state?: OrbState; /** Headline in the bubble. */ title?: string; /** Subtext under the title. */ description?: string; /** Step list — done steps check off, first pending step spins. */ steps?: OrbChatStep[]; /** `auto` follows the OS appearance. */ theme?: OrbTheme; /** Animation speed multiplier. */ speed?: number; /** Freeze the orb animation. */ paused?: boolean; /** Extra style for the outer row. */ style?: ViewStyle; children?: ReactNode; }; const AVATAR = 56; const AVATAR_ORB = 44; export function OrbChatBubble({ state = "working", title = "Thinking…", description, steps = [], theme = "auto", speed = 1, paused = false, style, }: OrbChatBubbleProps) { const dark = useResolvedDark(theme); const activeIndex = steps.findIndex((s) => !s.done); const ink = dark ? "#f5f5f7" : "#141416"; const muted = dark ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.55)"; const faint = dark ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.25)"; return ( {title} {description && ( {description} )} {steps.length > 0 && ( {steps.map((step, i) => ( {step.done ? ( ) : i === activeIndex ? ( ) : ( )} {step.label} ))} )} ); } export default OrbChatBubble; 34:T58b,/** * OrbChatBubble usage — copy into any chat screen. */ import { useEffect, useState } from "react"; import { View } from "react-native"; import { OrbChatBubble, type OrbChatStep, } from "./orb-chat-bubble"; import type { OrbState } from "thinking-orbs/engine"; const SCRIPT: Array<{ state: OrbState; title: string; description: string; steps: OrbChatStep[]; }> = [ { state: "searching", title: "Searching…", description: "Scanning your library for relevant notes.", steps: [{ label: "Querying sources", done: true }, { label: "Reading matches" }], }, { state: "composing", title: "Answering…", description: "Drafting a reply from 3 sources.", steps: [ { label: "Querying sources", done: true }, { label: "Reading matches", done: true }, { label: "Writing answer" }, ], }, ]; export function OrbChatBubbleUsage() { const [phase, setPhase] = useState(0); useEffect(() => { const id = setInterval( () => setPhase((p) => (p + 1) % SCRIPT.length), 3200 ); return () => clearInterval(id); }, []); const active = SCRIPT[phase] ?? SCRIPT[0]!; return ( ); } 19:["$","$L31",null,{"info":{"id":"orb-chat-bubble","name":"Orb Chat Bubble","categoryId":"mobile","categoryName":"Mobile & Expo","tags":["mobile"],"tier":"FREE","tag":"$undefined","credits":[{"label":"thinking-orbs","href":"https://libraries.dev/orbs","note":"Orb engine + animations"},{"label":"Jakub Antalik","href":"https://github.com/Jakubantalik/thinking-orbs","note":"Library author"}],"shadcnUrl":"https://reframe-ui.vercel.app/r/orb-chat-bubble.json","demoCode":"$32","componentCode":"$33","previewCodeForGate":"$34","isPro":false,"hasAccess":true,"token":null,"expo":{"preview":"orb-chat-bubble"},"authRedirect":"/sign-in?redirect_url=%2Fdocs","props":[{"id":"state","name":"state","type":"\"working\" | \"searching\" | \"solving\" | \"listening\" | \"connecting\" | \"weaving\" | \"composing\" | \"breathing\" | \"shaping\"","default":"working","description":"Which orb animation to show.","required":false},{"id":"title","name":"title","type":"string","default":"Thinking…","description":"Headline in the bubble.","required":false},{"id":"description","name":"description","type":"string","description":"Subtext under the title.","required":false},{"id":"steps","name":"steps","type":"OrbChatStep[]","description":"Step list — done steps show a check, first pending step shows a mini orb.","required":false},{"id":"theme","name":"theme","type":"\"auto\" | \"dark\" | \"light\"","default":"auto","description":"Color scheme — auto follows the OS appearance.","required":false},{"id":"speed","name":"speed","type":"number","default":1,"description":"Animation speed multiplier.","required":false},{"id":"paused","name":"paused","type":"boolean","default":false,"description":"Freeze the orb animation.","required":false},{"id":"style","name":"style","type":"ViewStyle","description":"Extra style for the outer row.","required":false}],"deps":["thinking-orbs","react-native-svg","@expo/vector-icons","heroui-native","uniwind"]}}]