@hsafa/ui-sdk 0.1.0

package/DOCUMENTATION.md

@@ -0,0 +1,174 @@
+# @hsafa/ui-sdk Documentation
+
+React SDK for integrating AI agents built with HSAFA AI Agent Studio into your applications.
+
+## 📚 Documentation Structure
+
+### 1. **Getting Started**
+- [Installation & Setup](README.md#installation)
+- [Basic AI Agent Chat](README.md#basic-ai-agent-chat)
+- [Getting Started Example](examples/getting-started.tsx)
+
+### 2. **Core Components**
+- [HsafaChat](README.md#hsafachat) - AI agent chat interface
+- [HsafaProvider](README.md#hsafaprovider) - SDK context provider
+
+### 3. **Agent Integration**
+- [useHsafaAction](README.md#usehsafaaction) - Register functions for agents
+- [useHsafaComponent](README.md#usehsafacomponent) - Register UI components
+- [useHsafa](README.md#usehsafa) - Advanced context access
+
+### 4. **Examples**
+- [Getting Started](examples/getting-started.tsx) - Simple setup with basic actions
+- [E-commerce Agent](examples/ecommerce-agent.tsx) - Product search & ordering
+
+### 5. **API Reference**
+- [Complete API Documentation](docs/api/) - Generated from TypeScript definitions
+- [Interactive Storybook](http://localhost:6006) - Component playground
+
+## 🚀 Quick Navigation
+
+### For Beginners
+1. Start with the [Installation](README.md#installation)
+2. Try the [Basic Usage Example](examples/basic-usage.tsx)
+3. Explore the [Interactive Storybook](#interactive-documentation)
+
+### For Advanced Users
+1. Check out [Chat Integration](examples/chat-integration.tsx)
+2. Review [Custom Actions](README.md#custom-actions--components)
+3. Browse the [API Reference](docs/api/)
+
+## 📖 Interactive Documentation
+
+### Storybook
+Run the interactive component documentation:
+
+```bash
+cd sdk
+pnpm storybook
+```
+
+Then visit [http://localhost:6006](http://localhost:6006) to:
+- 🎮 **Play with components** interactively
+- 📝 **View live documentation** with examples
+- 🎨 **Test different props** and configurations
+- 📱 **See responsive behavior**
+
+### API Documentation
+Generate comprehensive API documentation:
+
+```bash
+cd sdk
+pnpm docs:api
+```
+
+This creates detailed API docs in `docs/api/` with:
+- 📋 **Complete type definitions**
+- 🔍 **Function signatures**
+- 💡 **Usage examples**
+- 🏷️ **Parameter descriptions**
+
+## 🎨 Theming & Styling
+
+### CSS Modules
+The SDK uses CSS Modules for styling. Each component has its own stylesheet:
+
+```
+src/components/
+├── Button.tsx
+├── Button.module.css
+├── HsafaChat.tsx
+└── HsafaChat.module.css
+```
+
+### Customization
+You can customize the appearance by:
+
+1. **Using component props** (recommended):
+```tsx
+<HsafaChat
+  primaryColor="#3b82f6"
+  backgroundColor="#ffffff"
+  borderColor="#e5e7eb"
+/>
+```
+
+2. **CSS custom properties**:
+```css
+.my-chat {
+  --hsafa-primary-color: #3b82f6;
+  --hsafa-background-color: #ffffff;
+}
+```
+
+3. **CSS Module overrides**:
+```tsx
+import styles from './MyCustomStyles.module.css';
+
+<Button className={styles.customButton} />
+```
+
+## 🔧 Development Workflow
+
+### Building Documentation
+```bash
+# Build all documentation
+pnpm docs:build
+
+# Development mode with hot reload
+pnpm docs:dev
+
+# Build API docs only
+pnpm docs:api
+```
+
+### Testing
+```bash
+# Run all tests
+pnpm test
+
+# Run tests with UI
+pnpm test:ui
+
+# Type checking
+pnpm type-check
+```
+
+## 📁 Project Structure
+
+```
+sdk/
+├── src/
+│   ├── components/          # React components
+│   ├── hooks/              # Custom hooks
+│   ├── providers/          # Context providers
+│   └── index.ts           # Main exports
+├── examples/              # Usage examples
+├── docs/                  # Generated documentation
+├── .storybook/           # Storybook configuration
+└── README.md             # Main documentation
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](README.md#contributing) for details.
+
+### Documentation Contributions
+- 📝 Improve existing documentation
+- 🌟 Add new examples
+- 🐛 Fix documentation bugs
+- 💡 Suggest better explanations
+
+## 📞 Support
+
+- 📖 **Documentation**: You're reading it!
+- 🐛 **Issues**: [GitHub Issues](https://github.com/husamabusafa/hsafa/issues)
+- 💬 **Discussions**: [GitHub Discussions](https://github.com/husamabusafa/hsafa/discussions)
+
+## 📄 License
+
+MIT © [Husam Abu Safa](https://github.com/husamabusafa)
+
+---
+
+**Happy coding!** 🎉

package/README.md

@@ -0,0 +1,347 @@
+# @hsafa/ui-sdk
+
+React SDK for building AI agent interfaces with custom actions and interactive components.
+
+## Features
+
+- 🤖 **AI Agent Chat**: Ready-to-use chat interface for AI agents
+- ⚡ **Custom Actions**: Register functions that AI agents can call
+- 🎨 **Dynamic Components**: Create UI components that agents can render
+- 🔧 **TypeScript**: Full TypeScript support with comprehensive type definitions
+- 📦 **Lightweight**: Tree-shakable with minimal dependencies
+- 🎯 **Agent-Focused**: Built specifically for AI agent interactions
+
+## Installation
+
+```bash
+npm install @hsafa/ui-sdk
+# or
+yarn add @hsafa/ui-sdk
+# or
+pnpm add @hsafa/ui-sdk
+```
+
+## Quick Start
+
+### Basic AI Agent Chat
+
+```tsx
+import { HsafaProvider, HsafaChat } from '@hsafa/ui-sdk';
+
+function App() {
+  return (
+    <HsafaProvider baseUrl="https://your-hsafa-api.com">
+      <HsafaChat 
+        agentId="your-agent-id"
+        width={400}
+        height={600}
+        placeholder="Ask your AI agent anything..."
+      />
+    </HsafaProvider>
+  );
+}
+```
+
+### Adding Custom Actions
+
+```tsx
+import { HsafaProvider, HsafaChat, useHsafaAction } from '@hsafa/ui-sdk';
+
+function MyApp() {
+  return (
+    <HsafaProvider baseUrl="https://your-hsafa-api.com">
+      <ActionProviders />
+      <HsafaChat agentId="your-agent-id" />
+    </HsafaProvider>
+  );
+}
+
+function ActionProviders() {
+  // Register an action that your AI agent can call
+  useHsafaAction('getUserData', async (params) => {
+    const { userId } = params;
+    // Fetch user data from your database
+    return { 
+      name: 'John Doe', 
+      email: 'john@example.com',
+      status: 'active'
+    };
+  });
+
+  useHsafaAction('createTask', async (params) => {
+    const { title, description } = params;
+    // Create task in your system
+    return { taskId: '123', status: 'created' };
+  });
+
+  return null;
+}
+```
+
+### Custom UI Components
+
+```tsx
+import { useHsafaComponent } from '@hsafa/ui-sdk';
+
+function ComponentProviders() {
+  // Register UI components that agents can render
+  useHsafaComponent('ProductCard', ({ product }) => (
+    <div className="border rounded-lg p-4">
+      <img src={product.image} alt={product.name} />
+      <h3>{product.name}</h3>
+      <p>${product.price}</p>
+      <button>Add to Cart</button>
+    </div>
+  ));
+
+  useHsafaComponent('StatusChart', ({ data }) => (
+    <div className="chart-container">
+      {/* Your chart implementation */}
+      <h4>Status Overview</h4>
+      {data.map(item => (
+        <div key={item.id}>{item.label}: {item.value}</div>
+      ))}
+    </div>
+  ));
+
+  return null;
+}
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants and states.
+
+```tsx
+import { Button } from '@hsafa/ui-sdk';
+
+// Basic usage
+<Button>Click me</Button>
+
+// With variants
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+
+// With sizes
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+
+// With loading state
+<Button loading>Loading...</Button>
+
+// Disabled
+<Button disabled>Disabled</Button>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | Button style variant |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
+| `loading` | `boolean` | `false` | Show loading spinner |
+| `disabled` | `boolean` | `false` | Disable the button |
+| `children` | `ReactNode` | - | Button content |
+
+## Core Concepts
+
+### AI Agent Integration
+
+The SDK connects to your HSAFA AI Agent Studio, allowing your agents to:
+- **Execute Actions**: Call functions in your application
+- **Render Components**: Display custom UI elements in chat
+- **Access Data**: Interact with your backend systems
+
+### How It Works
+
+1. **Agent Calls Action**: Your AI agent (built in HSAFA Studio) decides to call a registered action
+2. **SDK Executes**: The action runs in your React app with the provided parameters  
+3. **Return Data**: Results are sent back to the agent to continue the conversation
+4. **Render UI**: Agent can display custom components based on the data
+
+## API Reference
+
+### Components
+
+#### HsafaChat
+
+Chat interface for your AI agents built in HSAFA Studio.
+
+```tsx
+<HsafaChat
+  agentId="your-agent-id"
+  width={400}
+  height={600}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `agentId` | `string` | **Required** - ID of your agent from HSAFA Studio |
+| `width` | `number` | Chat panel width (default: 400) |
+| `height` | `number` | Chat panel height (default: 600) |
+| `placeholder` | `string` | Input placeholder text |
+| `primaryColor` | `string` | Primary theme color |
+
+#### HsafaProvider
+
+Provides context for agent communication.
+
+```tsx
+<HsafaProvider baseUrl="https://your-hsafa-api.com">
+  {/* Your app */}
+</HsafaProvider>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `baseUrl` | `string` | **Required** - Your HSAFA API endpoint |
+| `children` | `ReactNode` | **Required** - App components |
+
+### Hooks
+
+#### useHsafaAction
+
+Register functions that your AI agent can call. Perfect for connecting agents to your business logic.
+
+```tsx
+import { useHsafaAction } from '@hsafa/ui-sdk';
+
+function MyApp() {
+  // Register actions your agent can use
+  useHsafaAction('getUserProfile', async ({ userId }) => {
+    const user = await fetchUserFromDatabase(userId);
+    return { name: user.name, email: user.email };
+  });
+
+  useHsafaAction('placeOrder', async ({ productId, quantity }) => {
+    const order = await createOrder(productId, quantity);
+    return { orderId: order.id, total: order.total };
+  });
+
+  return <YourApp />;
+}
+```
+
+#### useHsafaComponent
+
+Register UI components that agents can render in chat. Great for displaying data visually.
+
+```tsx
+import { useHsafaComponent } from '@hsafa/ui-sdk';
+
+function MyApp() {
+  // Register components your agent can display
+  useHsafaComponent('OrderSummary', ({ order }) => (
+    <div className="order-card">
+      <h3>Order #{order.id}</h3>
+      <p>Total: ${order.total}</p>
+      <p>Status: {order.status}</p>
+    </div>
+  ));
+
+  useHsafaComponent('ProductList', ({ products }) => (
+    <div className="grid">
+      {products.map(product => (
+        <div key={product.id} className="product-card">
+          <img src={product.image} alt={product.name} />
+          <h4>{product.name}</h4>
+          <p>${product.price}</p>
+        </div>
+      ))}
+    </div>
+  ));
+
+  return <YourApp />;
+}
+```
+
+#### useHsafa
+
+Advanced hook for manual registration and context access.
+
+```tsx
+import { useHsafa } from '@hsafa/ui-sdk';
+
+function MyComponent() {
+  const { registerAction, registerComponent } = useHsafa();
+  
+  // Manual registration with cleanup
+  useEffect(() => {
+    const cleanup1 = registerAction('customAction', handler);
+    const cleanup2 = registerComponent('CustomComponent', Component);
+    
+    return () => {
+      cleanup1();
+      cleanup2();
+    };
+  }, []);
+}
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm (recommended)
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/husamabusafa/hsafa.git
+cd hsafa/sdk
+
+# Install dependencies
+pnpm install
+
+# Start development
+pnpm dev
+
+# Run tests
+pnpm test
+
+# Start Storybook
+pnpm storybook
+```
+
+### Scripts
+
+- `pnpm build` - Build the library for production
+- `pnpm dev` - Build in watch mode
+- `pnpm test` - Run tests
+- `pnpm test:ui` - Run tests with UI
+- `pnpm storybook` - Start Storybook development server
+- `pnpm build:storybook` - Build Storybook for production
+- `pnpm lint` - Run ESLint
+- `pnpm type-check` - Run TypeScript type checking
+
+## Publishing
+
+```bash
+# Build the library
+pnpm build
+
+# Publish to npm
+npm publish --access public
+```
+
+## License
+
+MIT © [Husam Abu Safa](https://github.com/husamabusafa)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request

package/dist/index.cjs

@@ -0,0 +1,30 @@
+'use strict';var jsxRuntime=require('react/jsx-runtime'),react=require('react'),reactDom=require('react-dom'),iconsReact=require('@tabler/icons-react');var Z={};var er=({variant:a="primary",size:u="md",loading:p=false,disabled:m,children:A,className:T,...z})=>{let j=[Z.button,Z[a],Z[u],p&&Z.loading,T].filter(Boolean).join(" ");return jsxRuntime.jsxs("button",{className:j,disabled:m||p,...z,children:[p&&jsxRuntime.jsx("span",{className:Z.spinner}),jsxRuntime.jsx("span",{className:p?Z.hiddenText:void 0,children:A})]})};function nr(a=false){let[u,p]=react.useState(a),m=react.useCallback(()=>p(z=>!z),[]),A=react.useCallback(()=>p(true),[]),T=react.useCallback(()=>p(false),[]);return {on:u,toggle:m,setOn:p,setTrue:A,setFalse:T}}function lr(){let a=react.useRef(null);return react.useEffect(()=>{let u=a.current;if(!u)return;let p=new MutationObserver(()=>{u.scrollTop=u.scrollHeight;});return p.observe(u,{childList:true,subtree:true}),u.scrollTop=u.scrollHeight,()=>p.disconnect()},[]),a}var We=react.createContext(void 0);function Et({baseUrl:a,children:u}){let[p,m]=react.useState(new Map),[A,T]=react.useState(new Map),z=react.useCallback((M,v)=>(m($=>{let g=new Map($);return g.set(String(M),v),g}),()=>{m($=>{let g=new Map($),y=g.get(String(M));return (!v||y===v)&&g.delete(String(M)),g});}),[]),j=react.useCallback((M,v)=>{m($=>{let g=new Map($),y=g.get(String(M));return (!v||y===v)&&g.delete(String(M)),g});},[]),Y=react.useCallback((M,v)=>(T($=>{let g=new Map($);return g.set(String(M),v),g}),()=>{T($=>{let g=new Map($),y=g.get(String(M));return (!v||y===v)&&g.delete(String(M)),g});}),[]),te=react.useCallback((M,v)=>{T($=>{let g=new Map($),y=g.get(String(M));return (!v||y===v)&&g.delete(String(M)),g});},[]),ce=react.useMemo(()=>({baseUrl:a,actions:p,components:A,registerAction:z,unregisterAction:j,registerComponent:Y,unregisterComponent:te}),[a,p,A,z,j,Y,te]);return jsxRuntime.jsx(We.Provider,{value:ce,children:u})}function ee(){let a=react.useContext(We);return a||{baseUrl:void 0,actions:new Map,components:new Map,registerAction:()=>()=>{},unregisterAction:()=>{},registerComponent:()=>()=>{},unregisterComponent:()=>{}}}function mr(a,u){let{registerAction:p}=ee(),m=react.useRef(u);react.useEffect(()=>{m.current=u;},[u]),react.useEffect(()=>!a||typeof m.current!="function"?void 0:p(a,(T,z)=>m.current(T,z)),[a,p]);}function Cr(a,u){let{registerComponent:p}=ee(),m=react.useRef(u);react.useEffect(()=>{m.current=u;},[u]),react.useEffect(()=>!a||typeof m.current!="function"?void 0:p(a,m.current),[a,p]);}function _t(a){let u=Date.now()-a,p=Math.max(1,Math.floor(u/1e3));if(p<60)return `${p}s`;let m=Math.floor(p/60);if(m<60)return `${m}m`;let A=Math.floor(m/60);if(A<24)return `${A}h`;let T=Math.floor(A/24);if(T<7)return `${T}d`;let z=Math.floor(T/7);if(z<4)return `${z}w`;let j=Math.floor(T/30);return j<12?`${j}mo`:`${Math.floor(j/12)}y`}function Qe(a,u){if(!a)return u;let p=a.endsWith("/")?a.slice(0,-1):a,m=u.startsWith("/")?u:`/${u}`;return `${p}${m}`}var Wt={dark:{primaryColor:"#4D78FF",backgroundColor:"#0B0B0F",borderColor:"#2A2C33",textColor:"#EDEEF0",accentColor:"#17181C",mutedTextColor:"#9AA0A6",inputBackground:"#17181C",cardBackground:"#121318",hoverBackground:"#1c1e25"},light:{primaryColor:"#2563EB",backgroundColor:"#FFFFFF",borderColor:"#E5E7EB",textColor:"#111827",accentColor:"#F9FAFB",mutedTextColor:"#6B7280",inputBackground:"#F9FAFB",cardBackground:"#F3F4F6",hoverBackground:"#F3F4F6"}};function Xt({agentId:a,children:u,theme:p="dark",primaryColor:m,backgroundColor:A,borderColor:T,textColor:z,accentColor:j,width:Y=420,maxWidth:te=420,height:ce="100vh",expandable:M=true,alwaysOpen:v=false,defaultOpen:$=true,dir:g="ltr",floatingButtonPosition:y=g==="rtl"?{bottom:16,left:16}:{bottom:16,right:16},enableBorderAnimation:Ae=true,enableContentPadding:Ze=true,borderRadius:Ce=16,enableContentBorder:$e=true,placeholder:et="Ask your question...",title:He="Agent",className:tt="",chatContainerClassName:rt=""}){let{baseUrl:Ie,actions:Ee,components:ot}=ee(),ue="hsafaChat",Re=`${ue}.chats`,he=e=>`${ue}.chat.${e}`,V=`${ue}.currentChatId`,Be=`${ue}.showChat`,[de,Fe]=react.useState(""),[_,pe]=react.useState(()=>{if(v)return  true;try{let e=localStorage.getItem(Be);return e!==null?e==="true":$}catch{return $}});async function ze(e,n){if(!a)return;let r=n.trim();if(!r)return;U(null),re(true);let s=N.findIndex(d=>d.id===e);if(s===-1||N[s].role!=="user"){re(false);return}let c=N.slice(0,s),H={id:e,role:"user",text:r},O=ie(),C=[...c,H,{id:O,role:"assistant",items:[],reasoning:"",reasoningOpen:false}];w(C),ge(null);try{let d=[...c.map(E=>E.role==="user"?{role:"user",content:E.text}:{role:"assistant",items:Array.isArray(E.items)?E.items:[]}),{role:"user",content:r}],I={prompt:r,chatId:k??void 0,messages:d};w(E=>E.map(q=>q.id===O||q.id===e?{...q,requestParams:I}:q));let S=await fetch(Qe(Ie,`/api/run/${a}`),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(I)});if(!S.ok||!S.body){let E=await S.text().catch(()=>"");throw new Error(E||`Request failed with ${S.status}`)}let P=S.body.getReader(),Q=new TextDecoder,D="";for(;;){let{done:E,value:q}=await P.read();if(E)break;D+=Q.decode(q,{stream:!0});let f;for(;(f=D.indexOf(`
+`))!==-1;){let R=D.slice(0,f).trim();if(D=D.slice(f+1),!!R)try{let i=JSON.parse(R);if(i?.type==="meta"){if(i.actionExecuteMap&&typeof i.actionExecuteMap=="object"&&(Te.current=i.actionExecuteMap),i.assistantMessageId&&(oe.current=String(i.assistantMessageId),me.current.clear(),ye.current.clear(),G.current.clear(),ne(new Map)),i.chatId&&!k){W(i.chatId),L.current=!0;let l=r,K=(X.current||l||"New chat").slice(0,80),b=Date.now();le({id:i.chatId,title:K,createdAt:b,updatedAt:b}),se({id:i.chatId,messages:C,agentId:a});try{localStorage.setItem(V,i.chatId);}catch{}}continue}if(i?.type==="reasoning"){let l=String(i.text??"");w(K=>K.map(b=>b.id===O&&b.role==="assistant"?{...b,reasoning:(b.reasoning??"")+l}:b));continue}if(i?.type==="partial"||i?.type==="final"){let l=i.value;l&&Array.isArray(l.items)&&(w(K=>K.map(b=>b.id===O&&b.role==="assistant"?{...b,items:l.items}:b)),Ue(l.items,i.type==="partial"?"partial":"final")),i?.type==="final"&&w(K=>K.map(b=>b.id===O&&b.role==="assistant"?{...b,reasoningOpen:!1}:b));continue}if(i?.type==="usage"){let l=i?.value?.reasoningTokens;typeof l=="number"&&w(K=>K.map(b=>b.id===O&&b.role==="assistant"?{...b,reasoningTokens:l}:b));continue}if(i?.type==="error"){U(String(i.error??"Unknown error"));continue}}catch{}}}}catch(d){U(String(d?.message??d));}finally{if(re(false),!k&&!L.current){let d=`local-${ie()}`;W(d),L.current=true;let I=(X.current||"New chat").slice(0,80),S=Date.now();le({id:d,title:I,createdAt:S,updatedAt:S}),se({id:d,messages:N,agentId:a});try{localStorage.setItem(V,d);}catch{}}}}let[N,w]=react.useState([]),[h,re]=react.useState(false),[Oe,U]=react.useState(null),ae=react.useRef(null),[k,W]=react.useState(null),[nt,ve]=react.useState(false),[De,at]=react.useState(""),[Gt,st]=react.useState(0),[lt,it]=react.useState(false),[ct,ge]=react.useState(null),[fe,Le]=react.useState(""),ut=react.useRef(null),Pe=react.useRef(null),dt=react.useRef(null),[ke,pt]=react.useState(true),we=react.useRef(false),L=react.useRef(false),X=react.useRef(null),gt=react.useRef(null),ft=react.useRef(null),Te=react.useRef({}),oe=react.useRef(void 0),me=react.useRef(new Set),ye=react.useRef(new Map),G=react.useRef(new Map),[mt,ne]=react.useState(new Map),je=react.useCallback((e,n)=>{let r=ye.current.get(e)||[],s=JSON.stringify(n);if(r.push(s),r.length>3&&r.shift(),ye.current.set(e,r),r.length>=2){let c=r.slice(-2);return c[0]===c[1]}return  false},[]),Ue=react.useCallback((e,n)=>{!Array.isArray(e)||e.length===0||e.forEach((r,s)=>{if(!(!r||typeof r!="object")&&r.type==="action"){let c=String(r.name??"").trim();if(!c)return;let H=Ee.get(c);if(!H)return;let O=!!Te.current[c],C=`${oe.current||"assist"}:${c}:${s}`,d=`${c}:${s}`;try{if(n==="partial"&&O)ne(I=>new Map(I).set(d,"executing")),Promise.resolve(H(r.params,{name:c,trigger:n,index:s,assistantMessageId:oe.current,chatId:k||void 0})).catch(()=>{});else if(n==="partial"&&!O){let I=je(d,r.params),S=G.current.get(d);I&&S!=="executed"?(G.current.set(d,"executed"),ne(P=>new Map(P).set(d,"executed")),Promise.resolve(H(r.params,{name:c,trigger:"params_complete",index:s,assistantMessageId:oe.current,chatId:k||void 0})).catch(()=>{})):S||(G.current.set(d,"executing"),ne(P=>new Map(P).set(d,"executing")));}else n==="final"&&G.current.get(d)!=="executed"&&!me.current.has(C)&&(me.current.add(C),G.current.set(d,"executed"),ne(S=>new Map(S).set(d,"executed")),Promise.resolve(H(r.params,{name:c,trigger:O?"final":"params_complete",index:s,assistantMessageId:oe.current,chatId:k||void 0})).catch(()=>{}));}catch{}}});},[Ee,k,je]),Me=()=>{try{let e=localStorage.getItem(Re);return e?JSON.parse(e):[]}catch{return []}},Je=e=>{try{localStorage.setItem(Re,JSON.stringify(e));}catch{}},qe=e=>{try{let n=localStorage.getItem(he(e));return n?JSON.parse(n):null}catch{return null}},se=e=>{try{localStorage.setItem(he(e.id),JSON.stringify(e));}catch{}},le=e=>{let n=Me(),r=n.findIndex(s=>s.id===e.id);r>=0?n[r]=e:n.unshift(e),Je(n);},yt=e=>{let r=Me().filter(s=>s.id!==e);Je(r);},bt=e=>{try{localStorage.removeItem(he(e));}catch{}},xt=e=>{if(bt(e),yt(e),k===e){w([]),U(null),W(null),L.current=false,X.current=null;try{localStorage.removeItem(V);}catch{}}};react.useEffect(()=>{if(we.current){we.current=false;return}ke&&Pe.current?.scrollIntoView({behavior:"smooth",block:"end"});},[N,h,ke]),react.useEffect(()=>{try{let e=localStorage.getItem(V);if(e){let n=qe(e);n&&(W(n.id),L.current=!0,w(n.messages||[]));}}catch{}},[]),react.useEffect(()=>{try{localStorage.setItem(Be,String(_));}catch{}},[_]),react.useEffect(()=>{if(!k||!L.current)return;se({id:k,messages:N,agentId:a});let n=N.find(c=>c.role==="user"),r=(X.current||(n?.text??"New chat")).slice(0,80),s={id:k,title:r,createdAt:Date.now(),updatedAt:Date.now()};le(s);try{localStorage.setItem(V,k);}catch{}},[N,k,a]);let ie=()=>`${Date.now().toString(36)}-${Math.random().toString(36).slice(2,8)}`;function Ct(){ae.current&&(ae.current.abort(),ae.current=null),re(false),U("Request stopped by user");}async function Ke(){if(!a)return;let e=de.trim();if(!e)return;U(null),re(true),!k&&N.length===0&&(X.current=e);let n=ie(),r=ie(),s={id:n,role:"user",text:e},c={id:r,role:"assistant",items:[],reasoning:"",reasoningOpen:false},H=[...N,s,c],O=[...N.map(C=>C.role==="user"?{role:"user",content:C.text}:{role:"assistant",items:Array.isArray(C.items)?C.items:[]}),{role:"user",content:e}];w(H),Fe("");try{ae.current=new AbortController;let C={prompt:e,chatId:k??void 0,messages:O};w(Q=>Q.map(D=>D.id===r||D.id===n?{...D,requestParams:C}:D));let d=await fetch(Qe(Ie,`/api/run/${a}`),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(C),signal:ae.current.signal});if(!d.ok||!d.body){let Q=await d.text().catch(()=>"");throw new Error(Q||`Request failed with ${d.status}`)}let I=d.body.getReader(),S=new TextDecoder,P="";for(;;){let{done:Q,value:D}=await I.read();if(Q)break;P+=S.decode(D,{stream:!0});let E;for(;(E=P.indexOf(`
+`))!==-1;){let q=P.slice(0,E).trim();if(P=P.slice(E+1),!!q)try{let f=JSON.parse(q);if(f?.type==="meta"){if(f.actionExecuteMap&&typeof f.actionExecuteMap=="object"&&(Te.current=f.actionExecuteMap),f.assistantMessageId&&(oe.current=String(f.assistantMessageId),me.current.clear(),ye.current.clear(),G.current.clear(),ne(new Map)),f.chatId&&!k){W(f.chatId),L.current=!0;let R=e,i=(X.current||R||"New chat").slice(0,80),l=Date.now();le({id:f.chatId,title:i,createdAt:l,updatedAt:l}),se({id:f.chatId,messages:H,agentId:a});try{localStorage.setItem(V,f.chatId);}catch{}}continue}if(f?.type==="reasoning"){let R=String(f.text??"");w(i=>i.map(l=>l.id===r&&l.role==="assistant"?{...l,reasoning:(l.reasoning??"")+R}:l));continue}if(f?.type==="partial"||f?.type==="final"){let R=f.value;R&&Array.isArray(R.items)&&(w(i=>i.map(l=>l.id===r&&l.role==="assistant"?{...l,items:R.items}:l)),Ue(R.items,f.type==="partial"?"partial":"final")),f?.type==="final"&&w(i=>i.map(l=>l.id===r&&l.role==="assistant"?{...l,reasoningOpen:!1}:l));continue}if(f?.type==="usage"){let R=f?.value?.reasoningTokens;typeof R=="number"&&w(i=>i.map(l=>l.id===r&&l.role==="assistant"?{...l,reasoningTokens:R}:l));continue}if(f?.type==="error"){U(String(f.error??"Unknown error"));continue}}catch{}}}}catch(C){U(String(C?.message??C));}finally{if(re(false),!k&&!L.current){let C=`local-${ie()}`;W(C),L.current=true;let d=(X.current||"New chat").slice(0,80),I=Date.now();le({id:C,title:d,createdAt:I,updatedAt:I}),se({id:C,messages:N,agentId:a});try{localStorage.setItem(V,C);}catch{}}}}function ht(e){return !Array.isArray(e)||e.length===0?null:jsxRuntime.jsx("div",{className:"space-y-3",children:e.map((n,r)=>{let s=`it-${r}`;if(typeof n=="string")return jsxRuntime.jsx("div",{className:"rounded-xl  p-4 text-[14px] whitespace-pre-wrap",children:n},s);if(n&&typeof n=="object"){if(n.type==="action"){let c=`${String(n.name??"action")}:${r}`,H=mt.get(c);return jsxRuntime.jsx("div",{className:"space-y-2",children:jsxRuntime.jsx("div",{className:"px-2 py-1 text-xs",style:{color:t.mutedTextColor},children:H==="executing"?jsxRuntime.jsxs("span",{className:"flex items-center gap-2",children:[jsxRuntime.jsxs("svg",{className:"animate-spin h-3 w-3",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsxRuntime.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("path",{className:"opacity-75",fill:"currentColor",d:"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),String(n.name??"action")," is executing"]}):jsxRuntime.jsxs("span",{className:"flex items-center gap-1",children:[jsxRuntime.jsx("span",{className:"inline-block h-1.5 w-1.5 rounded-full",style:{backgroundColor:"#10b981"}}),String(n.name??"action")," has executed"]})})},s)}if(n.type==="ui-component"||n.type==="ui"){let c=String(n.name??n.component??"").trim(),H=c?ot.get(c):void 0;return H?jsxRuntime.jsx(H,{...n.props||{}}):jsxRuntime.jsxs("div",{className:"rounded-xl p-4",style:{backgroundColor:t.inputBackground,border:`1px solid ${t.borderColor}`},children:[jsxRuntime.jsxs("div",{className:"inline-flex items-center gap-2 text-xs mb-2",style:{color:t.mutedTextColor},children:[jsxRuntime.jsx("span",{className:"px-2 py-0.5 rounded",style:{backgroundColor:t.accentColor,border:`1px solid ${t.borderColor}`},children:"UI"}),jsxRuntime.jsx("span",{children:c||"component"}),jsxRuntime.jsx("span",{className:"ml-2 opacity-70",children:"(unregistered)"})]}),jsxRuntime.jsx("pre",{className:"text-xs overflow-auto",style:{color:t.mutedTextColor},children:JSON.stringify(n.props??{},null,2)})]},s)}return jsxRuntime.jsx("div",{className:"rounded-xl p-4 text-[14px]",style:{backgroundColor:t.cardBackground,border:`1px solid ${t.borderColor}`},children:jsxRuntime.jsx("pre",{className:"text-xs overflow-auto",style:{color:t.mutedTextColor},children:JSON.stringify(n,null,2)})},s)}return null})})}let J=Wt[p],t={primaryColor:m||J.primaryColor,backgroundColor:A||J.backgroundColor,borderColor:T||J.borderColor,textColor:z||J.textColor,accentColor:j||J.accentColor,mutedTextColor:J.mutedTextColor,inputBackground:J.inputBackground,cardBackground:J.cardBackground,hoverBackground:J.hoverBackground},vt={backgroundColor:t.backgroundColor,color:t.textColor,height:ce},kt={width:typeof Y=="number"?`${Y}px`:Y,maxWidth:typeof te=="number"?`${te}px`:te},wt={position:"fixed",bottom:typeof y.bottom=="number"?`${y.bottom}px`:y.bottom,right:y.right?typeof y.right=="number"?`${y.right}px`:y.right:void 0,top:y.top?typeof y.top=="number"?`${y.top}px`:y.top:void 0,left:y.left?typeof y.left=="number"?`${y.left}px`:y.left:void 0},Ne=typeof Ce=="number"?`${Ce}px`:Ce;return jsxRuntime.jsxs("div",{className:`flex h-full w-full ${tt}`,style:vt,dir:g,children:[jsxRuntime.jsx("div",{className:`flex items-stretch transition-all duration-1000 justify-stretch w-full h-full ${_&&Ze?"p-4":"p-0"}`,children:jsxRuntime.jsx("div",{className:"relative flex w-full h-full transition-all duration-1000 ease-out",style:{borderRadius:_&&$e?Ne:"0"},children:_&&$e?jsxRuntime.jsx("div",{className:`w-full h-full transition-all duration-600 ease-out ${h&&Ae?"tc-animated-border p-[1.5px]":"border p-0"}`,style:{borderRadius:Ne,borderColor:!h||!Ae?t.borderColor:"transparent"},children:jsxRuntime.jsx("div",{className:"w-full h-full",style:{borderRadius:Ne,backgroundColor:t.backgroundColor},children:u})}):jsxRuntime.jsx("div",{className:"w-full h-full",children:u})})}),jsxRuntime.jsxs("div",{className:`${rt} flex flex-col transition-all duration-300 ease-out overflow-hidden ${_||v?lt&&M?"fixed inset-0 z-50 w-full max-w-full px-6 py-6":"px-4 py-6 opacity-100 translate-x-0":`w-0 max-w-0 px-0 py-6 opacity-0 ${g==="rtl"?"translate-x-2":"-translate-x-2"} pointer-events-none`}`,style:{...kt,height:ce,backgroundColor:_||v?t.backgroundColor:"transparent"},children:[jsxRuntime.jsxs("div",{className:"mb-6 flex items-center justify-between",children:[jsxRuntime.jsx("div",{className:"min-w-0",children:jsxRuntime.jsx("h1",{title:He,className:"truncate text-[18px] font-semibold",style:{color:t.textColor},children:He})}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2 relative",style:{color:t.mutedTextColor},children:[M&&jsxRuntime.jsx("button",{"aria-label":"Pop out",className:"rounded-lg p-2 transition-all duration-200 ease-out",style:{backgroundColor:"transparent",color:t.mutedTextColor},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=t.hoverBackground,e.currentTarget.style.color=t.textColor;},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=t.mutedTextColor;},onClick:()=>{pe(true),it(e=>!e);},children:jsxRuntime.jsx(iconsReact.IconArrowsMaximize,{size:20,stroke:2})}),jsxRuntime.jsx("button",{"aria-label":"New",className:"rounded-lg p-2 transition-all duration-200 ease-out",style:{backgroundColor:"transparent",color:t.mutedTextColor},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=t.hoverBackground,e.currentTarget.style.color=t.textColor;},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=t.mutedTextColor;},onClick:()=>{h||(w([]),U(null),W(null),L.current=false,X.current=null);},children:jsxRuntime.jsx(iconsReact.IconPlus,{size:20,stroke:2})}),jsxRuntime.jsx("button",{"aria-label":"History",className:"rounded-lg p-2 transition-all duration-200 ease-out",style:{backgroundColor:"transparent",color:t.mutedTextColor},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=t.hoverBackground,e.currentTarget.style.color=t.textColor;},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=t.mutedTextColor;},onClick:()=>ve(e=>!e),ref:gt,children:jsxRuntime.jsx(iconsReact.IconHistory,{size:20,stroke:2})}),nt&&reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"fixed inset-0 z-[900] bg-black/40 backdrop-blur-sm",onClick:()=>ve(false)}),jsxRuntime.jsxs("div",{ref:ft,className:"fixed left-1/2 top-16 -translate-x-1/2 z-[1000] w-[680px] max-w-[94vw] overflow-hidden rounded-2xl border border-[#2A2C33] bg-[#0F1116]/95 shadow-2xl ring-1 ring-black/10",children:[jsxRuntime.jsx("div",{className:"flex items-center gap-3 border-b border-[#2A2C33] px-4 py-3",children:jsxRuntime.jsx("div",{className:"flex-1",children:jsxRuntime.jsx("input",{autoFocus:true,value:De,onChange:e=>at(e.target.value),placeholder:"Search",className:"w-full rounded-lg bg-[#0B0B0F] px-3 py-2 text-sm text-[#EDEEF0] placeholder:text-[#9AA0A6] outline-none border border-[#2A2C33] focus:border-[#3a3d46]"})})}),jsxRuntime.jsx("div",{className:"max-h-[60vh] overflow-y-auto",children:(()=>{let e=De.toLowerCase().trim(),n=Me();return e&&(n=n.filter(r=>(r.title||"").toLowerCase().includes(e))),!n||n.length===0?jsxRuntime.jsx("div",{className:"p-6 text-[#9AA0A6]",children:"No chats found."}):jsxRuntime.jsx("ul",{className:"divide-y divide-[#2A2C33]",children:n.map(r=>jsxRuntime.jsx("li",{children:jsxRuntime.jsxs("div",{className:`flex w-full items-center justify-between gap-3 p-3 ${r.id===k?"bg-[#121318]":""}`,children:[jsxRuntime.jsx("button",{className:"flex-1 text-left transition-colors hover:bg-[#17181C] rounded-lg px-2 py-2",onClick:()=>{let s=qe(r.id);if(s){W(r.id),L.current=true,w(s.messages||[]);try{localStorage.setItem(V,r.id);}catch{}ve(false),pe(true);}},children:jsxRuntime.jsxs("div",{className:"flex items-center justify-between gap-3",children:[jsxRuntime.jsx("div",{className:"min-w-0",children:jsxRuntime.jsx("div",{className:"truncate text-[14px] text-[#EDEEF0]",children:r.title||"Untitled chat"})}),jsxRuntime.jsx("div",{className:"shrink-0 text-[12px] text-[#9AA0A6]",children:_t(r.updatedAt)})]})}),jsxRuntime.jsx("button",{className:"shrink-0 rounded-md p-2 text-[#9AA0A6] hover:text-red-300 hover:bg-red-500/10 border border-transparent hover:border-red-500/30",title:"Delete chat",onClick:s=>{s.stopPropagation(),xt(r.id),st(c=>c+1);},children:jsxRuntime.jsx(iconsReact.IconTrash,{size:16,stroke:2})})]})},r.id))})})()})]})]}),document.body),!v&&jsxRuntime.jsx("button",{"aria-label":"Close chat",className:"rounded-lg p-2 transition-all duration-200 ease-out",style:{backgroundColor:"transparent",color:t.mutedTextColor},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=t.hoverBackground,e.currentTarget.style.color=t.textColor;},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=t.mutedTextColor;},onClick:()=>pe(false),children:jsxRuntime.jsx(iconsReact.IconChevronRight,{size:20,stroke:2,style:{transform:g==="rtl"?"rotate(180deg)":"none"}})})]})]}),jsxRuntime.jsxs("div",{className:"flex-1 overflow-y-auto space-y-4 px-1 pb-4 pt-4",ref:dt,onScroll:e=>{let n=e.currentTarget,c=n.scrollHeight-(n.scrollTop+n.clientHeight)<=64;c!==ke&&pt(c);},children:[Oe&&jsxRuntime.jsx("div",{className:"mx-2 rounded-xl bg-red-500/10 text-red-300 border border-red-500/30 p-3 text-sm",children:Oe}),N.length===0&&!h&&jsxRuntime.jsx("div",{className:"mx-2 rounded-xl p-4",style:{border:`1px solid ${t.borderColor}`,backgroundColor:t.accentColor,color:t.mutedTextColor},children:"Start by sending a message to the agent."}),jsxRuntime.jsx("ul",{className:"space-y-4",children:N.map((e,n)=>jsxRuntime.jsx("li",{className:"px-1",children:e.role==="user"?ct===e.id?jsxRuntime.jsxs("div",{className:"max-w-[720px] rounded-2xl p-2 text-[15px] ring-2",style:{backgroundColor:t.accentColor,color:t.textColor,borderColor:t.primaryColor},children:[jsxRuntime.jsx("textarea",{autoFocus:true,className:"w-full resize-none bg-transparent p-2 leading-relaxed outline-none",rows:Math.max(2,Math.min(10,Math.ceil((fe||e.text).length/60))),value:fe,onChange:r=>Le(r.target.value),onKeyDown:r=>{r.key==="Escape"?ge(null):r.key==="Enter"&&!r.shiftKey&&(r.preventDefault(),h||ze(e.id,fe||e.text));}}),jsxRuntime.jsxs("div",{className:"flex items-center justify-end gap-2 px-2 pb-2",children:[jsxRuntime.jsx("button",{className:"rounded-lg px-3 py-1 text-sm transition-colors",style:{border:`1px solid ${t.borderColor}`,color:t.mutedTextColor,backgroundColor:"transparent"},onMouseEnter:r=>r.currentTarget.style.backgroundColor=t.inputBackground,onMouseLeave:r=>r.currentTarget.style.backgroundColor="transparent",onClick:()=>ge(null),children:"Cancel"}),jsxRuntime.jsx("button",{className:"rounded-lg px-3 py-1 text-sm transition-colors",style:{border:`1px solid ${t.borderColor}`,backgroundColor:t.cardBackground,color:t.textColor},onMouseEnter:r=>r.currentTarget.style.borderColor=t.primaryColor,onMouseLeave:r=>r.currentTarget.style.borderColor=t.borderColor,onClick:()=>{h||ze(e.id,fe||e.text);},children:"Save"})]})]}):jsxRuntime.jsx("div",{title:"Click to edit",onClick:()=>{h||(ge(e.id),Le(e.text));},className:"max-w-[720px] rounded-2xl p-4 text-[15px] leading-relaxed whitespace-pre-wrap cursor-pointer transition",style:{backgroundColor:t.accentColor,color:t.textColor},onMouseEnter:r=>r.currentTarget.style.backgroundColor=t.hoverBackground,onMouseLeave:r=>r.currentTarget.style.backgroundColor=t.accentColor,children:e.text}):jsxRuntime.jsxs("div",{className:"space-y-3",children:[e.reasoning&&jsxRuntime.jsxs("div",{className:"rounded-xl p-3 cursor-pointer",style:{backgroundColor:t.inputBackground,border:`1px solid ${t.borderColor}`},onClick:()=>{we.current=true,w(r=>r.map(s=>s.id===e.id&&s.role==="assistant"?{...s,reasoningOpen:!s.reasoningOpen}:s));},children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between mb-1",children:[jsxRuntime.jsx("div",{className:"text-xs",style:{color:t.mutedTextColor},children:"Reasoning"}),jsxRuntime.jsx("button",{type:"button",className:"text-xs transition-colors",style:{color:t.mutedTextColor},onMouseEnter:r=>r.currentTarget.style.color=t.textColor,onMouseLeave:r=>r.currentTarget.style.color=t.mutedTextColor,children:e.reasoningOpen?"Hide":"Show full"})]}),e.reasoningOpen?jsxRuntime.jsx("pre",{className:"text-xs whitespace-pre-wrap break-words",style:{color:t.mutedTextColor},children:e.reasoning}):(()=>{let r=(e.reasoning||"").trim().split(`
+`).filter(c=>c.trim()),s=r.length>0?r[r.length-1]:"";return jsxRuntime.jsx("pre",{className:"text-xs whitespace-pre-wrap break-words",style:{color:t.mutedTextColor},children:s||"\u2026"})})()]}),ht(e.items),h&&n===N.length-1&&jsxRuntime.jsxs("div",{className:"flex items-center gap-2 text-xs",style:{color:t.mutedTextColor},children:[jsxRuntime.jsx("span",{className:"inline-block h-2 w-2 rounded-full animate-pulse",style:{backgroundColor:t.mutedTextColor}}),jsxRuntime.jsx("span",{children:"Working\u2026"})]})]})},e.id))}),jsxRuntime.jsx("div",{ref:Pe})]}),jsxRuntime.jsx("div",{className:"sticky bottom-0 mt-auto space-y-2 pb-2 pt-1",style:{backgroundColor:t.backgroundColor},children:jsxRuntime.jsx("div",{className:"relative flex-1",children:jsxRuntime.jsxs("div",{className:"relative w-full rounded-2xl pb-12 pt-4",style:{border:`1px solid ${t.borderColor}`,backgroundColor:t.accentColor},children:[jsxRuntime.jsx("div",{className:"px-4",children:jsxRuntime.jsx("textarea",{"aria-label":"Prompt",rows:2,className:"h-auto w-full resize-none bg-transparent text-[15px] leading-relaxed focus:outline-none hsafa-chat-textarea",style:{color:t.textColor},placeholder:et,value:de,onChange:e=>Fe(e.target.value),onKeyDown:e=>{e.key==="Enter"&&!e.shiftKey&&(e.preventDefault(),h||Ke());},ref:ut})}),jsxRuntime.jsxs("div",{className:"absolute bottom-2 left-2 flex items-center gap-1",style:{color:t.mutedTextColor},children:[jsxRuntime.jsx("button",{className:"rounded-lg p-2 transition-colors",style:{backgroundColor:"transparent"},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`${t.backgroundColor}99`,e.currentTarget.style.color=t.textColor;},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=t.mutedTextColor;},"aria-label":"Attach files",children:jsxRuntime.jsx(iconsReact.IconPaperclip,{size:18,stroke:2})}),jsxRuntime.jsx("button",{className:"rounded-lg p-2 transition-colors",style:{backgroundColor:"transparent"},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`${t.backgroundColor}99`,e.currentTarget.style.color=t.textColor;},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=t.mutedTextColor;},"aria-label":"Insert link",children:jsxRuntime.jsx(iconsReact.IconLink,{size:18,stroke:2})})]}),jsxRuntime.jsx("div",{className:"absolute bottom-2 right-2",children:jsxRuntime.jsx("button",{"aria-label":h?"Stop":"Send",disabled:!h&&!de.trim(),className:"rounded-xl p-3 transition-all duration-200 ease-out",style:{border:`1px solid ${h?"#ef4444":t.borderColor}`,backgroundColor:h?"#ef444420":t.cardBackground,color:h?"#ef4444":t.mutedTextColor,opacity:!h&&!de.trim()?.4:1},onMouseEnter:e=>{e.currentTarget.disabled||(h?(e.currentTarget.style.borderColor="#dc2626",e.currentTarget.style.backgroundColor="#dc262630",e.currentTarget.style.color="#dc2626"):(e.currentTarget.style.borderColor=t.primaryColor,e.currentTarget.style.backgroundColor=t.hoverBackground,e.currentTarget.style.color=t.textColor));},onMouseLeave:e=>{e.currentTarget.disabled||(h?(e.currentTarget.style.borderColor="#ef4444",e.currentTarget.style.backgroundColor="#ef444420",e.currentTarget.style.color="#ef4444"):(e.currentTarget.style.borderColor=t.borderColor,e.currentTarget.style.backgroundColor=t.cardBackground,e.currentTarget.style.color=t.mutedTextColor));},onClick:()=>{h?Ct():Ke();},children:h?jsxRuntime.jsx(iconsReact.IconPlayerStop,{size:18,stroke:2}):jsxRuntime.jsx(iconsReact.IconArrowUp,{size:18,stroke:2})})})]})})})]}),!_&&!v&&jsxRuntime.jsx("button",{"aria-label":"Open chat",onClick:()=>pe(true),className:"rounded-full border p-3 shadow-md transition-colors",style:{...wt,borderColor:t.borderColor,backgroundColor:t.accentColor,color:t.textColor,borderRadius:"50%"},onMouseEnter:e=>{e.currentTarget.style.borderColor=t.primaryColor,e.currentTarget.style.backgroundColor=`${t.accentColor}dd`;},onMouseLeave:e=>{e.currentTarget.style.borderColor=t.borderColor,e.currentTarget.style.backgroundColor=t.accentColor;},children:jsxRuntime.jsx(iconsReact.IconMessage,{size:20,stroke:2})}),jsxRuntime.jsx("style",{children:`
+          @keyframes tc-border-flow {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+
+          .tc-animated-border {
+            position: relative;
+            /* Animated shimmer border using primary color */
+            background: linear-gradient(120deg,
+              ${t.primaryColor}dd 0%,
+              ${t.primaryColor}88 25%,
+              ${t.primaryColor}00 50%,
+              ${t.primaryColor}88 75%,
+              ${t.primaryColor}dd 100%
+            );
+            background-size: 300% 300%;
+            animation: tc-border-flow 3s ease-in-out infinite;
+            filter: drop-shadow(0 0 10px ${t.primaryColor}40);
+          }
+          
+          .hsafa-chat-textarea::placeholder {
+            color: ${t.mutedTextColor};
+          }
+        `})]})}exports.Button=er;exports.HsafaChat=Xt;exports.HsafaProvider=Et;exports.useAutoScroll=lr;exports.useHsafa=ee;exports.useHsafaAction=mr;exports.useHsafaComponent=Cr;exports.useToggle=nr;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map