@usecrow/ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,203 +1,1200 @@
-import { createContext, useRef, useEffect, useMemo, useContext, useState, useCallback } from 'react';
-import { CrowClient } from '@usecrow/client';
+import React3, { createContext, forwardRef, useRef, useCallback, useEffect, useContext, useState, useMemo, useLayoutEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
+import { Square, ArrowUp, ChevronDown, Check, MessageCircle, Plus, History, ChevronUp, Brain, ChevronRight, Loader2, X } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { CrowClient } from '@usecrow/client';
 
-var CrowContext = createContext(null);
-function CrowProvider({
-  children,
+// src/styles/inject.ts
+var STYLE_ID = "crow-ui-styles";
+var CSS_CONTENT = `*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
+
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.crow-pointer-events-none{pointer-events:none}.crow-pointer-events-auto{pointer-events:auto}.crow-fixed{position:fixed}.crow-absolute{position:absolute}.crow-relative{position:relative}.crow-sticky{position:sticky}.crow-bottom-0{bottom:0}.crow-bottom-full{bottom:100%}.crow-left-0{left:0}.crow-right-0{right:0}.crow-top-0{top:0}.crow-z-50{z-index:50}.crow-z-\\[999999\\]{z-index:999999}.crow-m-0{margin:0}.crow-my-1{margin-top:.25rem}.crow-mb-1,.crow-my-1{margin-bottom:.25rem}.crow-mb-2{margin-bottom:.5rem}.crow-mb-3{margin-bottom:.75rem}.crow-ml-0{margin-left:0}.crow-ml-0\\.5{margin-left:.125rem}.crow-ml-2{margin-left:.5rem}.crow-ml-4{margin-left:1rem}.crow-mt-0{margin-top:0}.crow-mt-0\\.5{margin-top:.125rem}.crow-mt-1{margin-top:.25rem}.crow-mt-2{margin-top:.5rem}.crow-mt-auto{margin-top:auto}.crow-inline-block{display:inline-block}.crow-flex{display:flex}.crow-inline-flex{display:inline-flex}.crow-h-10{height:2.5rem}.crow-h-12{height:3rem}.crow-h-2{height:.5rem}.crow-h-3{height:.75rem}.crow-h-3\\.5{height:.875rem}.crow-h-4{height:1rem}.crow-h-7{height:1.75rem}.crow-h-8{height:2rem}.crow-h-full{height:100%}.crow-max-h-32{max-height:8rem}.crow-max-h-\\[200px\\]{max-height:200px}.crow-min-h-0{min-height:0}.crow-min-h-\\[32px\\]{min-height:32px}.crow-w-0{width:0}.crow-w-0\\.5{width:.125rem}.crow-w-2{width:.5rem}.crow-w-3{width:.75rem}.crow-w-3\\.5{width:.875rem}.crow-w-4{width:1rem}.crow-w-7{width:1.75rem}.crow-w-8{width:2rem}.crow-w-full{width:100%}.crow-min-w-0{min-width:0}.crow-min-w-\\[180px\\]{min-width:180px}.crow-max-w-\\[80\\%\\]{max-width:80%}.crow-max-w-\\[90\\%\\]{max-width:90%}.crow-max-w-full{max-width:100%}.crow-flex-1{flex:1 1 0%}.crow-flex-shrink-0{flex-shrink:0}.crow-rotate-180{--tw-rotate:180deg}.crow-rotate-180,.crow-scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.crow-scale-100{--tw-scale-x:1;--tw-scale-y:1}.crow-scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.crow-animate-fade-in{animation:crow-fadeIn .2s ease-out}.crow-animate-pulse{animation:crow-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.crow-animate-slide-up{animation:crow-slideUp .3s ease-out}@keyframes crow-spin{to{transform:rotate(1turn)}}.crow-animate-spin{animation:crow-spin 1s linear infinite}.crow-cursor-default{cursor:default}.crow-cursor-not-allowed{cursor:not-allowed}.crow-cursor-pointer{cursor:pointer}.crow-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.crow-resize-none{resize:none}.crow-list-decimal{list-style-type:decimal}.crow-list-disc{list-style-type:disc}.crow-flex-row{flex-direction:row}.crow-flex-col{flex-direction:column}.crow-items-start{align-items:flex-start}.crow-items-end{align-items:flex-end}.crow-items-center{align-items:center}.crow-justify-start{justify-content:flex-start}.crow-justify-end{justify-content:flex-end}.crow-justify-center{justify-content:center}.crow-justify-between{justify-content:space-between}.crow-gap-1{gap:.25rem}.crow-gap-1\\.5{gap:.375rem}.crow-gap-2{gap:.5rem}.crow-gap-3{gap:.75rem}.crow-gap-4{gap:1rem}.crow-gap-6{gap:1.5rem}.crow-space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.crow-space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.crow-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.crow-space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.crow-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.crow-overflow-hidden{overflow:hidden}.crow-overflow-visible{overflow:visible}.crow-overflow-x-auto{overflow-x:auto}.crow-overflow-y-auto{overflow-y:auto}.crow-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crow-whitespace-pre-wrap{white-space:pre-wrap}.crow-break-words{overflow-wrap:break-word}.crow-rounded{border-radius:.25rem}.crow-rounded-2xl{border-radius:1rem}.crow-rounded-3xl{border-radius:1.5rem}.crow-rounded-full{border-radius:9999px}.crow-rounded-lg{border-radius:.5rem}.crow-rounded-md{border-radius:.375rem}.crow-rounded-xl{border-radius:.75rem}.crow-border{border-width:1px}.crow-border-b{border-bottom-width:1px}.crow-border-l{border-left-width:1px}.crow-border-l-2{border-left-width:2px}.crow-border-r{border-right-width:1px}.crow-border-t{border-top-width:1px}.crow-border-none{border-style:none}.crow-border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.crow-border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.crow-border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.crow-border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.crow-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.crow-bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.crow-bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.crow-bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.crow-bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.crow-bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.crow-bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.crow-bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.crow-bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.crow-bg-transparent{background-color:transparent}.crow-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.crow-p-0{padding:0}.crow-p-1{padding:.25rem}.crow-p-1\\.5{padding:.375rem}.crow-p-2{padding:.5rem}.crow-p-3{padding:.75rem}.crow-p-4{padding:1rem}.crow-p-6{padding:1.5rem}.crow-px-1{padding-left:.25rem;padding-right:.25rem}.crow-px-2{padding-left:.5rem;padding-right:.5rem}.crow-px-3{padding-left:.75rem;padding-right:.75rem}.crow-px-4{padding-left:1rem;padding-right:1rem}.crow-px-6{padding-left:1.5rem;padding-right:1.5rem}.crow-py-0{padding-top:0;padding-bottom:0}.crow-py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.crow-py-1{padding-top:.25rem;padding-bottom:.25rem}.crow-py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.crow-py-2{padding-top:.5rem;padding-bottom:.5rem}.crow-py-3{padding-top:.75rem;padding-bottom:.75rem}.crow-py-6{padding-top:1.5rem;padding-bottom:1.5rem}.crow-py-8{padding-top:2rem;padding-bottom:2rem}.crow-pb-2{padding-bottom:.5rem}.crow-pl-3{padding-left:.75rem}.crow-pl-4{padding-left:1rem}.crow-pl-5{padding-left:1.25rem}.crow-pr-4{padding-right:1rem}.crow-pt-1{padding-top:.25rem}.crow-text-left{text-align:left}.crow-text-center{text-align:center}.crow-text-right{text-align:right}.crow-align-text-bottom{vertical-align:text-bottom}.crow-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.crow-text-base{font-size:1rem;line-height:1.5rem}.crow-text-lg{font-size:1.125rem;line-height:1.75rem}.crow-text-sm{font-size:.875rem;line-height:1.25rem}.crow-text-xs{font-size:.75rem;line-height:1rem}.crow-font-bold{font-weight:700}.crow-font-medium{font-weight:500}.crow-font-semibold{font-weight:600}.crow-uppercase{text-transform:uppercase}.crow-leading-relaxed{line-height:1.625}.crow-tracking-wide{letter-spacing:.025em}.crow-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.crow-text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.crow-text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.crow-text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.crow-text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.crow-text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.crow-text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.crow-text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.crow-text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.crow-text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.crow-text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.crow-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.crow-underline{text-decoration-line:underline}.crow-opacity-0{opacity:0}.crow-opacity-100{opacity:1}.crow-opacity-50{opacity:.5}.crow-opacity-60{opacity:.6}.crow-shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.crow-shadow-2xl,.crow-shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.crow-shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.crow-shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.crow-backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.crow-backdrop-blur-md,.crow-backdrop-blur-sm{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.crow-backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.crow-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-duration-150{transition-duration:.15s}.crow-duration-200{transition-duration:.2s}.crow-duration-300{transition-duration:.3s}.crow-duration-500{transition-duration:.5s}.crow-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.crow-animate-fade-in{animation:crow-fadeIn .2s ease-out}.crow-animate-slide-up{animation:crow-slideUp .3s ease-out}.crow-animate-pulse{animation:crow-pulse 1.5s ease-in-out infinite}.crow-animation-delay-100{animation-delay:.1s}.crow-animation-delay-200{animation-delay:.2s}@keyframes crow-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes crow-slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes crow-pulse{0%,to{opacity:1}50%{opacity:.4}}.crow-overflow-y-auto::-webkit-scrollbar{width:6px}.crow-overflow-y-auto::-webkit-scrollbar-track{background:transparent}.crow-overflow-y-auto::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.crow-overflow-y-auto::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.crow-focus-visible\\:crow-outline-none:focus-visible{outline:none}.crow-focus-visible\\:crow-ring-2:focus-visible{box-shadow:0 0 0 2px var(--crow-primary,#6366f1)}:root{--crow-primary:#6366f1;--crow-primary-dark:#4f46e5;--crow-secondary:#f1f5f9;--crow-accent:#10b981}@media (prefers-color-scheme:dark){:root{--crow-primary:#818cf8;--crow-primary-dark:#6366f1}}.placeholder\\:crow-text-gray-500::-moz-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.placeholder\\:crow-text-gray-500::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.last\\:crow-mb-0:last-child{margin-bottom:0}.last\\:crow-border-0:last-child{border-width:0}.hover\\:crow-scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:crow-bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:crow-bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\\:crow-bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.hover\\:crow-bg-white\\/80:hover{background-color:hsla(0,0%,100%,.8)}.hover\\:crow-text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.hover\\:crow-text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.hover\\:crow-text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.hover\\:crow-opacity-100:hover{opacity:1}.focus\\:crow-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:crow-ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:crow-ring-0:focus,.focus\\:crow-ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:crow-ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:crow-ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\\:crow-outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:crow-ring-0:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.disabled\\:crow-pointer-events-none:disabled{pointer-events:none}.disabled\\:crow-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:crow-opacity-50:disabled{opacity:.5}`;
+var injected = false;
+function injectStyles() {
+  if (injected || typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) {
+    injected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CSS_CONTENT;
+  document.head.appendChild(style);
+  injected = true;
+}
+injectStyles();
+
+// src/utils.ts
+var cn = (...classes) => classes.filter(Boolean).join(" ");
+var formatTime = (date) => date.toLocaleTimeString("en-US", {
+  hour: "numeric",
+  minute: "2-digit"
+});
+var formatConversationDate = (dateStr) => {
+  const date = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const diffDays = Math.floor(
+    (now.getTime() - date.getTime()) / (1e3 * 60 * 60 * 24)
+  );
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return `${diffDays} days ago`;
+  return date.toLocaleDateString();
+};
+var generateMessageId = (prefix) => `${prefix}-${Date.now()}`;
+
+// src/constants.ts
+var AVAILABLE_MODELS = [
+  { id: "gpt-4o", name: "GPT-4o", provider: "OpenAI" },
+  { id: "gpt-5-mini", name: "GPT-5 Mini", provider: "OpenAI" },
+  { id: "gpt-5.2", name: "GPT-5.2", provider: "OpenAI" },
+  { id: "gpt-5.2-pro", name: "GPT-5.2 Pro", provider: "OpenAI" },
+  { id: "claude-haiku-4-5-20251001", name: "Haiku 4.5", provider: "Anthropic" },
+  { id: "claude-sonnet-4-5-20250929", name: "Sonnet 4.5", provider: "Anthropic" },
+  { id: "claude-opus-4-5-20251203", name: "Opus 4.5", provider: "Anthropic" }
+];
+var DEFAULT_MODEL = "claude-sonnet-4-5-20250929";
+var DEFAULT_WELCOME_MESSAGE = "Hi! How can I help you today?";
+var MESSAGES_CONTAINER_ID = "crow-messages-container";
+
+// src/hooks/useChat.ts
+var getConversationStorageKey = (productId) => `crow_conv_${productId}`;
+function useChat({
   productId,
-  apiUrl,
-  model
+  apiUrl = "",
+  onVerificationStatus,
+  onConversationId,
+  onWorkflowEvent,
+  onToolCall,
+  onRestoredConversation
 }) {
-  const clientRef = useRef(null);
-  if (!clientRef.current) {
-    clientRef.current = new CrowClient({ productId, apiUrl, model });
-  }
-  const client = clientRef.current;
+  const [messages, setMessages] = useState([
+    {
+      id: "welcome",
+      content: DEFAULT_WELCOME_MESSAGE,
+      isBot: true,
+      timestamp: /* @__PURE__ */ new Date()
+    }
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeToolCalls, setActiveToolCalls] = useState([]);
+  const [conversationId, setConversationId] = useState(() => {
+    try {
+      return localStorage.getItem(getConversationStorageKey(productId));
+    } catch {
+      return null;
+    }
+  });
+  const [selectedModel, setSelectedModel] = useState(DEFAULT_MODEL);
+  const abortControllerRef = useRef(null);
+  const hasRestoredRef = useRef(false);
   useEffect(() => {
-    return () => {
-      client.destroy();
-    };
-  }, [client]);
-  const value = useMemo(() => ({ client }), [client]);
-  return /* @__PURE__ */ jsx(CrowContext.Provider, { value, children });
+    if (conversationId && onRestoredConversation && !hasRestoredRef.current) {
+      hasRestoredRef.current = true;
+      onRestoredConversation(conversationId);
+    }
+  }, []);
+  const streamFromBackend = useCallback(
+    async (message, botMsgId) => {
+      let accumulatedText = "";
+      let firstChunk = true;
+      abortControllerRef.current = new AbortController();
+      try {
+        const identityToken = window.__crow_identity_token;
+        const response = await fetch(`${apiUrl}/api/chat/message`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            product_id: productId,
+            message,
+            conversation_id: conversationId,
+            identity_token: identityToken,
+            model: selectedModel
+          }),
+          signal: abortControllerRef.current.signal
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+        if (reader) {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value);
+            const lines = chunk.split("\n");
+            for (const line of lines) {
+              if (line.startsWith("data: ")) {
+                const data = line.slice(6).trim();
+                if (data === "[DONE]") {
+                  setIsLoading(false);
+                  return;
+                }
+                try {
+                  const parsed = JSON.parse(data);
+                  switch (parsed.type) {
+                    case "verification_status":
+                      onVerificationStatus?.(parsed.is_verified === true);
+                      break;
+                    case "conversation_id":
+                      if (parsed.conversation_id) {
+                        setConversationId(parsed.conversation_id);
+                        try {
+                          localStorage.setItem(
+                            getConversationStorageKey(productId),
+                            parsed.conversation_id
+                          );
+                        } catch {
+                        }
+                        onConversationId?.(parsed.conversation_id);
+                      }
+                      break;
+                    case "thinking":
+                      if (parsed.status === "complete") {
+                        setMessages(
+                          (prev) => prev.map(
+                            (msg) => msg.id === botMsgId ? { ...msg, thinkingComplete: true } : msg
+                          )
+                        );
+                      }
+                      break;
+                    case "thinking_token":
+                      if (parsed.content) {
+                        setMessages(
+                          (prev) => prev.map(
+                            (msg) => msg.id === botMsgId ? { ...msg, thinking: (msg.thinking || "") + parsed.content } : msg
+                          )
+                        );
+                      }
+                      break;
+                    case "content":
+                      if (firstChunk) firstChunk = false;
+                      accumulatedText += parsed.content;
+                      setMessages(
+                        (prev) => prev.map(
+                          (msg) => msg.id === botMsgId ? { ...msg, content: accumulatedText } : msg
+                        )
+                      );
+                      break;
+                    case "citations":
+                      if (parsed.citations) {
+                        setMessages(
+                          (prev) => prev.map(
+                            (msg) => msg.id === botMsgId ? { ...msg, citations: parsed.citations } : msg
+                          )
+                        );
+                      }
+                      break;
+                    case "error":
+                      if (parsed.message) {
+                        setMessages(
+                          (prev) => prev.map(
+                            (msg) => msg.id === botMsgId ? { ...msg, content: parsed.message } : msg
+                          )
+                        );
+                      }
+                      break;
+                    case "tool_call_start":
+                      onToolCall?.({
+                        type: "start",
+                        toolName: parsed.tool_name,
+                        arguments: parsed.arguments
+                      });
+                      setActiveToolCalls((prev) => [
+                        ...prev,
+                        {
+                          id: `tool-${Date.now()}`,
+                          name: parsed.tool_name,
+                          arguments: parsed.arguments || {},
+                          status: "executing",
+                          timestamp: /* @__PURE__ */ new Date()
+                        }
+                      ]);
+                      break;
+                    case "tool_call_complete":
+                      onToolCall?.({
+                        type: "complete",
+                        toolName: parsed.tool_name,
+                        success: parsed.success
+                      });
+                      setActiveToolCalls(
+                        (prev) => prev.map(
+                          (tool) => tool.name === parsed.tool_name ? { ...tool, status: parsed.success ? "complete" : "error" } : tool
+                        )
+                      );
+                      break;
+                    case "client_tool_call":
+                      onToolCall?.({
+                        type: "client_call",
+                        toolName: parsed.tool_name,
+                        arguments: parsed.arguments
+                      });
+                      break;
+                    case "workflow_started":
+                      onWorkflowEvent?.({
+                        type: "started",
+                        name: parsed.name,
+                        todos: parsed.todos
+                      });
+                      break;
+                    case "todo_updated":
+                      onWorkflowEvent?.({
+                        type: "todo_updated",
+                        todoId: parsed.id,
+                        todoStatus: parsed.status
+                      });
+                      break;
+                    case "workflow_ended":
+                      onWorkflowEvent?.({ type: "ended" });
+                      break;
+                    case "workflow_complete_prompt":
+                      onWorkflowEvent?.({ type: "complete_prompt" });
+                      break;
+                  }
+                } catch (e) {
+                  console.error("[Crow] Parse error:", e);
+                }
+              }
+            }
+          }
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          if (accumulatedText) {
+            setMessages(
+              (prev) => prev.map(
+                (msg) => msg.id === botMsgId ? { ...msg, content: accumulatedText } : msg
+              )
+            );
+          } else {
+            setMessages((prev) => prev.filter((msg) => msg.id !== botMsgId));
+          }
+          return;
+        }
+        console.error("[Crow] Error:", error);
+        setMessages(
+          (prev) => prev.map(
+            (msg) => msg.id === botMsgId ? { ...msg, content: "Sorry, I encountered an error. Please try again." } : msg
+          )
+        );
+      } finally {
+        setIsLoading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [apiUrl, productId, conversationId, selectedModel, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall]
+  );
+  const sendMessage = useCallback(
+    (content) => {
+      if (!content.trim()) {
+        return { userMsgId: "", botMsgId: "" };
+      }
+      setActiveToolCalls([]);
+      const userMsgId = generateMessageId("user");
+      const botMsgId = generateMessageId("bot");
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: userMsgId,
+          content,
+          isBot: false,
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+      setIsLoading(true);
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: botMsgId,
+          content: "Thinking...",
+          isBot: true,
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+      streamFromBackend(content, botMsgId);
+      return { userMsgId, botMsgId };
+    },
+    [streamFromBackend]
+  );
+  const stopGeneration = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setIsLoading(false);
+    }
+  }, []);
+  const resetMessages = useCallback(() => {
+    setMessages([
+      {
+        id: "welcome",
+        content: DEFAULT_WELCOME_MESSAGE,
+        isBot: true,
+        timestamp: /* @__PURE__ */ new Date()
+      }
+    ]);
+    setConversationId(null);
+    try {
+      localStorage.removeItem(getConversationStorageKey(productId));
+    } catch {
+    }
+  }, [productId]);
+  const loadMessages = useCallback((historyMessages) => {
+    setMessages(historyMessages);
+  }, []);
+  return {
+    messages,
+    isLoading,
+    activeToolCalls,
+    conversationId,
+    selectedModel,
+    setSelectedModel,
+    setConversationId,
+    sendMessage,
+    stopGeneration,
+    resetMessages,
+    loadMessages
+  };
 }
-function useCrowClient() {
-  const context = useContext(CrowContext);
-  if (!context) {
-    throw new Error("useCrowClient must be used within a CrowProvider");
-  }
-  return context.client;
+function useConversations({ productId, apiUrl = "" }) {
+  const [conversations, setConversations] = useState([]);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const loadConversations = useCallback(async () => {
+    const token = window.__crow_identity_token;
+    if (!token) return;
+    try {
+      const res = await fetch(
+        `${apiUrl}/api/chat/conversations?product_id=${productId}&identity_token=${encodeURIComponent(token)}`
+      );
+      if (res.ok) {
+        const data = await res.json();
+        setConversations(data.conversations || []);
+      }
+    } catch (error) {
+      console.error("[Crow] Failed to load conversations:", error);
+    }
+  }, [apiUrl, productId]);
+  const loadConversationHistory = useCallback(
+    async (conversationId) => {
+      const token = window.__crow_identity_token;
+      if (!token) return [];
+      setIsLoadingHistory(true);
+      try {
+        const res = await fetch(
+          `${apiUrl}/api/chat/conversations/${conversationId}/history?product_id=${productId}&identity_token=${encodeURIComponent(token)}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          const historyMessages = data.messages || [];
+          return historyMessages.map(
+            (msg, idx) => ({
+              id: `history-${idx}`,
+              content: msg.content,
+              isBot: msg.role === "assistant",
+              timestamp: /* @__PURE__ */ new Date()
+            })
+          );
+        }
+      } catch (error) {
+        console.error("[Crow] Error loading conversation history:", error);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+      return [];
+    },
+    [apiUrl, productId]
+  );
+  const loadAnonymousConversationHistory = useCallback(
+    async (conversationId) => {
+      setIsLoadingHistory(true);
+      try {
+        const res = await fetch(
+          `${apiUrl}/api/chat/conversations/${conversationId}/history/anonymous?product_id=${productId}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          const historyMessages = data.messages || [];
+          return historyMessages.map(
+            (msg, idx) => ({
+              id: `history-${idx}`,
+              content: msg.content,
+              isBot: msg.role === "assistant",
+              timestamp: /* @__PURE__ */ new Date()
+            })
+          );
+        }
+      } catch (error) {
+        console.error("[Crow] Error loading anonymous conversation history:", error);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+      return [];
+    },
+    [apiUrl, productId]
+  );
+  return {
+    conversations,
+    isLoadingHistory,
+    loadConversations,
+    loadConversationHistory,
+    loadAnonymousConversationHistory
+  };
 }
-function useCrowClientOptional() {
-  const context = useContext(CrowContext);
-  return context?.client ?? null;
+function useWorkflow({
+  productId,
+  apiUrl = "",
+  conversationId,
+  selectedModel,
+  onMessage
+}) {
+  const [activeWorkflow, setActiveWorkflow] = useState(null);
+  const abortControllerRef = useRef(null);
+  const startWorkflow = useCallback((name, todos) => {
+    setActiveWorkflow({ name, todos });
+  }, []);
+  const updateTodo = useCallback((todoId, status) => {
+    setActiveWorkflow((prev) => {
+      if (!prev) return null;
+      return {
+        ...prev,
+        todos: prev.todos.map(
+          (todo) => todo.id === todoId ? { ...todo, status } : todo
+        )
+      };
+    });
+  }, []);
+  const markComplete = useCallback(() => {
+    setActiveWorkflow((prev) => {
+      if (!prev) return null;
+      return { ...prev, isComplete: true };
+    });
+  }, []);
+  const endWorkflow = useCallback((delay = 0) => {
+    if (delay > 0) {
+      setTimeout(() => setActiveWorkflow(null), delay);
+    } else {
+      setActiveWorkflow(null);
+    }
+  }, []);
+  const exitWorkflow = useCallback(async () => {
+    abortControllerRef.current = new AbortController();
+    try {
+      const identityToken = window.__crow_identity_token;
+      const response = await fetch(`${apiUrl}/api/chat/message`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          product_id: productId,
+          message: "[EXIT_WORKFLOW]",
+          conversation_id: conversationId,
+          identity_token: identityToken,
+          model: selectedModel
+        }),
+        signal: abortControllerRef.current.signal
+      });
+      if (!response.ok) return;
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (reader) {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          const chunk = decoder.decode(value);
+          const lines = chunk.split("\n");
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              const data = line.slice(6).trim();
+              if (data === "[DONE]") return;
+              try {
+                const parsed = JSON.parse(data);
+                if (parsed.type === "workflow_ended") {
+                  setActiveWorkflow(null);
+                }
+                if (parsed.type === "content" && parsed.content) {
+                  onMessage?.(parsed.content);
+                }
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error("[Crow] Exit workflow error:", error);
+    } finally {
+      abortControllerRef.current = null;
+    }
+  }, [apiUrl, productId, conversationId, selectedModel, onMessage]);
+  return {
+    activeWorkflow,
+    startWorkflow,
+    updateTodo,
+    markComplete,
+    endWorkflow,
+    exitWorkflow
+  };
 }
-function useChat({ client, onStreamEvent }) {
-  const [messages, setMessages] = useState(client.messages);
-  const [isLoading, setIsLoading] = useState(client.isLoading);
-  const onStreamEventRef = useRef(onStreamEvent);
+function useCrowAPI({ onIdentified, onReset } = {}) {
+  const onIdentifiedRef = useRef(onIdentified);
+  const onResetRef = useRef(onReset);
+  const hasCalledInitialRef = useRef(false);
   useEffect(() => {
-    onStreamEventRef.current = onStreamEvent;
+    onIdentifiedRef.current = onIdentified;
+    onResetRef.current = onReset;
   });
   useEffect(() => {
-    const unsubMessages = client.onMessages(setMessages);
-    const unsubLoading = client.onLoading(setIsLoading);
-    setMessages(client.messages);
-    setIsLoading(client.isLoading);
+    window.crow = function(command, options) {
+      const opts = options;
+      switch (command) {
+        case "identify":
+          if (!opts?.token) {
+            console.error("[Crow] identify() requires a token");
+            return;
+          }
+          window.__crow_identity_token = opts.token;
+          const { token, ...metadata } = opts;
+          window.__crow_public_metadata = metadata;
+          console.log("[Crow] User identified");
+          window.dispatchEvent(
+            new CustomEvent("crow:identified", { detail: { token, metadata } })
+          );
+          break;
+        case "resetUser":
+          window.__crow_identity_token = void 0;
+          window.__crow_public_metadata = void 0;
+          console.log("[Crow] User reset");
+          window.dispatchEvent(new CustomEvent("crow:reset"));
+          break;
+        case "registerTools":
+          if (!opts || typeof opts !== "object") {
+            console.error("[Crow] registerTools() requires an object");
+            return;
+          }
+          if (!window.__crow_client_tools) {
+            window.__crow_client_tools = {};
+          }
+          for (const [toolName, handler] of Object.entries(opts)) {
+            if (typeof handler === "function") {
+              window.__crow_client_tools[toolName] = handler;
+              console.log(`[Crow] Registered tool: ${toolName}`);
+            }
+          }
+          break;
+        case "runJourney":
+          if (!opts?.journeyId) {
+            console.error("[Crow] runJourney() requires a journeyId");
+            return;
+          }
+          window.dispatchEvent(
+            new CustomEvent("crow:runJourney", {
+              detail: { journeyId: opts.journeyId, inputs: opts.inputs || {} }
+            })
+          );
+          break;
+        default:
+          console.warn(`[Crow] Unknown command: ${command}`);
+      }
+    };
+    console.log("[Crow] API ready");
+    const handleIdentified = () => onIdentifiedRef.current?.();
+    const handleReset = () => onResetRef.current?.();
+    window.addEventListener("crow:identified", handleIdentified);
+    window.addEventListener("crow:reset", handleReset);
+    if (window.__crow_identity_token && !hasCalledInitialRef.current) {
+      hasCalledInitialRef.current = true;
+      onIdentifiedRef.current?.();
+    }
     return () => {
-      unsubMessages();
-      unsubLoading();
+      window.removeEventListener("crow:identified", handleIdentified);
+      window.removeEventListener("crow:reset", handleReset);
     };
-  }, [client]);
-  const sendMessage = useCallback(
-    async (content) => {
-      for await (const event of client.sendMessage(content)) {
-        onStreamEventRef.current?.(event);
+  }, []);
+  const executeClientTool = useCallback(
+    async (toolName, args) => {
+      const handler = window.__crow_client_tools?.[toolName];
+      if (handler) {
+        try {
+          return await handler(args);
+        } catch (err) {
+          console.error(`[Crow] Client tool error: ${toolName}`, err);
+          return { status: "error", error: String(err) };
+        }
       }
+      console.warn(`[Crow] No handler for: ${toolName}`);
+      return { status: "error", error: "No handler registered" };
     },
-    [client]
+    []
   );
-  const stop = useCallback(() => {
-    client.stop();
-  }, [client]);
-  const clearMessages = useCallback(() => {
-    client.clearMessages();
-  }, [client]);
+  return { executeClientTool };
+}
+
+// src/styles/defaults.ts
+var DEFAULT_WIDGET_STYLES = {
+  // ═══════════════════════════════════════════════════════════
+  // COLORS
+  // ═══════════════════════════════════════════════════════════
+  colors: {
+    // Primary accent
+    primary: "#000000",
+    // Widget container
+    background: "rgba(255, 255, 255, 0.95)",
+    border: "#d1d5db",
+    text: "#111827",
+    // Bot messages
+    botBubble: "#000000",
+    botText: "#ffffff",
+    // User messages
+    userBubble: "#ffffff",
+    userText: "#000000",
+    userBorder: "#000000",
+    // Floating chat bubble
+    bubbleBackground: "#ffffff",
+    bubbleBorder: "#d1d5db",
+    bubbleIcon: "#111827",
+    // Messages container
+    messagesBackground: "rgba(255, 255, 255, 0.5)"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // TYPOGRAPHY
+  // ═══════════════════════════════════════════════════════════
+  typography: {
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: 14,
+    headerFontSize: 16
+  },
+  // ═══════════════════════════════════════════════════════════
+  // ANIMATIONS
+  // ═══════════════════════════════════════════════════════════
+  animations: {
+    duration: 0.3,
+    easing: "easeInOut"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // DIMENSIONS
+  // ═══════════════════════════════════════════════════════════
+  dimensions: {
+    width: 400,
+    maxHeight: 600,
+    previewHeight: 700,
+    messagesMaxHeight: 350,
+    borderRadius: 24,
+    padding: 20
+  },
+  // ═══════════════════════════════════════════════════════════
+  // POSITIONING (floating widget only)
+  // ═══════════════════════════════════════════════════════════
+  position: {
+    right: 16,
+    bottom: 80,
+    bubbleRight: 16,
+    bubbleBottom: 16
+  },
+  // ═══════════════════════════════════════════════════════════
+  // CHAT BUBBLE (floating button)
+  // ═══════════════════════════════════════════════════════════
+  bubble: {
+    size: 48,
+    iconSize: 24
+  },
+  // ═══════════════════════════════════════════════════════════
+  // SHADOWS
+  // ═══════════════════════════════════════════════════════════
+  shadows: {
+    widget: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    bubble: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // BRANDING
+  // ═══════════════════════════════════════════════════════════
+  branding: {
+    showPoweredBy: true,
+    poweredByText: "Powered by Crow",
+    showLogo: true,
+    logoUrl: "/static/crow.png"
+  }
+};
+var DEFAULT_COPILOT_STYLES = {
+  // ═══════════════════════════════════════════════════════════
+  // COLORS (same as widget by default)
+  // ═══════════════════════════════════════════════════════════
+  colors: {
+    primary: "#000000",
+    background: "rgba(255, 255, 255, 0.95)",
+    border: "#d1d5db",
+    text: "#111827",
+    botBubble: "#000000",
+    botText: "#ffffff",
+    userBubble: "#ffffff",
+    userText: "#000000",
+    userBorder: "#000000",
+    bubbleBackground: "#ffffff",
+    bubbleBorder: "#d1d5db",
+    bubbleIcon: "#111827",
+    messagesBackground: "rgba(255, 255, 255, 0.5)"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // TYPOGRAPHY
+  // ═══════════════════════════════════════════════════════════
+  typography: {
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: 14,
+    headerFontSize: 16
+  },
+  // ═══════════════════════════════════════════════════════════
+  // ANIMATIONS
+  // ═══════════════════════════════════════════════════════════
+  animations: {
+    duration: 0.3,
+    easing: "easeInOut"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // DIMENSIONS
+  // ═══════════════════════════════════════════════════════════
+  dimensions: {
+    width: 400,
+    headerHeight: 56,
+    borderRadius: 16,
+    padding: 16
+  },
+  // ═══════════════════════════════════════════════════════════
+  // POSITIONING
+  // ═══════════════════════════════════════════════════════════
+  position: {
+    side: "right"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // BRANDING
+  // ═══════════════════════════════════════════════════════════
+  branding: {
+    showPoweredBy: true,
+    poweredByText: "Powered by Crow"
+  }
+};
+
+// src/styles/utils.ts
+function deepMerge(target, source) {
+  if (!source) return target;
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue !== void 0 && sourceValue !== null && typeof sourceValue === "object" && !Array.isArray(sourceValue) && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+      result[key] = deepMerge(
+        targetValue,
+        sourceValue
+      );
+    } else if (sourceValue !== void 0) {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+function mergeWidgetStyles(dbStyles, propStyles) {
+  let result = { ...DEFAULT_WIDGET_STYLES };
+  if (dbStyles) {
+    result = {
+      colors: deepMerge(result.colors, dbStyles.colors),
+      typography: deepMerge(result.typography, dbStyles.typography),
+      animations: deepMerge(result.animations, dbStyles.animations),
+      dimensions: deepMerge(result.dimensions, dbStyles.dimensions),
+      position: deepMerge(result.position, dbStyles.position),
+      bubble: deepMerge(result.bubble, dbStyles.bubble),
+      shadows: deepMerge(result.shadows, dbStyles.shadows),
+      branding: deepMerge(result.branding, dbStyles.branding)
+    };
+  }
+  if (propStyles) {
+    result = {
+      colors: deepMerge(result.colors, propStyles.colors),
+      typography: deepMerge(result.typography, propStyles.typography),
+      animations: deepMerge(result.animations, propStyles.animations),
+      dimensions: deepMerge(result.dimensions, propStyles.dimensions),
+      position: deepMerge(result.position, propStyles.position),
+      bubble: deepMerge(result.bubble, propStyles.bubble),
+      shadows: deepMerge(result.shadows, propStyles.shadows),
+      branding: deepMerge(result.branding, propStyles.branding)
+    };
+  }
+  return result;
+}
+function mergeCopilotStyles(dbStyles, propStyles) {
+  let result = { ...DEFAULT_COPILOT_STYLES };
+  if (dbStyles) {
+    result = {
+      colors: deepMerge(result.colors, dbStyles.colors),
+      typography: deepMerge(result.typography, dbStyles.typography),
+      animations: deepMerge(result.animations, dbStyles.animations),
+      dimensions: deepMerge(result.dimensions, dbStyles.dimensions),
+      position: deepMerge(result.position, dbStyles.position),
+      branding: deepMerge(result.branding, dbStyles.branding)
+    };
+  }
+  if (propStyles) {
+    result = {
+      colors: deepMerge(result.colors, propStyles.colors),
+      typography: deepMerge(result.typography, propStyles.typography),
+      animations: deepMerge(result.animations, propStyles.animations),
+      dimensions: deepMerge(result.dimensions, propStyles.dimensions),
+      position: deepMerge(result.position, propStyles.position),
+      branding: deepMerge(result.branding, propStyles.branding)
+    };
+  }
+  return result;
+}
+function stylesToCSSVariables(styles2) {
   return {
-    messages,
+    // Colors
+    "--crow-color-primary": styles2.colors.primary,
+    "--crow-color-background": styles2.colors.background,
+    "--crow-color-text": styles2.colors.text,
+    "--crow-color-border": styles2.colors.border,
+    "--crow-color-bot-bubble": styles2.colors.botBubble,
+    "--crow-color-bot-text": styles2.colors.botText,
+    "--crow-color-user-bubble": styles2.colors.userBubble,
+    "--crow-color-user-text": styles2.colors.userText,
+    "--crow-color-user-border": styles2.colors.userBorder,
+    "--crow-color-messages-bg": styles2.colors.messagesBackground,
+    // Typography
+    "--crow-font-family": styles2.typography.fontFamily,
+    "--crow-font-size": `${styles2.typography.fontSize}px`,
+    "--crow-header-font-size": `${styles2.typography.headerFontSize}px`,
+    // Animations
+    "--crow-animation-duration": `${styles2.animations.duration}s`,
+    "--crow-animation-easing": styles2.animations.easing
+  };
+}
+
+// src/hooks/useWidgetStyles.ts
+var styleCache = /* @__PURE__ */ new Map();
+async function fetchWidgetConfig(productId, apiUrl) {
+  const baseUrl = apiUrl || "";
+  const url = `${baseUrl}/api/products/${productId}/widget-config`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch widget config: ${response.status} ${response.statusText}`);
+  }
+  return response.json();
+}
+function useWidgetStyles({
+  productId,
+  apiUrl,
+  propStyles,
+  skip = false,
+  cacheKey
+}) {
+  const key = cacheKey || productId;
+  const [isLoading, setIsLoading] = useState(!skip && !styleCache.has(key));
+  const [error, setError] = useState(null);
+  const [dbStyles, setDbStyles] = useState(
+    styleCache.get(key)?.widgetStyles
+  );
+  const [agentName, setAgentName] = useState(
+    styleCache.get(key)?.agentName || "Assistant"
+  );
+  const hasFetchedRef = useRef(false);
+  const fetchStyles = async () => {
+    if (skip) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const config = await fetchWidgetConfig(productId, apiUrl);
+      styleCache.set(key, config);
+      setDbStyles(config.widgetStyles);
+      setAgentName(config.agentName || "Assistant");
+    } catch (err) {
+      console.error("[CrowWidget] Failed to fetch styles:", err);
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (skip || hasFetchedRef.current) return;
+    const cached = styleCache.get(key);
+    if (cached) {
+      setDbStyles(cached.widgetStyles);
+      setAgentName(cached.agentName || "Assistant");
+      setIsLoading(false);
+      return;
+    }
+    hasFetchedRef.current = true;
+    fetchStyles();
+  }, [productId, apiUrl, skip, key]);
+  const styles2 = mergeWidgetStyles(dbStyles, propStyles);
+  return {
+    styles: styles2,
     isLoading,
-    sendMessage,
-    stop,
-    clearMessages
+    error,
+    agentName,
+    refetch: fetchStyles
   };
 }
-function ChatBubble({ isOpen, onClick, className }) {
+function useCopilotStyles({
+  productId,
+  apiUrl,
+  propStyles,
+  skip = false,
+  cacheKey
+}) {
+  const key = cacheKey || productId;
+  const [isLoading, setIsLoading] = useState(!skip && !styleCache.has(key));
+  const [error, setError] = useState(null);
+  const [dbStyles, setDbStyles] = useState(
+    styleCache.get(key)?.copilotStyles
+  );
+  const [agentName, setAgentName] = useState(
+    styleCache.get(key)?.agentName || "Assistant"
+  );
+  const hasFetchedRef = useRef(false);
+  const fetchStyles = async () => {
+    if (skip) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const config = await fetchWidgetConfig(productId, apiUrl);
+      styleCache.set(key, config);
+      setDbStyles(config.copilotStyles);
+      setAgentName(config.agentName || "Assistant");
+    } catch (err) {
+      console.error("[CrowCopilot] Failed to fetch styles:", err);
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (skip || hasFetchedRef.current) return;
+    const cached = styleCache.get(key);
+    if (cached) {
+      setDbStyles(cached.copilotStyles);
+      setAgentName(cached.agentName || "Assistant");
+      setIsLoading(false);
+      return;
+    }
+    hasFetchedRef.current = true;
+    fetchStyles();
+  }, [productId, apiUrl, skip, key]);
+  const styles2 = mergeCopilotStyles(dbStyles, propStyles);
+  return {
+    styles: styles2,
+    isLoading,
+    error,
+    agentName,
+    refetch: fetchStyles
+  };
+}
+function clearStyleCache(productId) {
+  if (productId) {
+    styleCache.delete(productId);
+  } else {
+    styleCache.clear();
+  }
+}
+function usePreviewWidgetStyles(previewStyles) {
+  return {
+    styles: mergeWidgetStyles(void 0, previewStyles)
+  };
+}
+function usePreviewCopilotStyles(previewStyles) {
+  return {
+    styles: mergeCopilotStyles(void 0, previewStyles)
+  };
+}
+var WidgetStyleContext = createContext(null);
+function WidgetStyleProvider({
+  children,
+  styles: styles2,
+  agentName = "Assistant",
+  isLoading = false,
+  variant = "floating"
+}) {
+  const value = useMemo(
+    () => ({ styles: styles2, agentName, isLoading, variant }),
+    [styles2, agentName, isLoading, variant]
+  );
+  return /* @__PURE__ */ jsx(WidgetStyleContext.Provider, { value, children });
+}
+function useWidgetStyleContext() {
+  const context = useContext(WidgetStyleContext);
+  if (!context) {
+    throw new Error(
+      "useWidgetStyleContext must be used within a WidgetStyleProvider. Make sure your component is wrapped with CrowWidget or WidgetStyleProvider."
+    );
+  }
+  return context;
+}
+function useWidgetStyles2() {
+  const context = useContext(WidgetStyleContext);
+  return context?.styles ?? DEFAULT_WIDGET_STYLES;
+}
+var CopilotStyleContext = createContext(null);
+function CopilotStyleProvider({
+  children,
+  styles: styles2,
+  agentName = "Assistant",
+  isLoading = false
+}) {
+  const value = useMemo(
+    () => ({ styles: styles2, agentName, isLoading }),
+    [styles2, agentName, isLoading]
+  );
+  return /* @__PURE__ */ jsx(CopilotStyleContext.Provider, { value, children });
+}
+function useCopilotStyleContext() {
+  const context = useContext(CopilotStyleContext);
+  if (!context) {
+    throw new Error(
+      "useCopilotStyleContext must be used within a CopilotStyleProvider. Make sure your component is wrapped with CrowCopilot or CopilotStyleProvider."
+    );
+  }
+  return context;
+}
+function useCopilotStyles2() {
+  const context = useContext(CopilotStyleContext);
+  return context?.styles ?? DEFAULT_COPILOT_STYLES;
+}
+function ChatBubble({ isExpanded, onClick }) {
+  const { styles: styles2 } = useWidgetStyleContext();
   return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
-      className: clsx(
-        "crow-fixed crow-z-[999999] crow-rounded-full",
-        "crow-w-14 crow-h-14 crow-flex crow-items-center crow-justify-center",
-        "crow-bg-crow-primary hover:crow-bg-crow-primary-dark",
-        "crow-shadow-lg hover:crow-shadow-xl crow-transition-all crow-duration-300",
-        "hover:crow-scale-110",
-        className
-      ),
+      className: "crow-fixed crow-z-[999999] crow-rounded-full crow-flex crow-items-center crow-justify-center crow-shadow-2xl hover:crow-scale-110 crow-transition-all crow-duration-500 crow-border crow-backdrop-blur-md",
       style: {
-        right: "20px",
-        bottom: "20px"
+        width: styles2.bubble.size,
+        height: styles2.bubble.size,
+        right: styles2.position.bubbleRight,
+        bottom: styles2.position.bubbleBottom,
+        background: styles2.colors.bubbleBackground,
+        borderColor: styles2.colors.bubbleBorder,
+        boxShadow: styles2.shadows.bubble,
+        color: styles2.colors.bubbleIcon
       },
-      "aria-label": isOpen ? "Close chat" : "Open chat",
-      children: isOpen ? /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "crow-w-6 crow-h-6 crow-text-white",
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M19 9l-7 7-7-7"
-            }
-          )
-        }
-      ) : /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "crow-w-6 crow-h-6 crow-text-white",
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-            }
-          )
-        }
-      )
+      "aria-label": isExpanded ? "Close Chat" : "Open Chat",
+      children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: styles2.bubble.iconSize, strokeWidth: 2 }) : /* @__PURE__ */ jsx(MessageCircle, { size: styles2.bubble.iconSize, strokeWidth: 2 })
     }
   );
 }
+var GlassCard = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "crow-border crow-flex crow-flex-col crow-gap-6 crow-rounded-2xl crow-py-6 crow-backdrop-blur-md",
+          className
+        ),
+        style: { background: "rgba(255, 255, 255, 0.3)", borderColor: "rgba(229, 231, 235, 0.3)", ...props.style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+GlassCard.displayName = "GlassCard";
+var WidgetShell = forwardRef(
+  ({ children, className }, ref) => {
+    const { styles: styles2, variant } = useWidgetStyleContext();
+    const baseStyle = {
+      borderRadius: styles2.dimensions.borderRadius,
+      padding: styles2.dimensions.padding,
+      background: styles2.colors.background,
+      borderColor: styles2.colors.border,
+      color: styles2.colors.text,
+      boxShadow: styles2.shadows.widget,
+      fontFamily: styles2.typography.fontFamily,
+      fontSize: styles2.typography.fontSize
+    };
+    if (variant === "embedded") {
+      return /* @__PURE__ */ jsx(
+        GlassCard,
+        {
+          ref,
+          className: `crow-flex crow-flex-col crow-shadow-2xl crow-gap-3 crow-w-full crow-h-full ${className ?? ""}`,
+          style: {
+            ...baseStyle,
+            maxWidth: styles2.dimensions.width,
+            maxHeight: styles2.dimensions.previewHeight
+          },
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      GlassCard,
+      {
+        ref,
+        className: `crow-fixed crow-z-[999999] crow-shadow-2xl crow-gap-3 crow-transition-all crow-duration-500 crow-flex crow-flex-col ${className ?? ""}`,
+        style: {
+          ...baseStyle,
+          width: `min(${styles2.dimensions.width}px, calc(100vw - 32px))`,
+          height: `min(${styles2.dimensions.maxHeight}px, calc(100vh - 120px))`,
+          right: styles2.position.right,
+          bottom: styles2.position.bottom
+        },
+        children
+      }
+    );
+  }
+);
+WidgetShell.displayName = "WidgetShell";
 function WidgetHeader({
-  title = "Chat",
+  isVerifiedUser,
+  showConversationList,
   onNewChat,
-  onClose,
-  showNewChat = true,
-  showClose = false,
-  className
+  onToggleHistory,
+  showMinimize = false,
+  isMinimized = false,
+  onToggleMinimize
 }) {
+  const { agentName, styles: styles2 } = useWidgetStyleContext();
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx(
-        "crow-flex crow-items-center crow-justify-between crow-px-4 crow-py-3",
-        "crow-border-b crow-border-gray-200 crow-bg-white",
-        className
-      ),
+      className: "crow-flex crow-items-center crow-justify-between crow-mb-3 crow-pb-2 crow-border-b",
+      style: { borderColor: styles2.colors.border },
       children: [
-        /* @__PURE__ */ jsx("h2", { className: "crow-font-semibold crow-text-gray-900", children: title }),
-        /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-2", children: [
-          showNewChat && onNewChat && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center crow-gap-2", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "crow-text-sm crow-font-semibold",
+            style: {
+              color: styles2.colors.text,
+              fontSize: styles2.typography.headerFontSize
+            },
+            children: agentName
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1", children: [
+          /* @__PURE__ */ jsx(
             "button",
             {
               onClick: onNewChat,
-              className: "crow-p-1.5 crow-rounded-lg crow-text-gray-500 hover:crow-bg-gray-100 hover:crow-text-gray-700 crow-transition-colors",
-              "aria-label": "New chat",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "crow-w-5 crow-h-5",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M12 4v16m8-8H4"
-                    }
-                  )
-                }
-              )
+              className: "crow-p-1.5 hover:crow-bg-gray-200 crow-rounded crow-transition-colors",
+              "aria-label": "New Chat",
+              title: "New Chat",
+              children: /* @__PURE__ */ jsx(Plus, { size: 18, className: "crow-text-gray-700" })
             }
           ),
-          showClose && onClose && /* @__PURE__ */ jsx(
+          isVerifiedUser && /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: onClose,
-              className: "crow-p-1.5 crow-rounded-lg crow-text-gray-500 hover:crow-bg-gray-100 hover:crow-text-gray-700 crow-transition-colors",
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "crow-w-5 crow-h-5",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M6 18L18 6M6 6l12 12"
-                    }
-                  )
-                }
-              )
+              onClick: onToggleHistory,
+              className: `crow-p-1.5 hover:crow-bg-gray-200 crow-rounded crow-transition-colors ${showConversationList ? "crow-bg-gray-200" : ""}`,
+              "aria-label": "Conversation History",
+              title: "Conversation History",
+              children: /* @__PURE__ */ jsx(History, { size: 18, className: "crow-text-gray-700" })
+            }
+          ),
+          showMinimize && onToggleMinimize && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onToggleMinimize,
+              className: "crow-p-1 hover:crow-bg-gray-200 crow-rounded crow-transition-colors",
+              "aria-label": isMinimized ? "Expand" : "Minimize",
+              children: isMinimized ? /* @__PURE__ */ jsx(ChevronUp, { size: 18, className: "crow-text-gray-900" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 18, className: "crow-text-gray-900" })
             }
           )
         ] })
@@ -205,420 +1202,1403 @@ function WidgetHeader({
     }
   );
 }
-function formatTime(date) {
-  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+function StreamingText({
+  content,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        components: {
+          strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "crow-font-bold", children }),
+          ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "crow-list-disc crow-pl-5 crow-my-1", children }),
+          ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "crow-list-decimal crow-pl-5 crow-my-1", children }),
+          li: ({ children }) => /* @__PURE__ */ jsx("li", { children }),
+          p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "crow-mb-1 last:crow-mb-0", children }),
+          a: ({ href, children }) => /* @__PURE__ */ jsx(
+            "a",
+            {
+              href,
+              className: "crow-underline hover:crow-text-blue-300",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children
+            }
+          ),
+          code: ({ className, children, ...props }) => {
+            const isInline = !className;
+            return isInline ? /* @__PURE__ */ jsx(
+              "code",
+              {
+                className: "crow-bg-gray-100 crow-px-1 crow-py-0.5 crow-rounded crow-text-sm",
+                ...props,
+                children
+              }
+            ) : /* @__PURE__ */ jsx("code", { className, ...props, children });
+          },
+          pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "crow-bg-gray-100 crow-p-2 crow-rounded crow-my-1 crow-overflow-x-auto crow-text-sm", children })
+        },
+        children: content
+      }
+    ),
+    isStreaming && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "crow-inline-block crow-w-0.5 crow-h-4 crow-ml-0.5 crow-align-text-bottom",
+        style: {
+          backgroundColor: "currentColor",
+          animation: "cursor-blink 1s ease-in-out infinite"
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes cursor-blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      ` })
+  ] });
+}
+function ThinkingIndicator() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "crow-inline-block crow-font-medium",
+        style: {
+          background: "linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.4) 100%)",
+          backgroundSize: "200% 100%",
+          WebkitBackgroundClip: "text",
+          backgroundClip: "text",
+          WebkitTextFillColor: "transparent",
+          animation: "shimmer 1.5s ease-in-out infinite"
+        },
+        children: "Thinking..."
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes shimmer {
+          0% { background-position: 100% 0; }
+          100% { background-position: -100% 0; }
+        }
+      ` })
+  ] });
+}
+function LoadingHistory() {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      className: "crow-flex crow-justify-center crow-items-center crow-py-8",
+      children: /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-flex-col crow-items-center crow-gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "crow-flex crow-gap-1", children: [0, 0.15, 0.3].map((delay, i) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "crow-w-2 crow-h-2 crow-bg-gray-400 crow-rounded-full",
+            animate: { y: [0, -8, 0] },
+            transition: { duration: 0.6, repeat: Infinity, delay }
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx("span", { className: "crow-text-sm crow-text-gray-500", children: "Loading conversation..." })
+      ] })
+    }
+  );
+}
+var THINKING_MESSAGES = [
+  "Pondering",
+  "Analyzing",
+  "Reasoning",
+  "Considering",
+  "Processing",
+  "Evaluating",
+  "Thinking",
+  "Exploring",
+  "Connecting",
+  "Synthesizing"
+];
+function getRandomThinkingMessage() {
+  const idx = Math.floor(Math.random() * THINKING_MESSAGES.length);
+  return THINKING_MESSAGES[idx] + "...";
+}
+function ShimmeringContent({ children }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "crow-inline-block",
+      style: {
+        background: "linear-gradient(90deg, rgba(100,100,100,0.6) 0%, rgba(100,100,100,1) 50%, rgba(100,100,100,0.6) 100%)",
+        backgroundSize: "200% 100%",
+        WebkitBackgroundClip: "text",
+        backgroundClip: "text",
+        WebkitTextFillColor: "transparent",
+        animation: "shimmer 1.5s ease-in-out infinite"
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes shimmer {
+          0% { background-position: 100% 0; }
+          100% { background-position: -100% 0; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function ReasoningTrace({ thinking, isComplete, toolCalls = [], isWaiting = false }) {
+  const hasThinking = !!thinking && thinking.trim().length > 0;
+  const hasToolCalls = toolCalls.length > 0;
+  if (!isWaiting && !hasThinking && !hasToolCalls) return null;
+  return /* @__PURE__ */ jsx("div", { className: "crow-flex crow-justify-start crow-mb-2", children: /* @__PURE__ */ jsxs("div", { className: "crow-max-w-[90%] crow-space-y-1.5", children: [
+    isWaiting && !hasThinking && /* @__PURE__ */ jsx(WaitingIndicator, {}),
+    hasThinking && /* @__PURE__ */ jsx(ThinkingBlock, { thinking, isComplete }),
+    toolCalls.map((tool) => /* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tool }, tool.id))
+  ] }) });
+}
+function WaitingIndicator() {
+  return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1.5 crow-text-xs crow-text-gray-500", children: [
+    /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center crow-justify-center crow-w-4 crow-h-4", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }) }),
+    /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) })
+  ] });
+}
+function ThinkingBlock({ thinking, isComplete }) {
+  const [isExpanded, setIsExpanded] = useState(!isComplete);
+  useLayoutEffect(() => {
+    setIsExpanded(!isComplete);
+  }, [isComplete]);
+  const isInProgress = !isComplete;
+  return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-flex-col crow-gap-1 crow-text-xs", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: `crow-flex crow-items-center crow-gap-1.5 crow-select-none crow-transition-colors ${isInProgress ? "crow-text-gray-500" : "crow-text-gray-600 hover:crow-text-gray-800"} crow-cursor-pointer`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center crow-justify-center crow-w-4 crow-h-4", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }) : /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }),
+          /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) : "Thought" }),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { rotate: isExpanded ? 90 : 0 },
+              transition: { duration: 0.15 },
+              className: "crow-flex-shrink-0",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "crow-w-3 crow-h-3" })
+            }
+          ),
+          isComplete && /* @__PURE__ */ jsx(Check, { className: "crow-w-3 crow-h-3 crow-text-green-500" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.15 },
+        className: "crow-overflow-hidden",
+        children: /* @__PURE__ */ jsx("div", { className: "crow-border-l-2 crow-border-gray-200 crow-pl-3 crow-ml-2", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `crow-text-xs crow-leading-relaxed crow-whitespace-pre-wrap ${isComplete ? "crow-text-gray-500" : "crow-text-gray-600"}`,
+            children: thinking
+          }
+        ) })
+      }
+    ) })
+  ] });
+}
+function ToolCallBlock({ toolCall }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasArgs = Object.keys(toolCall.arguments || {}).length > 0;
+  const isExecuting = toolCall.status === "executing";
+  const isComplete = toolCall.status === "complete";
+  const isError = toolCall.status === "error";
+  return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-flex-col crow-gap-1 crow-text-xs", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => hasArgs && setExpanded(!expanded),
+        className: `crow-flex crow-items-center crow-gap-1.5 crow-select-none crow-transition-colors ${hasArgs ? "crow-cursor-pointer hover:crow-text-gray-800" : "crow-cursor-default"} ${isExecuting ? "crow-text-gray-500" : "crow-text-gray-600"}`,
+        disabled: !hasArgs,
+        children: [
+          hasArgs && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { rotate: expanded ? 90 : 0 },
+              transition: { duration: 0.15 },
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "crow-w-3 crow-h-3" })
+            }
+          ),
+          isExecuting && /* @__PURE__ */ jsx(Loader2, { className: "crow-w-3 crow-h-3 crow-animate-spin crow-text-blue-500" }),
+          isComplete && /* @__PURE__ */ jsx(Check, { className: "crow-w-3 crow-h-3 crow-text-green-500" }),
+          isError && /* @__PURE__ */ jsx("span", { className: "crow-w-3 crow-h-3 crow-text-red-500", children: "\u2715" }),
+          /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: toolCall.name }),
+          /* @__PURE__ */ jsxs("span", { className: "crow-text-gray-400", children: [
+            isExecuting && "running...",
+            isComplete && "done",
+            isError && "failed"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && hasArgs && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.15 },
+        className: "crow-overflow-hidden",
+        children: /* @__PURE__ */ jsx("pre", { className: "crow-mt-1 crow-p-2 crow-bg-gray-100 crow-rounded crow-text-xs crow-font-mono crow-text-gray-700 crow-overflow-x-auto crow-max-h-32 crow-overflow-y-auto crow-ml-4", children: JSON.stringify(toolCall.arguments, null, 2) })
+      }
+    ) })
+  ] });
 }
-function MessageBubble({ message, isStreaming = false }) {
-  const isUser = message.role === "user";
-  const isWaiting = !message.content && !isUser;
+function MessageBubble({
+  message,
+  toolCalls = [],
+  isLoading = false
+}) {
+  const styles2 = useWidgetStyles2();
+  const isWaiting = message.content === "Thinking..." || message.isBot && isLoading && !message.content;
+  const hasThinking = message.isBot && message.thinking;
+  const hasContent = message.content && message.content !== "Thinking...";
+  const hasToolCalls = toolCalls.length > 0;
+  const showReasoningTrace = message.isBot && (isWaiting || hasThinking || hasToolCalls);
+  const isStreaming = Boolean(message.isBot && isLoading && hasContent);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx(
-        "crow-flex crow-flex-col",
-        isUser ? "crow-items-end" : "crow-items-start"
-      ),
+      id: message.id,
+      className: `crow-flex crow-flex-col ${message.isBot ? "crow-items-start" : "crow-items-end"}`,
       children: [
-        message.thinking && /* @__PURE__ */ jsx("div", { className: "crow-mb-2 crow-text-xs crow-text-gray-500 crow-bg-gray-100 crow-rounded-lg crow-px-3 crow-py-2 crow-max-w-[80%]", children: /* @__PURE__ */ jsxs("details", { open: !message.thinkingComplete, children: [
-          /* @__PURE__ */ jsx("summary", { className: "crow-cursor-pointer crow-font-medium", children: message.thinkingComplete ? "Reasoning" : "Thinking..." }),
-          /* @__PURE__ */ jsx("div", { className: "crow-mt-1 crow-text-gray-600 crow-whitespace-pre-wrap", children: message.thinking })
-        ] }) }),
-        isWaiting && /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1 crow-text-gray-500 crow-text-sm crow-px-3 crow-py-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse", children: "\u25CF" }),
-          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse crow-animation-delay-100", children: "\u25CF" }),
-          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse crow-animation-delay-200", children: "\u25CF" })
-        ] }),
-        message.content && /* @__PURE__ */ jsxs(
+        showReasoningTrace && /* @__PURE__ */ jsx(
+          ReasoningTrace,
+          {
+            thinking: message.thinking,
+            isComplete: message.thinkingComplete,
+            toolCalls,
+            isWaiting: isWaiting && !hasThinking
+          }
+        ),
+        hasContent && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx(
-              "crow-max-w-[80%] crow-rounded-2xl crow-px-4 crow-py-2 crow-transition-all",
-              isUser ? "crow-bg-crow-primary crow-text-white" : "crow-bg-gray-100 crow-text-gray-900"
-            ),
+            className: "crow-max-w-[80%] crow-rounded-2xl crow-px-4 crow-py-2 crow-transition-all crow-duration-150",
+            style: message.isBot ? {
+              background: styles2.colors.botBubble,
+              color: styles2.colors.botText
+            } : {
+              background: styles2.colors.userBubble,
+              color: styles2.colors.userText,
+              border: `1px solid ${styles2.colors.userBorder}`
+            },
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "crow-text-sm crow-whitespace-pre-wrap", children: [
-                message.content,
-                isStreaming && /* @__PURE__ */ jsx("span", { className: "crow-inline-block crow-w-1 crow-h-4 crow-ml-0.5 crow-bg-current crow-animate-pulse" })
-              ] }),
+              /* @__PURE__ */ jsx("div", { className: "crow-text-sm crow-whitespace-pre-wrap", children: message.isBot ? /* @__PURE__ */ jsx(
+                StreamingText,
+                {
+                  content: message.content,
+                  isStreaming
+                }
+              ) : /* @__PURE__ */ jsx(
+                ReactMarkdown,
+                {
+                  components: {
+                    strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "crow-font-bold", children }),
+                    ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "crow-list-disc crow-pl-5 crow-my-1", children }),
+                    ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "crow-list-decimal crow-pl-5 crow-my-1", children }),
+                    li: ({ children }) => /* @__PURE__ */ jsx("li", { children }),
+                    p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "crow-mb-1 last:crow-mb-0", children }),
+                    a: ({ href, children }) => /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href,
+                        className: "crow-underline hover:crow-text-blue-300",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children
+                      }
+                    )
+                  },
+                  children: message.content
+                }
+              ) }),
               /* @__PURE__ */ jsx("div", { className: "crow-text-xs crow-opacity-60 crow-mt-1", children: formatTime(message.timestamp) })
             ]
           }
-        ),
-        message.citations && message.citations.length > 0 && /* @__PURE__ */ jsx("div", { className: "crow-mt-1 crow-flex crow-flex-wrap crow-gap-1", children: message.citations.map((citation, idx) => /* @__PURE__ */ jsx(
-          "span",
+        )
+      ]
+    }
+  );
+}
+function MessageList({
+  messages,
+  activeToolCalls,
+  isLoadingHistory,
+  isGenerating = false
+}) {
+  if (isLoadingHistory) {
+    return /* @__PURE__ */ jsx(LoadingHistory, {});
+  }
+  const lastBotIndex = messages.reduce(
+    (lastIdx, m, i) => m.isBot ? i : lastIdx,
+    -1
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: messages.map((msg, index) => /* @__PURE__ */ jsx(
+    MessageBubble,
+    {
+      message: msg,
+      toolCalls: index === lastBotIndex ? activeToolCalls : void 0,
+      isLoading: index === lastBotIndex && isGenerating
+    },
+    msg.id
+  )) });
+}
+var MessagesContainer = forwardRef(
+  ({ children, maxHeight }, ref) => {
+    const styles2 = useWidgetStyles2();
+    const internalRef = useRef(null);
+    const lastScrollHeightRef = useRef(0);
+    const isUserScrollingRef = useRef(false);
+    const containerRef = ref || internalRef;
+    const isNearBottom = useCallback(() => {
+      const container = containerRef.current;
+      if (!container) return true;
+      const threshold = 100;
+      return container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+    }, [containerRef]);
+    const scrollToBottom = useCallback(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: "smooth"
+      });
+    }, [containerRef]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const handleScroll = () => {
+        isUserScrollingRef.current = !isNearBottom();
+      };
+      container.addEventListener("scroll", handleScroll, { passive: true });
+      return () => container.removeEventListener("scroll", handleScroll);
+    }, [containerRef, isNearBottom]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const currentHeight = container.scrollHeight;
+      const heightChanged = currentHeight !== lastScrollHeightRef.current;
+      if (heightChanged) {
+        lastScrollHeightRef.current = currentHeight;
+        if (!isUserScrollingRef.current || isNearBottom()) {
+          scrollToBottom();
+        }
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref: containerRef,
+        id: MESSAGES_CONTAINER_ID,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: styles2.animations.duration },
+        className: "crow-relative crow-flex-1 crow-min-h-0 crow-rounded-2xl crow-mb-3 crow-overflow-y-auto crow-p-4 crow-space-y-3 crow-pointer-events-auto",
+        style: {
+          background: styles2.colors.messagesBackground,
+          ...maxHeight && { maxHeight }
+        },
+        children
+      }
+    );
+  }
+);
+MessagesContainer.displayName = "MessagesContainer";
+function ConversationList({
+  conversations,
+  currentConversationId,
+  onSelect,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 },
+      className: "crow-mb-3 crow-rounded-xl crow-bg-gray-50 crow-border crow-border-gray-200",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crow-p-2 crow-border-b crow-border-gray-200 crow-flex crow-justify-between crow-items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "crow-text-sm crow-font-medium crow-text-gray-700", children: "Recent Conversations" }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "crow-p-1 hover:crow-bg-gray-200 crow-rounded", children: /* @__PURE__ */ jsx(X, { size: 14, className: "crow-text-gray-500" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "crow-max-h-[200px] crow-overflow-y-auto", children: conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "crow-p-4 crow-text-center crow-text-sm crow-text-gray-500", children: "No conversations yet" }) : conversations.map((conv) => /* @__PURE__ */ jsxs(
+          "button",
           {
-            className: "crow-text-xs crow-bg-blue-100 crow-text-blue-700 crow-px-2 crow-py-0.5 crow-rounded",
-            children: citation.filename
+            onClick: () => onSelect(conv.id),
+            className: `crow-w-full crow-p-3 crow-text-left hover:crow-bg-gray-100 crow-transition-colors crow-border-b crow-border-gray-100 last:crow-border-0 ${currentConversationId === conv.id ? "crow-bg-blue-50" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "crow-text-sm crow-font-medium crow-text-gray-800 crow-truncate", children: conv.name || "Untitled conversation" }),
+              /* @__PURE__ */ jsx("div", { className: "crow-text-xs crow-text-gray-500 crow-mt-0.5", children: formatConversationDate(conv.updated_at) })
+            ]
           },
-          idx
+          conv.id
         )) })
       ]
     }
   );
 }
-function MessageList({ messages, isLoading = false, className }) {
-  const containerRef = useRef(null);
-  useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    }
-  }, [messages]);
+function WorkflowPanel({ workflow, onExit }) {
   return /* @__PURE__ */ jsx(
-    "div",
+    motion.div,
     {
-      ref: containerRef,
-      className: `crow-flex-1 crow-overflow-y-auto crow-px-4 crow-py-4 crow-space-y-3 ${className || ""}`,
-      children: messages.map((message, index) => {
-        const isLastBotMessage = message.role === "assistant" && index === messages.length - 1;
-        return /* @__PURE__ */ jsx(
-          MessageBubble,
+      initial: { opacity: 0, y: -10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+      transition: { duration: 0.3 },
+      className: "crow-mb-3 crow-p-3 crow-rounded-xl crow-bg-gray-50 crow-border crow-border-gray-200",
+      children: /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "crow-text-sm crow-font-medium crow-text-gray-900 crow-flex crow-items-center crow-gap-1", children: workflow.name }),
+        /* @__PURE__ */ jsx(
+          "button",
           {
-            message,
-            isStreaming: isLastBotMessage && isLoading
+            onClick: onExit,
+            className: "crow-text-xs crow-text-gray-500 hover:crow-text-gray-700 crow-underline",
+            children: "Exit"
+          }
+        )
+      ] })
+    }
+  );
+}
+function PoweredByBadge({ apiUrl = "" }) {
+  const styles2 = useWidgetStyles2();
+  const branding = styles2.branding;
+  if (!branding.showPoweredBy) return null;
+  const logoUrl = branding.logoUrl?.startsWith("http") ? branding.logoUrl : `${apiUrl}${branding.logoUrl}`;
+  return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-justify-center crow-gap-1.5 crow-mb-3 crow-text-xs crow-text-gray-400", children: [
+    branding.showLogo && logoUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logoUrl,
+        alt: "Crow",
+        width: 14,
+        height: 14,
+        className: "crow-opacity-50"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: branding.poweredByText })
+  ] });
+}
+var ModelSelector = ({
+  models,
+  selectedModel,
+  onModelChange,
+  disabled = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const selectedModelData = models.find((m) => m.id === selectedModel);
+  const groupedModels = models.reduce((acc, model) => {
+    if (!acc[model.provider]) acc[model.provider] = [];
+    acc[model.provider].push(model);
+    return acc;
+  }, {});
+  return /* @__PURE__ */ jsxs("div", { className: "crow-relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        disabled,
+        className: cn(
+          "crow-flex crow-items-center crow-gap-1 crow-px-2 crow-py-1 crow-rounded-md crow-text-xs",
+          "crow-bg-transparent crow-text-gray-400",
+          "hover:crow-text-gray-700 crow-transition-colors",
+          disabled ? "crow-opacity-50 crow-cursor-not-allowed" : "crow-cursor-pointer"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: selectedModelData?.name || "Select Model" }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "crow-w-3 crow-h-3 crow-transition-transform",
+                isOpen ? "crow-rotate-180" : ""
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "crow-absolute crow-bottom-full crow-mb-2 crow-left-0 crow-min-w-[180px] crow-bg-white crow-border crow-border-gray-200 crow-rounded-xl crow-shadow-lg crow-z-50 crow-overflow-hidden", children: Object.entries(groupedModels).map(([provider, providerModels]) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "crow-px-3 crow-py-1.5 crow-text-xs crow-font-medium crow-text-gray-400 crow-uppercase crow-tracking-wide crow-bg-gray-50", children: provider }),
+      providerModels.map((model) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            onModelChange(model.id);
+            setIsOpen(false);
           },
-          message.id
-        );
-      })
-    }
-  );
+          className: cn(
+            "crow-w-full crow-flex crow-items-center crow-justify-between crow-px-3 crow-py-1.5 crow-text-sm",
+            "hover:crow-bg-gray-100 crow-transition-colors",
+            model.id === selectedModel ? "crow-text-gray-900" : "crow-text-gray-600"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: model.name }),
+            model.id === selectedModel && /* @__PURE__ */ jsx(Check, { className: "crow-w-4 crow-h-4 crow-text-green-500" })
+          ]
+        },
+        model.id
+      ))
+    ] }, provider)) })
+  ] });
+};
+var styles = `
+  *:focus-visible {
+    outline-offset: 0 !important;
+    --ring-offset: 0 !important;
+  }
+  textarea::-webkit-scrollbar {
+    width: 6px;
+  }
+  textarea::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  textarea::-webkit-scrollbar-thumb {
+    background-color: #444444;
+    border-radius: 3px;
+  }
+  textarea::-webkit-scrollbar-thumb:hover {
+    background-color: #555555;
+  }
+`;
+if (typeof document !== "undefined") {
+  const styleSheet = document.createElement("style");
+  styleSheet.innerText = styles;
+  document.head.appendChild(styleSheet);
 }
-function PromptInput({
-  onSend,
-  onStop,
-  isLoading = false,
-  placeholder = "Type your message...",
-  disabled = false,
-  className
-}) {
-  const [value, setValue] = useState("");
-  const textareaRef = useRef(null);
-  useEffect(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.height = "auto";
-      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-    }
-  }, [value]);
-  const handleSubmit = useCallback(() => {
-    if (value.trim() && !isLoading) {
-      onSend(value.trim());
-      setValue("");
-    }
-  }, [value, isLoading, onSend]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmit();
-      }
-    },
-    [handleSubmit]
-  );
-  const hasContent = value.trim().length > 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
+var Textarea = React3.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "textarea",
     {
-      className: clsx(
-        "crow-flex crow-items-end crow-gap-2 crow-p-3 crow-border-t crow-border-gray-200 crow-bg-white",
+      className: cn(
+        "crow-flex crow-w-full crow-rounded-md crow-border-none crow-bg-transparent crow-px-3 crow-py-1.5 crow-text-base crow-text-gray-900 placeholder:crow-text-gray-500 focus-visible:crow-outline-none focus-visible:crow-ring-0 disabled:crow-cursor-not-allowed disabled:crow-opacity-50 crow-min-h-[32px] crow-resize-none",
         className
       ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            ref: textareaRef,
-            value,
-            onChange: (e) => setValue(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder,
-            disabled: disabled || isLoading,
-            rows: 1,
-            className: clsx(
-              "crow-flex-1 crow-resize-none crow-border crow-border-gray-300 crow-rounded-xl crow-px-4 crow-py-2",
-              "crow-text-sm crow-text-gray-900 crow-placeholder-gray-500",
-              "focus:crow-outline-none focus:crow-ring-2 focus:crow-ring-crow-primary focus:crow-border-transparent",
-              "disabled:crow-bg-gray-50 disabled:crow-cursor-not-allowed"
-            )
-          }
+      ref,
+      rows: 1,
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "crow-z-50 crow-overflow-hidden crow-rounded-md crow-border crow-px-3 crow-py-1.5 crow-text-sm crow-text-white crow-shadow-md",
+      className
+    ),
+    style: { borderColor: "#333333", background: "#1F2023" },
+    ...props
+  }
+));
+TooltipContent.displayName = "TooltipContent";
+var Button = React3.forwardRef(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    const variantClasses = {
+      default: "crow-bg-white hover:crow-bg-white/80 crow-text-black",
+      outline: "crow-border crow-bg-transparent hover:crow-bg-gray-700",
+      ghost: "crow-bg-transparent hover:crow-bg-gray-700"
+    };
+    const sizeClasses = {
+      default: "crow-h-10 crow-px-4 crow-py-2",
+      sm: "crow-h-8 crow-px-3 crow-text-sm",
+      lg: "crow-h-12 crow-px-6",
+      icon: "crow-h-8 crow-w-8 crow-rounded-full"
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          "crow-inline-flex crow-items-center crow-justify-center crow-font-medium crow-transition-colors focus-visible:crow-outline-none disabled:crow-pointer-events-none disabled:crow-opacity-50",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
         ),
-        /* @__PURE__ */ jsx(
-          "button",
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var PromptInputContext = React3.createContext({
+  isLoading: false,
+  value: "",
+  setValue: () => {
+  },
+  maxHeight: 240,
+  onSubmit: void 0,
+  disabled: false
+});
+function usePromptInput() {
+  const context = React3.useContext(PromptInputContext);
+  if (!context) {
+    throw new Error("usePromptInput must be used within a PromptInput");
+  }
+  return context;
+}
+var PromptInput = React3.forwardRef(
+  ({
+    className,
+    isLoading = false,
+    maxHeight = 240,
+    value,
+    onValueChange,
+    onSubmit,
+    children,
+    disabled = false
+  }, ref) => {
+    const [internalValue, setInternalValue] = React3.useState(value || "");
+    const handleChange = (newValue) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    };
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+      PromptInputContext.Provider,
+      {
+        value: {
+          isLoading,
+          value: value ?? internalValue,
+          setValue: onValueChange ?? handleChange,
+          maxHeight,
+          onSubmit,
+          disabled
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: isLoading ? onStop : handleSubmit,
-            disabled: !isLoading && !hasContent,
-            className: clsx(
-              "crow-flex-shrink-0 crow-w-10 crow-h-10 crow-rounded-full crow-flex crow-items-center crow-justify-center",
-              "crow-transition-all crow-duration-200",
-              isLoading ? "crow-bg-red-500 hover:crow-bg-red-600 crow-text-white" : hasContent ? "crow-bg-crow-primary hover:crow-bg-crow-primary-dark crow-text-white" : "crow-bg-gray-200 crow-text-gray-400 crow-cursor-not-allowed"
+            ref,
+            className: cn(
+              "crow-rounded-3xl crow-border crow-p-1.5 crow-shadow-lg crow-transition-all crow-duration-300",
+              isLoading && "crow-border-red-500",
+              className
             ),
-            "aria-label": isLoading ? "Stop generation" : "Send message",
-            children: isLoading ? /* @__PURE__ */ jsx("svg", { className: "crow-w-4 crow-h-4", fill: "currentColor", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "1" }) }) : /* @__PURE__ */ jsx("svg", { className: "crow-w-4 crow-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
+            style: { borderColor: isLoading ? void 0 : "#444444", background: "#1F2023" },
+            children
           }
         )
-      ]
+      }
+    ) });
+  }
+);
+PromptInput.displayName = "PromptInput";
+var PromptInputTextarea = ({ className, onKeyDown, disableAutosize = false, placeholder, ...props }) => {
+  const { value, setValue, maxHeight, onSubmit, disabled } = usePromptInput();
+  const textareaRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (disableAutosize || !textareaRef.current) return;
+    textareaRef.current.style.height = "auto";
+    textareaRef.current.style.height = typeof maxHeight === "number" ? `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px` : `min(${textareaRef.current.scrollHeight}px, ${maxHeight})`;
+  }, [value, maxHeight, disableAutosize]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit?.();
+    }
+    onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ref: textareaRef,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onKeyDown: handleKeyDown,
+      className: cn("text-base", className),
+      disabled,
+      placeholder,
+      ...props
     }
   );
-}
+};
+var PromptInputActions = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("crow-flex crow-items-center crow-gap-2", className), ...props, children });
+var PromptInputAction = ({
+  tooltip,
+  children,
+  side = "top",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(Tooltip, { ...props, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, children: tooltip })
+  ] });
+};
+var PromptInputBox = React3.forwardRef(
+  ({
+    onSend = () => {
+    },
+    onStop,
+    isLoading = false,
+    placeholder = "Type your message here...",
+    className,
+    selectedModel = "gpt-4o",
+    onModelChange,
+    availableModels = []
+  }, ref) => {
+    const [input, setInput] = React3.useState("");
+    const promptBoxRef = React3.useRef(null);
+    const handleSubmit = () => {
+      if (input.trim()) {
+        onSend(input);
+        setInput("");
+      }
+    };
+    const hasContent = input.trim() !== "";
+    return /* @__PURE__ */ jsxs(
+      PromptInput,
+      {
+        value: input,
+        onValueChange: setInput,
+        isLoading,
+        onSubmit: handleSubmit,
+        className: cn(
+          "crow-w-full crow-shadow-lg crow-transition-all crow-duration-300 crow-ease-in-out",
+          className
+        ),
+        disabled: isLoading,
+        ref: ref || promptBoxRef,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "crow-transition-all crow-duration-300 crow-opacity-100", children: /* @__PURE__ */ jsx(PromptInputTextarea, { placeholder, className: "crow-text-base" }) }),
+          /* @__PURE__ */ jsxs(PromptInputActions, { className: "crow-flex crow-items-center crow-justify-between crow-gap-2 crow-p-0 crow-pt-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center", children: availableModels.length > 0 && onModelChange && /* @__PURE__ */ jsx(
+              ModelSelector,
+              {
+                models: availableModels,
+                selectedModel,
+                onModelChange,
+                disabled: isLoading
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              PromptInputAction,
+              {
+                tooltip: isLoading ? "Stop generation" : hasContent ? "Send message" : "Type a message",
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "default",
+                    size: "icon",
+                    className: cn(
+                      "crow-h-7 crow-w-7 crow-rounded-full crow-transition-all crow-duration-200"
+                    ),
+                    style: {
+                      background: isLoading ? "#ef4444" : hasContent ? "#ffffff" : "transparent",
+                      color: isLoading ? "#ffffff" : "#1F2023"
+                    },
+                    onClick: () => {
+                      if (isLoading && onStop) {
+                        onStop();
+                      } else if (hasContent) {
+                        handleSubmit();
+                      }
+                    },
+                    children: isLoading ? /* @__PURE__ */ jsx(Square, { className: "crow-h-3.5 crow-w-3.5", style: { fill: "white", color: "white" } }) : /* @__PURE__ */ jsx(ArrowUp, { className: "crow-h-3.5 crow-w-3.5", style: { color: "#1F2023" } })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+PromptInputBox.displayName = "PromptInputBox";
 function CrowWidget({
   productId,
-  apiUrl,
-  model,
-  agentName = "Assistant",
-  defaultCollapsed = true,
-  onIdentify,
-  tools,
-  className,
-  zIndex = 999999
+  apiUrl = "",
+  variant = "floating",
+  styles: propStyles,
+  previewMode = false,
+  onReady
 }) {
-  const contextClient = useCrowClientOptional();
-  const standaloneClientRef = useRef(null);
-  if (!contextClient && !standaloneClientRef.current) {
-    standaloneClientRef.current = new CrowClient({ productId, apiUrl, model });
-  }
-  const client = contextClient || standaloneClientRef.current;
-  useEffect(() => {
-    return () => {
-      if (standaloneClientRef.current) {
-        standaloneClientRef.current.destroy();
+  const { styles: styles2, isLoading: isLoadingStyles, agentName } = useWidgetStyles({
+    productId,
+    apiUrl,
+    propStyles,
+    skip: previewMode
+  });
+  const messagesContainerRef = useRef(null);
+  const executeClientToolRef = useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(variant === "floating");
+  const [showConversationList, setShowConversationList] = useState(false);
+  const [isVerifiedUser, setIsVerifiedUser] = useState(false);
+  const {
+    activeWorkflow,
+    startWorkflow,
+    updateTodo,
+    markComplete,
+    endWorkflow
+  } = useWorkflow({
+    productId,
+    apiUrl,
+    conversationId: null,
+    selectedModel: DEFAULT_MODEL
+  });
+  const conversations = useConversations({ productId, apiUrl });
+  const [shouldRestoreHistory, setShouldRestoreHistory] = useState(false);
+  const hasRestoredHistoryRef = useRef(false);
+  const chat = useChat({
+    productId,
+    apiUrl,
+    onVerificationStatus: (isVerified) => {
+      setIsVerifiedUser(isVerified);
+    },
+    onConversationId: () => {
+    },
+    onWorkflowEvent: (event) => {
+      switch (event.type) {
+        case "started":
+          if (event.name && event.todos) {
+            startWorkflow(event.name, event.todos);
+          }
+          break;
+        case "todo_updated":
+          if (event.todoId && event.todoStatus) {
+            updateTodo(event.todoId, event.todoStatus);
+          }
+          break;
+        case "ended":
+          endWorkflow(2e3);
+          break;
+        case "complete_prompt":
+          markComplete();
+          break;
       }
-    };
-  }, []);
-  useEffect(() => {
-    if (tools) {
-      client.registerTools(tools);
+    },
+    onToolCall: (event) => {
+      if (event.type === "client_call" && event.toolName) {
+        console.log("[Crow Widget] Executing client tool:", event.toolName, event.arguments);
+        const result = executeClientToolRef.current?.(event.toolName, event.arguments || {});
+        result?.then((r) => console.log("[Crow Widget] Tool result:", r)).catch((e) => console.error("[Crow Widget] Tool error:", e));
+      }
+    },
+    onRestoredConversation: () => {
+      setShouldRestoreHistory(true);
     }
-  }, [client, tools]);
+  });
   useEffect(() => {
-    if (onIdentify) {
-      onIdentify((options) => client.identify(options));
+    if (shouldRestoreHistory && chat.conversationId && !hasRestoredHistoryRef.current) {
+      hasRestoredHistoryRef.current = true;
+      console.log("[Crow Widget] Restoring conversation history:", chat.conversationId);
+      conversations.loadAnonymousConversationHistory(chat.conversationId).then((historyMessages) => {
+        if (historyMessages.length > 0) {
+          chat.loadMessages(historyMessages);
+        }
+      });
+    }
+  }, [shouldRestoreHistory, chat.conversationId, conversations, chat]);
+  const workflowActions = useWorkflow({
+    productId,
+    apiUrl,
+    conversationId: chat.conversationId,
+    selectedModel: chat.selectedModel,
+    onMessage: (content) => {
+      chat.loadMessages([
+        ...chat.messages,
+        {
+          id: `bot-${Date.now()}`,
+          content,
+          isBot: true,
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
     }
-  }, [client, onIdentify]);
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-  const { messages, isLoading, sendMessage, stop, clearMessages } = useChat({
-    client
   });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ChatBubble, { isOpen: !isCollapsed, onClick: () => setIsCollapsed(!isCollapsed) }),
-    !isCollapsed && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx(
-          "crow-fixed crow-flex crow-flex-col",
-          "crow-bg-white crow-rounded-2xl crow-shadow-2xl",
-          "crow-border crow-border-gray-200",
-          "crow-overflow-hidden crow-animate-fade-in",
-          className
-        ),
-        style: {
-          zIndex,
-          right: "20px",
-          bottom: "90px",
-          width: "380px",
-          height: "550px",
-          maxHeight: "calc(100vh - 120px)"
-        },
-        children: [
+  const { executeClientTool } = useCrowAPI({
+    onIdentified: async () => {
+      setIsVerifiedUser(true);
+      await conversations.loadConversations();
+    },
+    onReset: () => {
+      setIsVerifiedUser(false);
+      chat.resetMessages();
+    }
+  });
+  executeClientToolRef.current = executeClientTool;
+  useEffect(() => {
+    if (!isLoadingStyles) {
+      onReady?.();
+    }
+  }, [isLoadingStyles, onReady]);
+  const handleSend = (message) => {
+    if (!message.trim()) return;
+    setIsCollapsed(false);
+    chat.sendMessage(message);
+  };
+  const handleNewChat = () => {
+    chat.resetMessages();
+    setShowConversationList(false);
+  };
+  const handleToggleHistory = () => {
+    setShowConversationList(!showConversationList);
+    if (!showConversationList) {
+      conversations.loadConversations();
+    }
+  };
+  const handleSelectConversation = async (convId) => {
+    const historyMessages = await conversations.loadConversationHistory(convId);
+    if (historyMessages.length > 0) {
+      chat.loadMessages(historyMessages);
+      chat.setConversationId(convId);
+    } else {
+      chat.resetMessages();
+    }
+    setShowConversationList(false);
+  };
+  const handleCloseConversationList = () => {
+    setShowConversationList(false);
+  };
+  const handleExitWorkflow = async () => {
+    await workflowActions.exitWorkflow();
+  };
+  const handleBubbleClick = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  return /* @__PURE__ */ jsxs(
+    WidgetStyleProvider,
+    {
+      styles: styles2,
+      agentName,
+      isLoading: isLoadingStyles,
+      variant,
+      children: [
+        variant === "floating" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChatBubble, { isExpanded: !isCollapsed, onClick: handleBubbleClick }),
+          !isCollapsed && /* @__PURE__ */ jsxs(WidgetShell, { children: [
+            /* @__PURE__ */ jsx(
+              WidgetHeader,
+              {
+                isVerifiedUser,
+                showConversationList,
+                onNewChat: handleNewChat,
+                onToggleHistory: handleToggleHistory
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
+              ConversationList,
+              {
+                conversations: conversations.conversations,
+                currentConversationId: chat.conversationId,
+                onSelect: handleSelectConversation,
+                onClose: handleCloseConversationList
+              }
+            ) }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: activeWorkflow && /* @__PURE__ */ jsx(
+              WorkflowPanel,
+              {
+                workflow: activeWorkflow,
+                onExit: handleExitWorkflow
+              }
+            ) }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
+              MessageList,
+              {
+                messages: chat.messages,
+                activeToolCalls: chat.activeToolCalls,
+                isLoadingHistory: conversations.isLoadingHistory,
+                isGenerating: chat.isLoading
+              }
+            ) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "crow-mt-auto", children: [
+              /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
+              /* @__PURE__ */ jsx(
+                PromptInputBox,
+                {
+                  onSend: handleSend,
+                  onStop: chat.stopGeneration,
+                  placeholder: "Type your message...",
+                  isLoading: chat.isLoading,
+                  className: "crow-backdrop-blur-md"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        variant === "embedded" && /* @__PURE__ */ jsxs(WidgetShell, { children: [
           /* @__PURE__ */ jsx(
             WidgetHeader,
             {
-              title: agentName,
-              onNewChat: clearMessages,
-              showNewChat: true
+              isVerifiedUser,
+              showConversationList,
+              onNewChat: handleNewChat,
+              onToggleHistory: handleToggleHistory
             }
           ),
-          /* @__PURE__ */ jsx(
-            MessageList,
+          /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
+            ConversationList,
             {
-              messages,
-              isLoading,
-              className: "crow-flex-1"
+              conversations: conversations.conversations,
+              currentConversationId: chat.conversationId,
+              onSelect: handleSelectConversation,
+              onClose: handleCloseConversationList
             }
-          ),
-          /* @__PURE__ */ jsx(
-            PromptInput,
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: activeWorkflow && /* @__PURE__ */ jsx(
+            WorkflowPanel,
             {
-              onSend: sendMessage,
-              onStop: stop,
-              isLoading,
-              placeholder: "Type your message..."
+              workflow: activeWorkflow,
+              onExit: handleExitWorkflow
             }
-          )
-        ]
-      }
-    )
-  ] });
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
+            MessageList,
+            {
+              messages: chat.messages,
+              activeToolCalls: chat.activeToolCalls,
+              isLoadingHistory: conversations.isLoadingHistory,
+              isGenerating: chat.isLoading
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "crow-mt-auto", children: [
+            /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
+            /* @__PURE__ */ jsx(
+              PromptInputBox,
+              {
+                onSend: handleSend,
+                onStop: chat.stopGeneration,
+                placeholder: "Type your message...",
+                isLoading: chat.isLoading,
+                className: "crow-backdrop-blur-md"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function CrowCopilot({
   productId,
-  apiUrl,
-  model,
+  apiUrl = "",
   title = "Copilot",
   position = "right",
   width = 400,
   showClose = false,
   onClose,
-  onIdentify,
-  tools,
-  className
+  styles: propStyles,
+  previewMode = false,
+  className,
+  onReady
 }) {
-  const contextClient = useCrowClientOptional();
-  const standaloneClientRef = useRef(null);
-  if (!contextClient && !standaloneClientRef.current && productId) {
-    standaloneClientRef.current = new CrowClient({ productId, apiUrl, model });
-  }
-  const client = contextClient || standaloneClientRef.current;
-  if (!client) {
-    console.error(
-      "[CrowCopilot] No client available. Either wrap in CrowProvider or provide productId prop."
-    );
-    return null;
-  }
-  useEffect(() => {
-    return () => {
-      if (standaloneClientRef.current) {
-        standaloneClientRef.current.destroy();
+  const { styles: styles2, isLoading: isLoadingStyles, agentName } = useCopilotStyles({
+    productId,
+    apiUrl,
+    propStyles,
+    skip: previewMode
+  });
+  const messagesContainerRef = useRef(null);
+  const executeClientToolRef = useRef(null);
+  const [showConversationList, setShowConversationList] = useState(false);
+  const [isVerifiedUser, setIsVerifiedUser] = useState(false);
+  const conversations = useConversations({ productId, apiUrl });
+  const [shouldRestoreHistory, setShouldRestoreHistory] = useState(false);
+  const hasRestoredHistoryRef = useRef(false);
+  const chat = useChat({
+    productId,
+    apiUrl,
+    onVerificationStatus: (isVerified) => {
+      setIsVerifiedUser(isVerified);
+    },
+    onConversationId: () => {
+    },
+    onToolCall: (event) => {
+      if (event.type === "client_call" && event.toolName) {
+        console.log("[Crow Copilot] Executing client tool:", event.toolName, event.arguments);
+        const result = executeClientToolRef.current?.(event.toolName, event.arguments || {});
+        result?.then((r) => console.log("[Crow Copilot] Tool result:", r)).catch((e) => console.error("[Crow Copilot] Tool error:", e));
       }
-    };
-  }, []);
-  useEffect(() => {
-    if (tools) {
-      client.registerTools(tools);
+    },
+    onRestoredConversation: () => {
+      setShouldRestoreHistory(true);
     }
-  }, [client, tools]);
+  });
   useEffect(() => {
-    if (onIdentify) {
-      onIdentify((options) => client.identify(options));
+    if (shouldRestoreHistory && chat.conversationId && !hasRestoredHistoryRef.current) {
+      hasRestoredHistoryRef.current = true;
+      conversations.loadAnonymousConversationHistory(chat.conversationId).then((historyMessages) => {
+        if (historyMessages.length > 0) {
+          chat.loadMessages(historyMessages);
+        }
+      });
+    }
+  }, [shouldRestoreHistory, chat.conversationId, conversations, chat]);
+  const { executeClientTool } = useCrowAPI({
+    onIdentified: async () => {
+      setIsVerifiedUser(true);
+      await conversations.loadConversations();
+    },
+    onReset: () => {
+      setIsVerifiedUser(false);
+      chat.resetMessages();
     }
-  }, [client, onIdentify]);
-  const { messages, isLoading, sendMessage, stop, clearMessages } = useChat({
-    client
   });
+  executeClientToolRef.current = executeClientTool;
+  useEffect(() => {
+    if (!isLoadingStyles) {
+      onReady?.();
+    }
+  }, [isLoadingStyles, onReady]);
+  const handleSend = (message) => {
+    if (!message.trim()) return;
+    chat.sendMessage(message);
+  };
+  const handleNewChat = () => {
+    chat.resetMessages();
+    setShowConversationList(false);
+  };
+  const handleToggleHistory = () => {
+    setShowConversationList(!showConversationList);
+    if (!showConversationList) {
+      conversations.loadConversations();
+    }
+  };
+  const handleSelectConversation = async (convId) => {
+    const historyMessages = await conversations.loadConversationHistory(convId);
+    if (historyMessages.length > 0) {
+      chat.loadMessages(historyMessages);
+      chat.setConversationId(convId);
+    } else {
+      chat.resetMessages();
+    }
+    setShowConversationList(false);
+  };
+  const handleCloseConversationList = () => {
+    setShowConversationList(false);
+  };
   const widthStyle = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsx(
+    CopilotStyleProvider,
+    {
+      styles: styles2,
+      agentName: agentName || title,
+      isLoading: isLoadingStyles,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `crow-flex crow-flex-col crow-h-full ${position === "left" ? "crow-border-r" : "crow-border-l"} ${className || ""}`,
+          style: {
+            width: widthStyle,
+            fontFamily: styles2.typography.fontFamily,
+            fontSize: styles2.typography.fontSize,
+            background: styles2.colors.background,
+            borderColor: styles2.colors.border
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "crow-flex crow-items-center crow-justify-between crow-px-4 crow-py-3 crow-border-b",
+                style: {
+                  height: styles2.dimensions.headerHeight,
+                  borderColor: styles2.colors.border
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "crow-font-semibold",
+                      style: {
+                        color: styles2.colors.text,
+                        fontSize: styles2.typography.headerFontSize
+                      },
+                      children: agentName || title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleNewChat,
+                        className: "crow-p-1.5 hover:crow-bg-gray-100 crow-rounded crow-transition-colors",
+                        "aria-label": "New Chat",
+                        title: "New Chat",
+                        children: /* @__PURE__ */ jsx(PlusIcon, { className: "crow-w-4 crow-h-4 crow-text-gray-600" })
+                      }
+                    ),
+                    isVerifiedUser && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleToggleHistory,
+                        className: `crow-p-1.5 hover:crow-bg-gray-100 crow-rounded crow-transition-colors ${showConversationList ? "crow-bg-gray-100" : ""}`,
+                        "aria-label": "Conversation History",
+                        title: "Conversation History",
+                        children: /* @__PURE__ */ jsx(HistoryIcon, { className: "crow-w-4 crow-h-4 crow-text-gray-600" })
+                      }
+                    ),
+                    showClose && onClose && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        className: "crow-p-1.5 hover:crow-bg-gray-100 crow-rounded crow-transition-colors",
+                        "aria-label": "Close",
+                        children: /* @__PURE__ */ jsx(CloseIcon, { className: "crow-w-4 crow-h-4 crow-text-gray-600" })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
+              ConversationList,
+              {
+                conversations: conversations.conversations,
+                currentConversationId: chat.conversationId,
+                onSelect: handleSelectConversation,
+                onClose: handleCloseConversationList
+              }
+            ) }),
+            /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
+              MessageList,
+              {
+                messages: chat.messages,
+                activeToolCalls: chat.activeToolCalls,
+                isLoadingHistory: conversations.isLoadingHistory,
+                isGenerating: chat.isLoading
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "crow-p-3 crow-border-t", style: { borderColor: styles2.colors.border }, children: [
+              styles2.branding.showPoweredBy && /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
+              /* @__PURE__ */ jsx(
+                PromptInputBox,
+                {
+                  onSend: handleSend,
+                  onStop: chat.stopGeneration,
+                  placeholder: "Ask anything...",
+                  isLoading: chat.isLoading
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function PlusIcon({ className }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    "svg",
     {
-      className: clsx(
-        "crow-flex crow-flex-col crow-h-full",
-        "crow-bg-white crow-border-gray-200",
-        position === "left" ? "crow-border-r" : "crow-border-l",
-        className
-      ),
-      style: { width: widthStyle },
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
       children: [
-        /* @__PURE__ */ jsx(
-          WidgetHeader,
-          {
-            title,
-            onNewChat: clearMessages,
-            onClose,
-            showNewChat: true,
-            showClose
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MessageList,
-          {
-            messages,
-            isLoading,
-            className: "crow-flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          PromptInput,
-          {
-            onSend: sendMessage,
-            onStop: stop,
-            isLoading,
-            placeholder: "Ask anything..."
-          }
-        )
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
       ]
     }
   );
 }
-function useIdentity({ client }) {
-  const [isIdentified, setIsIdentified] = useState(client.isIdentified());
-  const [isVerified, setIsVerified] = useState(client.isVerified());
-  useEffect(() => {
-    client.on({
-      onVerificationStatus: (verified) => {
-        setIsVerified(verified);
-      }
-    });
-    setIsIdentified(client.isIdentified());
-    setIsVerified(client.isVerified());
-  }, [client]);
-  const identify = useCallback(
-    (options) => {
-      client.identify(options);
-      setIsIdentified(true);
-    },
-    [client]
+function HistoryIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 7v5l4 2" })
+      ]
+    }
   );
-  const resetUser = useCallback(() => {
-    client.resetUser();
-    setIsIdentified(false);
-    setIsVerified(false);
-  }, [client]);
-  return {
-    isIdentified,
-    isVerified,
-    identify,
-    resetUser
-  };
 }
-function useConversations({
-  client
-}) {
-  const [conversations, setConversations] = useState([]);
-  const [isLoadingConversations, setIsLoadingConversations] = useState(false);
-  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
-  const loadConversations = useCallback(async () => {
-    setIsLoadingConversations(true);
-    try {
-      const convs = await client.getConversations();
-      setConversations(convs);
-    } finally {
-      setIsLoadingConversations(false);
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
     }
-  }, [client]);
-  const loadHistory = useCallback(
-    async (conversationId) => {
-      setIsLoadingHistory(true);
-      try {
-        return await client.loadHistory(conversationId);
-      } finally {
-        setIsLoadingHistory(false);
-      }
-    },
-    [client]
   );
-  const switchConversation = useCallback(
-    async (conversationId) => {
-      setIsLoadingHistory(true);
-      try {
-        await client.switchConversation(conversationId);
-      } finally {
-        setIsLoadingHistory(false);
-      }
-    },
-    [client]
-  );
-  const startNewConversation = useCallback(() => {
-    client.clearMessages();
+}
+var CrowContext = createContext(null);
+function CrowProvider({
+  children,
+  productId,
+  apiUrl,
+  model
+}) {
+  const clientRef = useRef(null);
+  if (!clientRef.current) {
+    clientRef.current = new CrowClient({ productId, apiUrl, model });
+  }
+  const client = clientRef.current;
+  useEffect(() => {
+    return () => {
+      client.destroy();
+    };
   }, [client]);
-  return {
-    conversations,
-    isLoadingConversations,
-    isLoadingHistory,
-    currentConversationId: client.conversationId,
-    loadConversations,
-    loadHistory,
-    switchConversation,
-    startNewConversation
-  };
+  const value = useMemo(() => ({ client }), [client]);
+  return /* @__PURE__ */ jsx(CrowContext.Provider, { value, children });
 }
 
-export { ChatBubble, CrowCopilot, CrowProvider, CrowWidget, MessageBubble, MessageList, PromptInput, WidgetHeader, useChat, useConversations, useCrowClient, useCrowClientOptional, useIdentity };
+export { AVAILABLE_MODELS, ChatBubble, ConversationList, CopilotStyleProvider, CrowCopilot, CrowProvider, CrowWidget, DEFAULT_COPILOT_STYLES, DEFAULT_MODEL, DEFAULT_WELCOME_MESSAGE, DEFAULT_WIDGET_STYLES, GlassCard, LoadingHistory, MESSAGES_CONTAINER_ID, MessageBubble, MessageList, MessagesContainer, ModelSelector, PoweredByBadge, PromptInputBox, ReasoningTrace, StreamingText, ThinkingIndicator, WidgetHeader, WidgetShell, WidgetStyleProvider, WorkflowPanel, clearStyleCache, mergeCopilotStyles, mergeWidgetStyles, stylesToCSSVariables, useChat, useConversations, useCopilotStyleContext, useCopilotStyles, useCopilotStyles2 as useCopilotStylesContext, useCrowAPI, usePreviewCopilotStyles, usePreviewWidgetStyles, useWidgetStyleContext, useWidgetStyles, useWidgetStyles2 as useWidgetStylesContext, useWorkflow };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map