{"app":{"id":28,"summary":"AI Company assistant ","versions":[8863,8864,8865,8866,8875],"created_by":"tristan795","created_at":"2026-03-04T10:37:41.940Z","votes":0,"approved":true,"apps":["ai"],"app_type":"raw","external_embed_url":"https://app.windmill.dev/public/windmill-labs/928711b4b9ac223354f283212d5e7594","value":{"runnables":{"sendAiMessage":{"name":"Send message to company AI assistant","path":"hub/flows/76","type":"path","fields":{"message":{"type":"user","fieldType":"string"},"session_id":{"type":"user","value":"","fieldType":"string"}},"schema":{"type":"object","order":["message","session_id"],"required":["message"],"properties":{"message":{"type":"string","description":"User's message"},"session_id":{"type":"string","default":"","description":""}}},"runType":"flow"},"getSalesMetrics":{"name":"Get sales metrics","type":"inline","fields":{},"inlineScript":{"lock":"{\n \"dependencies\": {}\n}\n//bun.lock\n","assets":[],"schema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":[],"properties":{}},"content":"// Give sales metrics, and allow you to manipulate them on specific date ranges.\n// We use mock data to keep things simple for this example\n// But you can can easily create a script that gets this data from your own database\n\nexport async function main() {\n const today = new Date();\n const results = [];\n\n // Sales values that create realistic patterns (weekends lower, some spikes for promotions)\n const baseSales = [1200, 850, 720, 1150, 1180, 1220, 1190, 3850, 3620, 3290,\n 1450, 1280, 890, 1100, 6420, 5890, 5240, 1520, 1380, 1050,\n 920, 1180, 1240, 1210, 1290, 1350, 1180, 1220, 1340, 1410];\n\n for (let i = 29; i >= 0; i--) {\n const date = new Date(today);\n date.setDate(today.getDate() - i);\n const dateStr = date.toISOString().split('T')[0];\n results.push({\n date: dateStr,\n sales: baseSales[29 - i]\n });\n }\n\n return results;\n}\n","language":"bun"}},"getMarketingActivations":{"name":"Get marketing activations","type":"inline","fields":{},"inlineScript":{"lock":"{\n \"dependencies\": {}\n}\n//bun.lock\n","assets":[],"schema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":[],"properties":{}},"content":"// Returns a list of marketing activations (campaigns, ads, promotions) with their dates, budgets, and reach.\n// This allows the AI agent to correlate marketing efforts with sales performance and measure campaign impact.\n// We use mock data to keep things simple for this example\n// But you can easily create a script that gets this data from your marketing platform or CRM\n\nexport async function main() {\n const today = new Date();\n\n // Campaign templates with days offset from today (negative = days ago)\n const campaigns = [\n { daysAgo: 28, name: \"Monthly Newsletter\", type: \"email\", budget: 500, reach: 15000 },\n { daysAgo: 25, name: \"Instagram Ads - New Collection\", type: \"social_media\", budget: 1200, reach: 45000 },\n { daysAgo: 21, name: \"Google Search Ads\", type: \"paid_search\", budget: 800, reach: 8000 },\n { daysAgo: 17, name: \"Influencer Partnership - @fashionista\", type: \"influencer\", budget: 2000, reach: 120000 },\n { daysAgo: 14, name: \"Flash Sale Newsletter\", type: \"email\", budget: 300, reach: 18000 },\n { daysAgo: 10, name: \"TikTok Video Campaign\", type: \"social_media\", budget: 1500, reach: 85000 },\n { daysAgo: 6, name: \"Retargeting Ads - Facebook\", type: \"social_media\", budget: 600, reach: 12000 },\n { daysAgo: 3, name: \"Weekend Promo Email\", type: \"email\", budget: 400, reach: 20000 },\n ];\n\n return campaigns.map(campaign => {\n const date = new Date(today);\n date.setDate(today.getDate() - campaign.daysAgo);\n return {\n date: date.toISOString().split('T')[0],\n name: campaign.name,\n type: campaign.type,\n budget: campaign.budget,\n reach: campaign.reach\n };\n });\n}\n","language":"bun"}}},"files":{"/App.tsx":"import React, { useState, useEffect, useRef } from 'react'\nimport { backend } from './wmill'\nimport './index.css'\n\ntype Message = { role: \"user\" | \"assistant\"; content: string; timestamp?: Date; toolsUsed?: string[] };\n\nconst SYSTEM_PROMPT = `You are Boris, the internal AI assistant for Acme Corporation. Your role is to help employees find information about company policies, HR questions, internal processes, and general company knowledge.\n\n## Company Overview\n- **Company Name**: Acme Corporation\n- **Founded**: 2015\n- **Headquarters**: 123 Innovation Drive, San Francisco, CA 94105\n- **CEO**: Sarah Johnson\n- **Number of Employees**: 450+\n\n## Key Contacts\n- **HR Director**: Maria Garcia (maria.garcia@acme.com)\n- **IT Support**: helpdesk@acme.com or ext. 5555\n- **Facilities Manager**: Tom Wilson (tom.wilson@acme.com)\n- **Finance Director**: David Chen (david.chen@acme.com)\n- **Legal Counsel**: Jennifer Smith (jennifer.smith@acme.com)\n\n## Payroll & Compensation\n- **Pay Schedule**: Bi-weekly, every other Friday\n- **Next Payday**: Check the HR portal for exact dates\n- **Direct Deposit**: Set up through the HR portal under \"Payroll Settings\"\n- **Pay Stubs**: Available on the HR portal 2 days before payday\n- **Annual Raises**: Performance reviews in March, raises effective April 1st\n- **Bonuses**: Annual bonuses paid in December based on company and individual performance\n\n## Time Off & Leave\n- **PTO Policy**: 20 days per year for all full-time employees (accrues monthly)\n- **Sick Leave**: 10 days per year (separate from PTO)\n- **How to Request**: Submit through the HR portal at least 2 weeks in advance for planned leave\n- **Parental Leave**: 16 weeks paid for primary caregivers, 8 weeks for secondary\n- **Bereavement**: 5 days for immediate family, 3 days for extended family\n- **Jury Duty**: Paid time off for the duration of service\n\n## Company Holidays (2024)\n1. New Year's Day - January 1\n2. Martin Luther King Jr. Day - January 15\n3. Presidents' Day - February 19\n4. Memorial Day - May 27\n5. Independence Day - July 4\n6. Labor Day - September 2\n7. Thanksgiving - November 28-29 (2 days)\n8. Christmas Eve & Day - December 24-25\n9. New Year's Eve - December 31\n\n## Benefits\n- **Health Insurance**: Blue Cross PPO and HMO options, company pays 80%\n- **Dental & Vision**: Included with health insurance\n- **401(k)**: Company matches 4% of salary\n- **Life Insurance**: 2x annual salary provided\n- **FSA/HSA**: Available for health and dependent care expenses\n- **Gym Membership**: $50/month reimbursement\n- **Professional Development**: $2,000/year for courses, conferences, certifications\n\n## Office Information\n- **Office Hours**: 8:00 AM - 6:00 PM, Monday to Friday\n- **Building Access**: Badge required, contact Security for issues\n- **Parking**: Free parking in Lot B, badge required for garage\n- **Kitchen**: Free coffee, tea, and snacks on each floor\n- **Meeting Rooms**: Book through Outlook calendar or the Rooms app\n\n## IT & Security\n- **Password Reset**: Self-service at password.acme.com or contact IT\n- **VPN Access**: Required for remote work, setup guide on IT portal\n- **Software Requests**: Submit ticket through IT portal\n- **Security Incidents**: Report immediately to security@acme.com\n\n## Remote Work Policy\n- **Hybrid Schedule**: 3 days in office (Tue, Wed, Thu), 2 days remote\n- **Equipment**: Laptop provided, $500 home office stipend for new hires\n- **Internet Reimbursement**: $50/month for remote work days\n\n## Expense Reimbursement\n- **Submit Through**: Concur expense system\n- **Deadline**: Within 30 days of expense\n- **Approval**: Manager approval required for expenses over $100\n- **Travel Policy**: Book through corporate travel portal for best rates\n\nBe helpful, friendly, and concise. If you don't know something specific, direct employees to the appropriate contact person or department.`;\n\nconst SUGGESTIONS = [\n \"When is payday?\",\n \"Who is in charge of HR?\",\n \"How many sales did we make this week?\",\n \"Which marketing campaign had the highest ROI?\",\n];\n\ntype Tool = {\n id: string;\n name: string;\n description: string;\n enabled: boolean;\n backendMethod: string;\n};\n\nconst TOOLS: Tool[] = [\n {\n id: 'get_sale_metrics',\n name: 'Sales Metrics',\n description: 'Triggers a script that gets sales metrics from the last 30 days',\n enabled: true,\n backendMethod: 'getSalesMetrics',\n },\n {\n id: 'get_marketing_activations',\n name: 'Marketing Activations',\n description: 'Triggers a script that gets marketing activations from the last 30 days',\n enabled: true,\n backendMethod: 'getMarketingActivations',\n },\n];\n\nfunction generateSessionId(): string {\n return crypto.randomUUID();\n}\n\nfunction getSessionId(): string {\n let sessionId = sessionStorage.getItem('chat_session_id');\n if (!sessionId) {\n sessionId = generateSessionId();\n sessionStorage.setItem('chat_session_id', sessionId);\n }\n return sessionId;\n}\n\nconst BotIcon = () => (\n \n \n \n \n \n \n \n);\n\nconst UserIcon = () => (\n \n \n \n \n);\n\nconst SendIcon = () => (\n \n \n \n \n);\n\nconst ChatIcon = () => (\n \n \n \n);\n\nconst DocIcon = () => (\n \n \n \n \n \n \n \n);\n\nconst ToolsIcon = () => (\n \n \n \n);\n\nconst CheckIcon = () => (\n \n \n \n);\n\nconst PlayIcon = () => (\n \n \n \n);\n\nconst CloseIcon = () => (\n \n \n \n \n);\n\nconst WrenchIcon = () => (\n \n \n \n);\n\ntype Tab = 'chat' | 'context' | 'tools';\n\nconst App = () => {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState('');\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [sessionId, setSessionId] = useState(getSessionId());\n const [activeTab, setActiveTab] = useState('chat');\n const [toolResults, setToolResults] = useState>({});\n const [toolLoading, setToolLoading] = useState>({});\n const messagesContainerRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n // Only scroll if there are messages and the container exists\n if (messages.length > 0 && messagesContainerRef.current) {\n // Use scrollTop on the container instead of scrollIntoView\n // This prevents the parent page from scrolling when in an iframe\n messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;\n }\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n async function sendMessage(e: React.FormEvent) {\n e.preventDefault();\n if (!input.trim() || loading) return;\n\n const userMessage = input.trim();\n setInput('');\n setError(null);\n setLoading(true);\n\n setMessages(prev => [...prev, { role: 'user', content: userMessage, timestamp: new Date() }]);\n\n try {\n const response = await backend.sendAiMessage({\n session_id: sessionId,\n message: userMessage,\n system_prompt: SYSTEM_PROMPT\n });\n const content = typeof response === 'string' ? response : response.content;\n // Extract tools used from response if available\n const toolsUsed = response?.tool_calls as string[] | undefined;\n setMessages(prev => [...prev, { role: 'assistant', content, timestamp: new Date(), toolsUsed }]);\n } catch (e) {\n console.error('Failed to send message:', e);\n setError('Failed to send message. Please try again.');\n setMessages(prev => prev.slice(0, -1));\n }\n setLoading(false);\n }\n\n function startNewChat() {\n const newSessionId = generateSessionId();\n sessionStorage.setItem('chat_session_id', newSessionId);\n setSessionId(newSessionId);\n setMessages([]);\n setError(null);\n }\n\n async function testTool(tool: Tool) {\n setToolLoading(prev => ({ ...prev, [tool.id]: true }));\n setToolResults(prev => ({ ...prev, [tool.id]: undefined }));\n try {\n const backendFn = (backend as any)[tool.backendMethod];\n if (!backendFn) {\n throw new Error(`Backend method ${tool.backendMethod} not found`);\n }\n const result = await backendFn();\n setToolResults(prev => ({ ...prev, [tool.id]: result }));\n } catch (e) {\n console.error('Failed to test tool:', e);\n setToolResults(prev => ({ ...prev, [tool.id]: { error: String(e) } }));\n }\n setToolLoading(prev => ({ ...prev, [tool.id]: false }));\n }\n\n function clearToolResult(toolId: string) {\n setToolResults(prev => ({ ...prev, [toolId]: undefined }));\n }\n\n return (\n
\n
\n
\n
\n
\n \n
\n
\n

Boris

\n AI Assistant\n
\n
\n
\n {activeTab === 'chat' && (\n \n )}\n
\n
\n\n
\n setActiveTab('chat')}\n >\n \n Chat\n \n setActiveTab('context')}\n >\n \n Knowledge Base\n \n setActiveTab('tools')}\n >\n \n Tools\n \n
\n\n {activeTab === 'chat' ? (\n <>\n
\n {messages.length === 0 ? (\n
\n
\n \n
\n

Hi, I'm Boris!

\n

Ask me anything about your company

\n
\n {SUGGESTIONS.map((suggestion, idx) => (\n {\n setInput(suggestion);\n inputRef.current?.focus({ preventScroll: true });\n }}\n >\n {suggestion}\n \n ))}\n
\n
\n ) : (\n
\n {messages.map((msg, idx) => (\n
\n
\n {msg.role === 'assistant' ? : }\n
\n
\n {msg.toolsUsed && msg.toolsUsed.length > 0 && (\n
\n \n Used:\n {msg.toolsUsed.map((tool, i) => (\n {tool.replace(/_/g, ' ')}\n ))}\n
\n )}\n
{msg.content}
\n
\n
\n ))}\n {loading && (\n
\n
\n \n
\n
\n
\n \n \n \n
\n
\n
\n )}\n
\n )}\n {error && (\n
\n {error}\n \n
\n )}\n
\n\n
\n
\n setInput(e.target.value)}\n placeholder=\"Type your message...\"\n disabled={loading}\n className=\"message-input\"\n />\n \n \n \n \n
\n \n ) : activeTab === 'context' ? (\n
\n
\n

Knowledge Base

\n

This is the information Boris uses to answer your questions

\n
\n
\n 
{SYSTEM_PROMPT}
\n
\n
\n ) : (\n
\n
\n

Available Tools

\n

These tools allow Boris to trigger scripts and flows from your workspace

\n
\n
\n {TOOLS.map((tool) => (\n
\n
\n
\n

{tool.name}

\n

{tool.description}

\n
\n
\n {tool.enabled && (\n testTool(tool)}\n disabled={toolLoading[tool.id]}\n >\n {toolLoading[tool.id] ? (\n
\n ) : (\n \n )}\n Test\n \n )}\n
\n {tool.enabled && }\n {tool.enabled ? 'Enabled' : 'Coming soon'}\n
\n
\n
\n {toolResults[tool.id] !== undefined && (\n
\n
\n Result:\n \n
\n 
\n                        {JSON.stringify(toolResults[tool.id], null, 2)}\n
\n
\n )}\n
\n ))}\n
\n
\n )}\n
\n
\n );\n};\n\nexport default App;\n","/index.css":"* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n:root {\n --primary: #18181b;\n --primary-dark: #09090b;\n --primary-light: #3f3f46;\n --bg-main: #f8fafc;\n --bg-chat: #ffffff;\n --bg-user: #18181b;\n --bg-assistant: #f1f5f9;\n --text-primary: #1e293b;\n --text-secondary: #64748b;\n --text-light: #94a3b8;\n --border: #e2e8f0;\n --success: #22c55e;\n --error: #ef4444;\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --radius-sm: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n --radius-full: 9999px;\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: var(--bg-main);\n color: var(--text-primary);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n}\n\n.chat-app {\n min-height: 100vh;\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n}\n\n.chat-container {\n width: 100%;\n height: 100vh;\n background: var(--bg-chat);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* Header */\n.chat-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: var(--bg-chat);\n border-bottom: 1px solid var(--border);\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.bot-avatar {\n width: 44px;\n height: 44px;\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\n border-radius: var(--radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.bot-avatar svg {\n width: 24px;\n height: 24px;\n}\n\n.header-info h1 {\n font-size: 1rem;\n font-weight: 600;\n color: var(--text-primary);\n}\n\n.subtitle {\n font-size: 0.8rem;\n color: var(--text-secondary);\n}\n\n.header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.new-chat-btn {\n padding: 8px 16px;\n background: var(--bg-assistant);\n color: var(--text-primary);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.new-chat-btn:hover {\n background: var(--border);\n}\n\n/* Tabs */\n.tabs {\n display: flex;\n background: var(--bg-chat);\n border-bottom: 1px solid var(--border);\n padding: 0 20px;\n}\n\n.tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 20px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n color: var(--text-secondary);\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n margin-bottom: -1px;\n}\n\n.tab:hover {\n color: var(--text-primary);\n}\n\n.tab.active {\n color: var(--primary);\n border-bottom-color: var(--primary);\n}\n\n.tab svg {\n width: 18px;\n height: 18px;\n}\n\n/* Messages Container */\n.messages-container {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n background: var(--bg-main);\n position: relative;\n}\n\n.messages-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* Context Container */\n.context-container {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n background: var(--bg-main);\n}\n\n.context-header {\n margin-bottom: 20px;\n}\n\n.context-header h2 {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 4px;\n}\n\n.context-header p {\n font-size: 0.875rem;\n color: var(--text-secondary);\n}\n\n.context-content {\n background: var(--bg-chat);\n border: 1px solid var(--border);\n border-radius: var(--radius-md);\n padding: 20px;\n overflow-x: auto;\n}\n\n.context-content pre {\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;\n font-size: 0.8rem;\n line-height: 1.7;\n color: var(--text-primary);\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Tools Container */\n.tools-container {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n background: var(--bg-main);\n}\n\n.tools-header {\n margin-bottom: 24px;\n}\n\n.tools-header h2 {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 4px;\n}\n\n.tools-header p {\n font-size: 0.875rem;\n color: var(--text-secondary);\n}\n\n.tools-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.tool-card {\n background: var(--bg-chat);\n border: 1px solid var(--border);\n border-radius: var(--radius-md);\n padding: 20px;\n transition: all 0.2s;\n}\n\n.tool-card.enabled {\n}\n\n.tool-card.disabled {\n opacity: 0.7;\n}\n\n.tool-card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.tool-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.tool-test-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: var(--radius-sm);\n font-size: 0.8rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.tool-test-btn:hover:not(:disabled) {\n background: var(--primary-dark);\n}\n\n.tool-test-btn:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n}\n\n.tool-test-btn svg {\n width: 14px;\n height: 14px;\n}\n\n.tool-test-btn .loading-spinner.small {\n width: 14px;\n height: 14px;\n border-width: 2px;\n}\n\n.tool-info h3 {\n font-size: 1rem;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 4px;\n}\n\n.tool-info p {\n font-size: 0.875rem;\n color: var(--text-secondary);\n}\n\n.tool-status {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--bg-assistant);\n border-radius: var(--radius-full);\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--text-secondary);\n white-space: nowrap;\n}\n\n.tool-status.enabled {\n background: rgba(34, 197, 94, 0.1);\n color: var(--success);\n}\n\n.tool-status svg {\n width: 14px;\n height: 14px;\n}\n\n.tool-result {\n margin-top: 16px;\n border-top: 1px solid var(--border);\n padding-top: 16px;\n}\n\n.tool-result-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.result-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--text-light);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.close-result-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n background: var(--bg-assistant);\n border: none;\n border-radius: var(--radius-sm);\n color: var(--text-secondary);\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.close-result-btn:hover {\n background: var(--border);\n color: var(--text-primary);\n}\n\n.close-result-btn svg {\n width: 14px;\n height: 14px;\n}\n\n.tool-result-json {\n background: var(--bg-main);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n padding: 16px;\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;\n font-size: 0.75rem;\n line-height: 1.6;\n color: var(--text-primary);\n overflow-x: auto;\n max-height: 300px;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Loading State */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 16px;\n color: var(--text-secondary);\n}\n\n.loading-spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--border);\n border-top-color: var(--primary);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n color: var(--text-secondary);\n}\n\n.empty-icon {\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, var(--primary-light), var(--primary));\n border-radius: var(--radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n margin-bottom: 20px;\n}\n\n.empty-icon svg {\n width: 40px;\n height: 40px;\n}\n\n.empty-state h2 {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 8px;\n}\n\n.empty-state p {\n font-size: 0.95rem;\n}\n\n.suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 24px;\n justify-content: center;\n max-width: 500px;\n}\n\n.suggestion-btn {\n padding: 10px 16px;\n background: var(--bg-chat);\n color: var(--text-primary);\n border: 1px solid var(--border);\n border-radius: var(--radius-full);\n font-size: 0.875rem;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.suggestion-btn:hover {\n background: var(--primary);\n color: white;\n border-color: var(--primary);\n}\n\n/* Message Wrapper */\n.message-wrapper {\n display: flex;\n gap: 12px;\n max-width: 85%;\n animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message-wrapper.user {\n flex-direction: row-reverse;\n margin-left: auto;\n}\n\n.message-avatar {\n width: 36px;\n height: 36px;\n border-radius: var(--radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.message-wrapper.assistant .message-avatar {\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\n color: white;\n}\n\n.message-wrapper.user .message-avatar {\n background: var(--bg-assistant);\n color: var(--text-secondary);\n}\n\n.message-avatar svg {\n width: 20px;\n height: 20px;\n}\n\n/* Message Bubble */\n.message-bubble {\n padding: 12px 16px;\n border-radius: var(--radius-md);\n line-height: 1.5;\n}\n\n.message-wrapper.assistant .message-bubble {\n background: var(--bg-chat);\n color: var(--text-primary);\n border: 1px solid var(--border);\n border-bottom-left-radius: 4px;\n}\n\n.message-wrapper.user .message-bubble {\n background: var(--bg-user);\n color: white;\n border-bottom-right-radius: 4px;\n}\n\n.message-content {\n font-size: 0.925rem;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Tools Used in Message */\n.tools-used {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n margin-bottom: 10px;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--border);\n}\n\n.tools-used svg {\n color: var(--text-secondary);\n flex-shrink: 0;\n}\n\n.tools-used-label {\n font-size: 0.75rem;\n color: var(--text-secondary);\n font-weight: 500;\n}\n\n.tool-badge {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n background: linear-gradient(135deg, rgba(24, 24, 27, 0.08), rgba(24, 24, 27, 0.12));\n border: 1px solid var(--border);\n border-radius: var(--radius-full);\n font-size: 0.7rem;\n font-weight: 500;\n color: var(--primary);\n text-transform: capitalize;\n}\n\n/* Typing Indicator */\n.typing-indicator {\n display: flex;\n gap: 4px;\n padding: 4px 0;\n}\n\n.typing-indicator span {\n width: 8px;\n height: 8px;\n background: var(--text-light);\n border-radius: 50%;\n animation: bounce 1.4s infinite ease-in-out;\n}\n\n.typing-indicator span:nth-child(1) { animation-delay: 0s; }\n.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }\n.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }\n\n@keyframes bounce {\n 0%, 80%, 100% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 40% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n/* Error Toast */\n.error-toast {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--error);\n color: white;\n padding: 12px 16px;\n border-radius: var(--radius-sm);\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 0.875rem;\n box-shadow: var(--shadow-md);\n animation: slideUp 0.3s ease;\n}\n\n@keyframes slideUp {\n from {\n opacity: 0;\n transform: translate(-50%, 10px);\n }\n to {\n opacity: 1;\n transform: translate(-50%, 0);\n }\n}\n\n.error-toast button {\n background: none;\n border: none;\n color: white;\n font-size: 1.25rem;\n cursor: pointer;\n opacity: 0.8;\n transition: opacity 0.2s;\n}\n\n.error-toast button:hover {\n opacity: 1;\n}\n\n/* Input Container */\n.input-container {\n padding: 16px 20px;\n background: var(--bg-chat);\n border-top: 1px solid var(--border);\n}\n\n.input-form {\n display: flex;\n gap: 12px;\n align-items: center;\n}\n\n.message-input {\n flex: 1;\n padding: 14px 18px;\n border: 1px solid var(--border);\n border-radius: var(--radius-full);\n font-size: 0.925rem;\n outline: none;\n transition: all 0.2s;\n background: var(--bg-main);\n}\n\n.message-input:focus {\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1);\n background: var(--bg-chat);\n}\n\n.message-input:disabled {\n background: var(--bg-assistant);\n cursor: not-allowed;\n}\n\n.message-input::placeholder {\n color: var(--text-light);\n}\n\n.send-btn {\n width: 48px;\n height: 48px;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n flex-shrink: 0;\n}\n\n.send-btn:hover:not(:disabled) {\n background: var(--primary-dark);\n transform: scale(1.05);\n}\n\n.send-btn:disabled {\n background: var(--text-light);\n cursor: not-allowed;\n}\n\n.send-btn svg {\n width: 20px;\n height: 20px;\n}\n\n/* Scrollbar */\n.messages-container::-webkit-scrollbar,\n.context-container::-webkit-scrollbar,\n.tools-container::-webkit-scrollbar {\n width: 6px;\n}\n\n.messages-container::-webkit-scrollbar-track,\n.context-container::-webkit-scrollbar-track,\n.tools-container::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.messages-container::-webkit-scrollbar-thumb,\n.context-container::-webkit-scrollbar-thumb,\n.tools-container::-webkit-scrollbar-thumb {\n background: var(--border);\n border-radius: 3px;\n}\n\n.messages-container::-webkit-scrollbar-thumb:hover,\n.context-container::-webkit-scrollbar-thumb:hover,\n.tools-container::-webkit-scrollbar-thumb:hover {\n background: var(--text-light);\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .message-wrapper {\n max-width: 90%;\n }\n\n .tab {\n padding: 12px 14px;\n font-size: 0.8rem;\n }\n\n .tab svg {\n width: 16px;\n height: 16px;\n }\n}\n","/index.tsx":"import React from 'react'\n\nimport { createRoot } from 'react-dom/client'\nimport App from './App'\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n","/package.json":"{\n \"dependencies\": {\n \"react\": \"19.0.0\",\n \"react-dom\": \"19.0.0\",\n \"windmill-client\": \"^1\"\n },\n \"devDependencies\": {\n \"@types/react-dom\": \"^19.0.0\",\n \"@types/react\": \"^19.0.0\"\n }\n}\n"},"data":{"tables":[]}},"description":"AI agent that answers questions about your company, using its knowledge base and real time data Windmill scripts used as tools. To make it work in your own workspace, you will also need to import the following flow: https://hub.windmill.dev/flows/76/send-message-to-company-ai-assistant","vcreated_at":"2026-04-14T14:55:05.310Z","vcreated_by":"hugo989","comments":[]}}