https://dashboard.paioclaw.ai/assets/UseCaseChatShowcase-wCBLnH9e.js

1import{r as o,a as F,j as e}from"./index-B-QWxz5C.js";import{m as A}from"./proxy-C6p3vzAI.js";import{S as k}from"./send-CldEcjIN.js";import{R as B}from"./rocket-DhyfQu5B.js";import{P as T}from"./palette-B02jxJeo.js";import{C as E}from"./code-C0mmLZE0.js";import{U as P}from"./users-Bbm4TEfV.js";import{T as M}from"./trending-up-DDL_YLyI.js";const f=[{id:"founders",label:"Solo Founders",icon:B,headline:"Your AI team, on Telegram",channel:"Telegram",channelIcon:"✈️",botName:"Project manager",botModel:"claude-sonnet-4",messages:[{from:"claw",text:"Morning! Quick rundown — 5 new leads came in overnight, Angela scheduled your LinkedIn posts, and Bob's auth fix just passed CI."},{from:"user",text:"Give me a full team status update"},{from:"claw",text:"Here's your team update:",card:{type:"status",title:"🧠 Team Status — Live",items:["🎯 **Milo** (Strategy): Finished competitor analysis, 3 new positioning angles ready","💼 **Josh** (Business): Sent 12 outreach emails, 4 replies — 2 warm leads","📣 **Angela** (Marketing): Scheduled 8 posts across LinkedIn & X","💻 **Bob** (Code): Deployed auth fix to staging, PR ready for review"]}},{from:"user",text:"Tell Angela to push the launch post to tomorrow"},{from:"claw",text:"Bob's PR is live:",card:{type:"progress",label:"PR #148 merged — auth fix deployed to production.",percent:100,statusText:"✅ All checks passed",statusColor:"#22C55E"}},{from:"user",text:"Have Milo draft a pitch deck outline"},{from:"claw",text:"Milo's on it — Draft outline with 12 slides ready in your Google Drive. Covers market gap, traction, and the 3 new angles."}]},{id:"creators",label:"Content Creators",icon:T,headline:"24/7 content machine",channel:"WhatsApp",channelIcon:"💬",botName:"Marketing expert",botModel:"gpt-4o",messages:[{from:"claw",text:"Your Mac Mini agent posted 6 times today — 3 on X, 2 on LinkedIn, 1 YouTube Short. Engagement trending up."},{from:"user",text:"Show me the weekly numbers"},{from:"claw",text:"Last week's summary:",card:{type:"barchart",title:"

1📱 Weekly Engagement",bars:[{label:"Mon",value:45},{label:"Tue",value:52},{label:"Wed",value:48},{label:"Thu",value:61},{label:"Fri",value:78},{label:"Sat",value:85},{label:"Sun",value:92}],summary:"Engagement up **+23%**. Top platform: X (42% of impressions)."}},{from:"user",text:"Draft 3 tweet ideas for tomorrow"},{from:"claw",text:"Here's a 3-tweet thread:",card:{type:"thread",title:"Draft Thread",items:[{emoji:"🚀",text:"Big week! Engagement up +23%, retention at 68%."},{emoji:"💬",text:"Chat is #1 — 42% of all sessions."},{emoji:"📈",text:"We're just getting started. More updates soon 👀"}]}},{from:"user",text:"Send it and prep a launch thread"},{from:"claw",text:"Done — LinkedIn reply posted. Launch thread draft will be ready by tonight. ✅"}]},{id:"developers",label:"Developers",icon:E,headline:"Ship from your couch",channel:"Telegram",channelIcon:"✈️",botName:"Code assistant",botModel:"gemini-2.5-pro",messages:[{from:"claw",text:"Your site migration just finished. All 18 blog posts moved from Notion to Astro, DNS is live on Cloudflare."},{from:"user",text:"Show me the Lighthouse scores"},{from:"claw",text:"Performance report:",card:{type:"metrics",title:"⚡ Lighthouse Scores",metrics:[{label:"Performance",value:"98",change:"+36",up:!0},{label:"Accessibility",value:"100"},{label:"Best Practices",value:"95",change:"+12",up:!0},{label:"SEO",value:"100"}]}},{from:"user",text:"Add an RSS feed and deploy to production"},{from:"claw",text:"Done — RSS feed generated at /rss.xml with all 18 posts. Deployed to Cloudflare Pages — live at your domain. ✅"}]},{id:"parents",label:"Tech-Aware Parents",icon:P,headline:"Peak parenting, automated",channel:"WhatsApp",channelIcon:"💬",botName:"Sales expert",botModel:"gpt-4o",messages:[{from:"claw",text:"Heads up — Noah's been in the Nether for 20 minutes. Emma's building a castle."},{from:"user",text:"Teleport Noah to Emma and clear the weather"},{from:"claw",text:"Done — Noah teleported to Emma's location. Weather set to clear. ☀️"},{from:"user",text:"Show me the server status"},{from:"claw",text:"Server report:",card:{type:"status",title:"⛏️ Minecraft Server — Live",items:["👧 **Emma**: Building a castle in the Overworld","👦 **Noah**: Just arrived at Emma's castle","☀️ **Weather**: Clear skies","👥 **Players online**: 2/10"]}},{from:"user",text:"Give them both diamond swords"},{from:"claw",text:'Gifted ⚔️ Both kids got diamond swords with Sharpness III. Noah said "BEST DAD EVER" in chat.'}]},{id:"traders",label:"Active Traders",icon:M,headline:"Liquidity claw on autopilot",channel:"Telegram",channelIcon:"✈️",botName:"Project manager",botModel:"claude-sonnet-4",messages:[{from:"claw",text:"Your Polymarket claw closed a big week — $115K P&L across 13,000+ trades. Win rate at 94%."},{from:"user",text:"Show me the weekly performance"},{from:"claw",text:"Weekly performance:",card:{type:"metrics",title:"💹 Polymarket Claw — Week Summary",metrics:[{label:"P&L",value:"$115K",change:"+18%",up:!0},{label:"Trades",value:"13,247"},{label:"Markets",value:"42"},{label:"Win Rate",value:"94.2%"}]}},{from:"user",text:"Show me the daily P&L breakdown"},{from:"claw",text:"Daily breakdown:",card:{type:"barchart",title:"

1💰 Daily P&L ($K)",bars:[{label:"Mon",value:12},{label:"Tue",value:18},{label:"Wed",value:15},{label:"Thu",value:22},{label:"Fri",value:19},{label:"Sat",value:14},{label:"Sun",value:15}],summary:"Monthly total: **$583K** revenue."}},{from:"user",text:"Set stop-loss at 5% drawdown"},{from:"claw",text:"Configured — Stop-loss at 5% drawdown across all positions. Instant alert enabled. Claw running 24/7. ✅"}]}];function g({text:t}){const a=t.split(`
2`);return e.jsx(e.Fragment,{children:a.map((s,l)=>e.jsxs("span",{children:[l>0&&e.jsx("br",{}),s.split(/(\*\*[^*]+\*\*)/).map((i,n)=>i.startsWith("**")&&i.endsWith("**")?e.jsx("strong",{className:"font-semibold text-[#FBF9EC]",children:i.slice(2,-2)},n):e.jsx("span",{children:i},n))]},l))})}function D({card:t}){return e.jsxs("div",{className:"mt-2.5 rounded-[10px] p-3.5 text-[12.5px] leading-relaxed bg-white/[0.04] border border-white/[0.08]",children:[e.jsx("div",{className:"font-bold text-[13px] mb-2.5 tracking-wide text-[#FBF9EC]/90",children:t.title}),t.items.map((a,s)=>e.jsx("div",{className:"text-[#CAC8BC]/70 py-0.5",children:e.jsx(g,{text:a})},s))]})}function I({card:t,visible:a}){const[s,l]=o.useState(0);return o.useEffect(()=>{if(!a){l(0);return}const i=setTimeout(()=>l(t.percent),200);return()=>clearTimeout(i)},[a,t.percent]),e.jsxs("div",{className:"mt-2.5 rounded-[10px] p-3.5 text-[12.5px] leading-relaxed bg-white/[0.04] border border-white/[0.08]",children:[e.jsx("div",{className:"text-[#CAC8BC]/80 font-medium mb-1.5",children:t.label}),t.sublabel&&e.jsx("div",{className:"text-[#CAC8BC]/50 text-[11.5px] mb-2",children:t.sublabel}),e.jsx("div",{className:"w-full h-2.5 rounded-full bg-white/[0.06] overflow-hidden mb-2",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${s}%`,background:`linear-gradient(90deg, ${t.statusColor}, ${t.statusColor}CC)`,transition:"width 1.2s cubic-bezier(0.4, 0, 0.2, 1)"}})}),e.jsx("div",{className:"text-[11.5px] font-medium",style:{color:t.statusColor},children:t.statusText})]})}function R({card:t,visible:a}){const s=Math.max(...t.bars.map(n=>n.value)),[l,i]=o.useState(!1);return o.useEffect(()=>{if(!a){i(!1);return}const n=setTimeout(()=>i(!0),200);return()=>clearTimeout(n)},[a]),e.jsxs("div",{className:"mt-2.5 rounded-[10px] p-3.5 text-[12.5px] leading-relaxed bg-white/[0.04] border border-white/[0.08]",children:[e.jsx("div",{className:"font-bold text-[13px] mb-3 tracking-wide text-[#FBF9EC]/90",children:t.title}),e.jsx("div",{className:"flex items-end gap-1.5 h-[70px] mb-1",children:t.bars.map((n,c)=>e.jsx("div",{className:"flex-1 flex flex-col items-center justify-end h-full",children:e.jsx("div",{className:"w-full rounded-t-[4px]",style:{height:l?`${n.value/s*100}%`:"0%",background:"linear-gradient(180deg, #FF8C2A, #FF6B00)",opacity:.6+n.value/s*.4,minHeight:l?"6px":"0px",transition:`height 0.8s cubic-bezier(0.4, 0, 0.2, 1) ${c*.08}s, min-height 0.3s ease ${c*.08}s`}})},c))}),e.jsx("div",{className:"flex justify-between text-[10px] text-[#CAC8BC]/40 mb-2.5",children:t.bars.map((n,c)=>e.jsx("span",{className:"flex-1 text-center",children:n.label},c))}),e.jsx("div",{className:"text-[#CAC8BC]/60 text-[12px]",children:e.jsx(g,{text:t.summary})})]})}function L({card:t}){return e.jsx("div",{className:"mt-2.5 rounded-[10px] p-3.5 text-[12.5px] leading-relaxed bg-white/[0.04] border border-white/[0.08]",children:e.jsx("div",{className:"flex flex-col gap-2",children:t.items.map((a,s)=>e.jsxs("div",{className:"flex items-start gap-2 px-3 py-2.5 rounded-lg bg-white/[0.03] border border-white/[0.06]",children:[e.jsx("span",{className:"text-sm shrink-0",children:a.emoji}),e.jsx("span",{className:"text-[#CAC8BC]/70 text-[12.5px] leading-relaxed",children:a.text})]},s))})})}function W({card:t}){return e.jsxs("div",{className:"mt-2.5 rounded-[10px] p-3.5 text-[12.5px] leading-relaxed bg-white/[0.04] border border-white/[0.08]",children:[e.jsx("div",{className:"font-bold text-[13px] mb-3 tracking-wide text-[#FBF9EC]/90",children:t.title}),e.jsx("div",{className:"grid grid-cols-2 gap-2.5",children:t.metrics.map((a,s)=>e.jsxs("div",{className:"px-3 py-2.5 rounded-lg bg-white/[0.03] border border-white/[0.06]",children:[e.jsx("div",{className:"text-[10.5px] text-[#CAC8BC]/40 uppercase tracking-wider mb-0.5",children:a.label}),e.jsxs("div",{className:"flex items-baseline gap-1.5",children:[e.jsx("span",{className:"text-[16px] font-bold text-[#FBF9EC]",children:a.value}),a.change&&e.jsxs("span",{className:"text-[11px] font-semibold",style:{color:a.up?"#22C55E":"#EF4444"},children:[a.up?"↑":"↓"," ",a.change]})]})]},s))})]})}function $({card:t,visible:a}){switch(t.type){case"status":return e.jsx(D,{card:t});case"progress":return e.jsx(I,{card:t,visible:a});case"barchart":return e.jsx(R,{card:t,visible:a});case"thread":return e.jsx(L,{card:t});case"metrics":return e.jsx(W,{card:t});default:return null}}function Y(){return e.jsxs("div",{className:"flex items-end gap-2 mb-1.5 justify-start",children:[e.jsx("div",{className:"w-7 h-7 rounded-full flex items-center justify-center text-sm shrink-0 bg-gradient-to-br from-[#FF8C2A] to-[#FF6B00]",style:{boxShadow:"0 2px 8px rgba(255,140,42,0.3)"},children:"🦞"}),e.jsx("div",{className:"flex items-center gap-1 px-4 py-3 rounded-[14px] rounded-bl-[4px] bg-white/[0.06] border border-white/[0.08]",children:[0,1,2].map(t=>e.jsx("div",{className:"w-2 h-2 rounded-full bg-[#CAC8BC]/40",style:{animation:"pulse 1.4s ease-in-out infinite",animationDelay:`${t*.2}s`}},t))})]})}function H({msg:t,visible:a}){const s=t.from==="claw";return e.jsxs("div",{className:`flex items-end gap-2 mb-6 ${s?"justify-start":"justify-end"}`,style:{opacity:a?1:0,transform:a?"translateY(0)":"translateY(12px)",transition:"opacity 0.4s ease-out, transform 0.4s ease-out",maxHeight:a?"600px":"0px",overflow:"hidden"},children:[s&&e.jsx("div",{className:"w-7 h-7 rounded-full flex items-center justify-center text-sm shrink-0 bg-gradient-to-br from-[#FF8C2A] to-[#FF6B00]",style:{boxShadow:"0 2px 8px rgba(255,140,42,0.3)"},children:"🦞"}),e.jsxs("div",{className:"text-[13.5px] leading-relaxed",style:{maxWidth:"78%",padding:"10px 14px",borderRadius:s?"14px 14px 14px 4px":"14px 14px 4px 14px",background:s?"rgba(255,255,255,0.06)":"linear-gradient(135deg, #FF8C2A, #FF6B00)",border:s?"1px solid rgba(255,255,255,0.08)":"none",color:s?"rgba(202,200,188,0.8)":"#1A0A00",boxShadow:s?"0 1px 3px rgba(0,0,0,0.2)":"0 2px 12px rgba(255,140,42,0.3)"},children:[e.jsx(g,{text:t.text}),t.card&&e.jsx($,{card:t.card,visible:a})]})]})}const C=1800,G=3e3;function Q({theme:t="dark"}){const[a,s]=o.useState(""),[l,i]=o.useState(0),[n,c]=o.useState(0),[w,h]=o.use

2State(!1),p=o.useRef(null),m=o.useRef(null),y=F(),x=f[l],v=x.messages.length,b=o.useCallback(()=>{m.current&&(clearTimeout(m.current),m.current=null)},[]);o.useEffect(()=>{p.current&&p.current.scrollTo({top:p.current.scrollHeight,behavior:"smooth"})},[n,w]),o.useEffect(()=>{c(0),h(!1),b();const r=d=>{if(d>=v){m.current=setTimeout(()=>{i(S=>(S+1)%f.length)},G);return}const u=x.messages[d];(u==null?void 0:u.from)==="claw"?(h(!0),m.current=setTimeout(()=>{h(!1),c(d+1),m.current=setTimeout(()=>r(d+1),C)},1e3)):(c(d+1),m.current=setTimeout(()=>r(d+1),C))};return m.current=setTimeout(()=>r(0),500),b},[l,v,b,x.messages]);const j=()=>{y("/account")},N=r=>{r!==l&&(i(r),s(""))};return e.jsx("section",{className:"relative z-10 px-4 sm:px-6 lg:px-12 pt-20 sm:pt-16 pb-0",children:e.jsxs("div",{className:"max-w-5xl mx-auto",children:[e.jsx("div",{className:"overflow-x-auto scrollbar-hide -mx-4 px-4 mb-6",children:e.jsx("div",{className:"flex gap-0 w-max mx-auto border-b border-white/[0.1]",children:f.map((r,d)=>{const u=d===l;return e.jsxs("button",{onClick:()=>N(d),className:`relative flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors duration-200 flex-shrink-0 ${u?"text-[#FBF9EC]":"text-[#ACA994] hover:text-[#CAC8BC]"}`,style:{background:"transparent",border:"none"},children:[e.jsx(r.icon,{className:"w-3.5 h-3.5"}),r.label,u&&e.jsx(A.div,{layoutId:"usecase-tab-underline",className:"absolute bottom-0 left-0 right-0 h-[2px] bg-[#FF8C2A]",style:{borderRadius:1},transition:{type:"spring",stiffness:400,damping:30}})]},r.id)})})}),e.jsxs("div",{className:"rounded-[20px] overflow-hidden",style:{background:"#111111",border:"1px solid rgba(255,255,255,0.06)",boxShadow:"0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03)"},children:[e.jsxs("div",{className:"flex items-center justify-between px-5 py-3",style:{borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex gap-1.5",children:[e.jsx("div",{className:"w-3 h-3 rounded-full bg-[#FF5F57]"}),e.jsx("div",{className:"w-3 h-3 rounded-full bg-[#FEBC2E]"}),e.jsx("div",{className:"w-3 h-3 rounded-full bg-[#28C840]"})]}),e.jsxs("div",{className:"flex items-center gap-2 ml-2",children:[e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"w-[28px] h-[28px] rounded-full flex items-center justify-center text-sm bg-gradient-to-br from-[#FF8C2A] to-[#FF6B00]",children:"🦞"}),e.jsx("div",{className:"absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-green-500 border-2 border-[#111111]"})]}),e.jsxs("div",{children:[e.jsx("div",{className:"text-[13px] font-semibold text-[#FBF9EC]",children:x.botName}),e.jsx("div",{className:"text-[10px] text-green-500 font-medium",children:"Online"})]})]})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"text-[11px] text-[#CAC8BC]/40 font-medium",children:x.botModel}),e.jsxs("div",{className:"flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] text-[#CAC8BC]/50 font-medium bg-white/[0.04] border border-white/[0.06]",children:[e.jsx("span",{children:x.channelIcon}),x.channel]})]})]}),e.jsxs("div",{ref:p,className:"overflow-hidden p-5 pb-6",style:{height:"420px",background:"#0D0D0D"},children:[e.jsx("div",{className:"text-center mb-5",children:e.jsx("span",{className:"text-[11px] font-medium tracking-wide px-3.5 py-1 rounded-xl text-[#CAC8BC]/30 bg-white/[0.04]",children:"Today"})}),x.messages.map((r,d)=>e.jsx(H,{msg:r,visible:d<n},`${l}-${d}`)),w&&e.jsx(Y,{})]}),e.jsxs("div",{className:"flex items-center gap-2.5 px-5 py-3.5",style:{borderTop:"1px solid rgba(255,255,255,0.06)"},children:[e.jsx("input",{value:a,onChange:r=>s(r.target.value),onKeyDown:r=>r.key==="Enter"&&j(),placeholder:"Type a message...",className:"flex-1 px-4 py-2.5 rounded-xl text-[13.5px] outline-none bg-white/[0.04] text-[#CAC8BC] placeholder:text-[#CAC8BC]/30 border border-white/[0.06]"}),e.jsx("button",{onClick:j,className:"w-[38px] h-[38px] rounded-full flex items-center justify-center cursor-pointer text-[#1A0A00]",style:{background:"linear-gradient(135deg, #FF8C2A, #FF6B00)",boxShadow:"0 2px 12px rgba(255,140,42,0.3)"},children:e.jsx(k,{className:"w-4 h-4"})})]})]})]})})}export{Q as default};