https://showcase-claude-sdk-python-production.up.railway.app/_next…/tool-rendering/page-bb783729ebaf5179.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4313],{36629:(e,t,s)=>{Promise.resolve().then(s.bind(s,77316))},77316:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>g});var r=s(95155);s(12115);var n=s(52302),i=s(98734);function a(e){let{loading:t,location:s,temperature:n,humidity:i,windSpeed:a,conditions:l}=e;return(0,r.jsx)("div",{"data-testid":"weather-card",className:"rounded-2xl mt-4 mb-4 max-w-md w-full bg-[#EDEDF5] border border-[#DBDBE5] text-[#010507] shadow-sm",children:(0,r.jsxs)("div",{className:"p-5",children:[(0,r.jsxs)("div",{className:"flex items-start justify-between gap-4",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B] mb-1",children:"Current weather"}),(0,r.jsx)("h3",{"data-testid":"weather-city",className:"text-xl font-semibold capitalize text-[#010507]",children:s||"Weather"}),(0,r.jsx)("p",{className:"text-[#57575B] text-sm mt-0.5",children:t?"Fetching weather...":l||"—"})]}),(0,r.jsx)("div",{className:"text-4xl leading-none","aria-hidden":!0,children:t?"...":function(e){if(!e)return"";let t=e.toLowerCase();return t.includes("sun")||t.includes("clear")?"sun":t.includes("rain")||t.includes("storm")?"rain":t.includes("cloud")?"cloud":t.includes("snow")?"snow":""}(l)})]}),!t&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"mt-5 text-4xl font-semibold text-[#010507] tracking-tight",children:[null!=n?n:"--","\xb0",(0,r.jsx)("span",{className:"ml-1 text-lg font-normal text-[#57575B]",children:"F"})]}),(0,r.jsxs)("div",{className:"mt-5 pt-4 border-t border-[#DBDBE5] grid grid-cols-2 gap-3 text-sm",children:[(0,r.jsxs)("div",{"data-testid":"weather-humidity",children:[(0,r.jsx)("p",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B]",children:"Humidity"}),(0,r.jsxs)("p",{className:"mt-1 font-medium text-[#010507]",children:[null!=i?i:"--","%"]})]}),(0,r.jsxs)("div",{"data-testid":"weather-wind",children:[(0,r.jsx)("p",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B]",children:"Wind"}),(0,r.jsxs)("p",{className:"mt-1 font-medium text-[#010507]",children:[null!=a?a:"--"," mph"]})]})]})]})]})})}function l(e){let{loading:t,origin:s,destination:n,flights:i}=e;return(0,r.jsxs)("div",{"data-testid":"flights-card",className:"my-3 rounded-2xl border border-[#DBDBE5] bg-white p-5 shadow-sm",children:[(0,r.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("span",{className:"flex h-8 w-8 items-center justify-center rounded-full bg-[#BEC2FF1A] text-[#010507]","aria-hidden":!0,children:"✈"}),(0,r.jsxs)("div",{className:"font-semibold text-[#010507]",children:[(0,r.jsx)("span",{"data-testid":"flight-origin",children:s||"?"}),(0,r.jsx)("span",{className:"mx-1.5 text-[#838389]",children:"→"}),(0,r.jsx)("span",{"data-testid":"flight-destination",children:n||"?"})]})]}),t?(0,r.jsx)("span",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B]",children:"searching…"}):(0,r.jsxs)("span",{className:"rounded-full border border-[#DBDBE5] bg-[#F7F7F9] px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-[#57575B]",children:[i.length," result",1===i.length?"":"s"]})]}),t?(0,r.jsxs)("div",{className:"space-y-2",children:[(0,r.jsx)(d,{}),(0,r.jsx)(d,{}),(0,r.jsx)(d,{})]}):(0,r.jsx)("ul",{className:"space-y-2",children:0===i.length?(0,r.jsx)("li",{className:"text-sm italic text-[#57575B]",children:"No flights returned."}):i.map((e,t)=>{var s,n,i,a,l;return(0,r.jsxs)("li",{"data-testid":"flight-row",className:"flex items-center justify-between rounded-xl border border-[#E9E9EF] bg-[#FAFAFC] px-3 py-2.5 text-sm",children:[(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{className:"font-medium text-[#010507]",children:[null!=(s=e.airline)?s:"—"," ",(0,r.jsx)("span",{className:"font-mono text-xs text-[#838389]",children:null!=(n=e.flight)?n:""})]}),(0,r.jsxs)("div",{className:"text-xs text-[#57575B] mt-0.5",children:[null!=(i=e.depart)?i:"?"," → ",null!=(a=e.arrive)?a:"?"]})]}),(0,r.jsx)("div",{className:"font-mono text-sm font-medium text-[#189370]",children:void 0!==e.price_usd?"$".concat(e.price_usd):"—"})]},"".concat(null!=(l=e.flight)?l:"flight","-").concat(t))})})]})}function d(){return(0,r.jsx)("div",{className:"h-10 animate-pulse rounded-xl bg-[#F0F0F4]","aria-hidden":!0})}function c(e){let{loading:t,ticker:s,priceUsd:n,changePct:i}=e,a=(s||"").toUpperCase(),l=(null!=i?i:0)>=0,d=void 0===i?"--":"".concat(l?"+":"").concat(i.toFixed(2),"%");return(0,r.jsxs)("div",{"data-testid":"stock-card",className:"my-3 rounded-2xl border border-[#DBDBE5] bg-white p-5 shadow-sm",children:[(0,r.jsxs)("div",{className:"flex items-center justify-between",children:[(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("span",{className:"flex h-8 w-8 items-center justify-center rounded-full bg-[#BEC2FF1A] font-semibold text-[#010507]","aria-hidden":!0,

1children:"$"}),(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B]",children:"Stock"}),(0,r.jsx)("div",{"data-testid":"stock-ticker",className:"font-mono text-base font-semibold text-[#010507]",children:a||"—"})]})]}),t?(0,r.jsx)("span",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B]",children:"fetching…"}):null]}),t?null:(0,r.jsxs)("div",{className:"mt-4 flex items-end justify-between border-t border-[#DBDBE5] pt-4",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B]",children:"Price"}),(0,r.jsx)("div",{"data-testid":"stock-price",className:"mt-1 text-2xl font-semibold text-[#010507] tracking-tight",children:void 0!==n?"$".concat(n.toFixed(2)):"—"})]}),(0,r.jsxs)("div",{className:"text-right",children:[(0,r.jsx)("div",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B]",children:"Change"}),(0,r.jsx)("div",{"data-testid":"stock-change",className:"mt-1 font-mono text-sm font-medium ".concat(l?"text-[#189370]":"text-[#D14343]"),children:d})]})]})]})}function o(e){let{loading:t,value:s}=e,n="number"==typeof s?s:void 0,i=20===n;return(0,r.jsxs)("div",{"data-testid":"d20-card","data-d20-result":void 0===n?"":String(n),className:"my-3 inline-flex items-center gap-3 rounded-2xl border border-[#DBDBE5] bg-white p-4 shadow-sm ".concat(i?"ring-2 ring-[#85ECCE]":""),children:[(0,r.jsx)("span",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-[#BEC2FF1A] text-lg","aria-hidden":!0,children:"d20"}),(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"text-[10px] uppercase tracking-[0.14em] text-[#57575B]",children:"Roll"}),(0,r.jsx)("div",{"data-testid":"d20-value",className:"font-mono text-2xl font-semibold text-[#010507]",children:t?"…":null!=n?n:"—"})]}),i?(0,r.jsx)("span",{className:"rounded-full border border-[#85ECCE4D] bg-[#85ECCE]/20 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-[#189370]",children:"critical!"}):null]})}function x(e){let{name:t,status:s,parameters:n,result:i}=e,a=function(e){if(null!=e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){return e}}}(i),l="complete"===s;return(0,r.jsxs)("div",{"data-testid":"custom-catchall-card","data-tool-name":t,"data-status":s,className:"my-3 overflow-hidden rounded-2xl border border-[#DBDBE5] bg-white shadow-sm",children:[(0,r.jsxs)("div",{className:"flex items-center justify-between border-b border-[#E9E9EF] bg-[#FAFAFC] px-4 py-2.5",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)("span",{className:"text-[10px] uppercase tracking-[0.14em] text-[#838389]",children:"Tool"}),(0,r.jsx)("span",{"data-testid":"custom-catchall-tool-name",className:"font-mono text-sm text-[#010507]",children:t})]}),(0,r.jsx)(u,{status:s})]}),(0,r.jsxs)("div",{className:"grid gap-3 p-4 text-sm",children:[(0,r.jsx)(m,{label:"Arguments",children:(0,r.jsx)("pre",{"data-testid":"custom-catchall-args",className:"overflow-x-auto rounded-lg border border-[#E9E9EF] bg-[#FAFAFC] p-2.5 font-mono text-xs text-[#010507]",children:h(n)})}),(0,r.jsx)(m,{label:"Result",children:l?(0,r.jsx)("pre",{"data-testid":"custom-catchall-result",className:"overflow-x-auto rounded-lg border border-[#85ECCE4D] bg-[#85ECCE]/10 p-2.5 font-mono text-xs text-[#010507]",children:void 0!==a?h(a):"(empty)"}):(0,r.jsx)("p",{className:"text-xs italic text-[#838389]",children:"waiting for tool to finish…"})})]})]})}function m(e){let{label:t,children:s}=e;return(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"mb-1.5 text-[10px] font-medium uppercase tracking-[0.14em] text-[#838389]",children:t}),s]})}function u(e){let{status:t}=e,{label:s,tone:n}=function(e){switch(e){case"inProgress":return{label:"streaming",tone:"border border-[#FFAC4D33] bg-[#FFAC4D]/15 text-[#57575B]"};case"executing":return{label:"running",tone:"border border-[#BEC2FF] bg-[#BEC2FF1A] text-[#010507]"};case"complete":return{label:"done",tone:"border border-[#85ECCE4D] bg-[#85ECCE]/20 text-[#189370]"}}}(t);return(0,r.jsx)("span",{"data-testid":"custom-catchall-status",className:"rounded-full px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] ".concat(n),children:s})}function h(e){try{return JSON.stringify(e,null,2)}catch(t){return String(e)}}var p=s(89690);function g(){return(0,r.jsx)(n.t,{runtimeUrl:"/api/copilotkit",agent:"tool-rendering",children:(0,r.jsx)("div",{className:"flex justify-center items-center h-screen w-full",children:(0,r.jsx)("div",{className:"h-full w-full max-w-4xl",children:(0,r.jsx)(f,{})})})})}function f(){return(0,n.it)({name:"get_weather",parameters:i.Ik({location:i.Yj()}),render:e=>{var t,s;let{parameters:n,result:i,status:l}=e,d=(0,p.X)(i);return(0,r.jsx)(a,{loading:"complete"!==l,location:null!=(s=null!=(t=null==n?void 0:n.location)?t:d.city)?s:"",temperature:d.temperature,humidity:d.humidity,windSpeed:d.wind_speed,conditions:d.conditions})}},[]),(0,n.it)({name:"search_flights",parameters:i.Ik({origin:i.Yj(),destination:i.Yj()}),render:e=>{var t,s,n,i,a;let{parameters:d,result:c,status:o}=e,x=(0,p.X)(c);return(0,r.jsx)(l,{loading:"complete"!==o,origin:null!=(s=null!=(t=null==d?void 0:d.origin)?t:x.origin)?s:"",destination:null!=(i=null!=(n=null==d?void 0:d.destination)?n:x.destination)?i:"",flights:null!=(a=x.flights)?a:[]})}},[]),(0,n.it)({name:"get_stock_price",parameters:i.Ik({ticker:i.Yj()}),render:e=>{var t,s;let{parameters:n,result:i,status:a}=e,l=(0,p.X)(i);return(0,r.jsx)(c,{loading:"complete"!==a,ticker:null!=(s=null!=(t=null==n?void 0:n.ticker)?t:l.ticker)?s:"",priceUsd:l.price_usd,changePct:l.change_pct})}},[]),(0,n.it)({name:"roll_d20",parameters:i.Ik({value:i.ai().optional()}),render:e=>{let{result:t,status:s}=e,n=(0,p.X)(t),i="number"==typeof n.value?n.value:"number"==typeof n.result?n.result:void 0;return(0,r.jsx)(o,{loading:"complete"!==s,value:i})}},[]),(0,n.rt)({render:e=>{let{name:t,parameters:s,status:n,result:i}=e;return(0,r.jsx)(x,{name:t,parameters:s,status:n,result:i})}},[]),(0,n.X)({suggestions:[{title:"Weather in SF",message:"What's the weather in San Francisco?"},{title:"Find flights",message:"Find flights from SFO to JFK."},{title:"Stock price",message:"What's the current price of AAPL?"},{title:"Roll a d20",message:"Roll a 20-sided die."},{title:"Chain tools",message:"Chain a few tools in this single turn: get the weather in Tokyo, search flights from SFO to Tokyo, and roll a d20."}],available:"always"}),(0,r.jsx)(n.D,{agentId:"tool-rendering",className:"h-full rounded-2xl"})}},89690:(e,t,s)=>{"use strict";function r(e){if(!e)return{};try{return"string"==typeof e?JSON.parse(e):e}catch(e){return{}}}s.d(t,{X:()=>r})}},e=>{e.O(0,[7330,1398,5001,6422,8441,1255,7358],()=>e(e.s=36629)),_N_E=e.O()}]);