wizards 0.2.23 → 0.2.24

package/apps/web/dist/assets/RunDrawer-B50sCUSw.js

@@ -0,0 +1 @@
+import{a as e,n as t,t as n}from"./jsx-runtime-D3jfb0Ew.js";import{c as r,d as i,i as a,n as o,nt as s}from"./api-rJBQEu1G.js";import{t as c}from"./createLucideIcon-q3MZMmnf.js";import{_ as l,i as u,l as d,m as f,p,u as m}from"./RunnerView-CFCmOmJI.js";import{t as h}from"./chevron-down-DymW-2BP.js";import{t as g}from"./plus-Du-Jx8aI.js";import{n as _}from"./video-9fDPRPCv.js";import{f as v,g as y,o as b,x,y as S}from"./ui-DJOZSSKo.js";import{P as C,j as w}from"./index-CoTWrikR.js";var T={name:`chevron-up`,size:24,node:[[`path`,{d:`m18 15-6-6-6 6`,key:`153udz`}]]};T.node;var E=c(T),D={name:`minimize-2`,size:24,node:[[`path`,{d:`m14 10 7-7`,key:`oa77jy`}],[`path`,{d:`M20 10h-6V4`,key:`mjg0md`}],[`path`,{d:`m3 21 7-7`,key:`tjx5ai`}],[`path`,{d:`M4 14h6v6`,key:`rmj7iw`}]]};D.node;var O=c(D),k=e(t(),1),A=!1;function j(){if(!(typeof window>`u`||A))return window.SpeechRecognition??window.webkitSpeechRecognition}var M=typeof navigator<`u`&&!!navigator.mediaDevices?.getUserMedia&&typeof MediaRecorder<`u`;function N(e,t){let n=e.trimEnd(),r=t.trim();return n&&r?`${n} ${r}`:n||r}function P(e,t){let[n,r]=(0,k.useState)(!1),[i,a]=(0,k.useState)(!1),[s,c]=(0,k.useState)(null),l=(0,k.useRef)(e);l.current=e;let u=(0,k.useRef)(t);u.current=t;let d=(0,k.useRef)(null);(0,k.useEffect)(()=>()=>d.current?.stop(),[]);let f=async()=>{let e=l.current,t;try{t=await navigator.mediaDevices.getUserMedia({audio:!0})}catch{c(`denied`);return}let n=[],i=new MediaRecorder(t);i.ondataavailable=e=>e.data.size&&n.push(e.data),i.onstop=async()=>{for(let e of t.getTracks())e.stop();d.current=null,r(!1);let s=(i.mimeType||`audio/webm`).split(`;`)[0],l=new File(n,`dictation`,{type:s});if(l.size){a(!0);try{let{text:t}=await o.upload(`/api/studio/transcribe`,l);t.trim()&&u.current(N(e,t))}catch(e){c(e.message)}finally{a(!1)}}},d.current={stop:()=>i.state!==`inactive`&&i.stop()},i.start(),r(!0)},p=e=>{let t=l.current,n=``,i=new e;i.continuous=!0,i.interimResults=!0,i.lang=S===`de`?`de-DE`:`en-US`,i.onresult=e=>{let r=``;for(let t=Math.max(0,e.resultIndex);t<e.results.length;t++){let i=e.results[t],a=i[0]?.transcript??``;i.isFinal?n=N(n,a):r+=a}u.current(N(t,N(n,r)))},i.onerror=e=>{if(e.error!==`aborted`&&e.error!==`no-speech`){if(e.error===`not-allowed`){c(`denied`);return}A=!0,M&&!n?(i.onend=null,d.current=null,f()):c(e.error)}},i.onend=()=>{d.current=null,r(!1)},d.current={stop:()=>i.stop()},i.start(),r(!0)};return{supported:!!j()||M,listening:n,processing:i,error:s,toggle:()=>{if(i)return;if(d.current){d.current.stop();return}c(null);let e=j();e?p(e):f()}}}var F=e(n(),1),I=/\.(png|jpe?g|gif|webp|avif|svg)$/i;function L(e){let t=e.filter(e=>e.type.startsWith(`image/`));return t.length?Object.fromEntries(t.map(e=>[e.name,URL.createObjectURL(e)])):void 0}function R(e){let t=e.match(/(?:^|\n\n)(?:Angehängt|Attached): ([^\n]+)$/);return t?{text:e.slice(0,t.index).trim(),names:t[1].split(`, `).filter(Boolean)}:{text:e,names:[]}}function z(e,t){if(e.name&&e.name!==`image.png`)return e;let n=e.type.split(`/`)[1]?.replace(`jpeg`,`jpg`)||`png`,r=new Date().toISOString().slice(0,19).replace(/[-:]/g,``).replace(`T`,`-`);return new File([e],`paste-${r}${t?`-${t+1}`:``}.${n}`,{type:e.type})}function B({url:e,label:t,children:n}){return(0,F.jsxs)(`div`,{className:`group relative`,title:t,children:[(0,F.jsx)(`img`,{src:e,alt:t,width:64,height:64,className:`size-16 rounded-lg bg-paper-2 object-cover ring-1 ring-border`}),n]})}function V({names:e,previews:t,fileUrl:n}){let r=e.filter(e=>t?.[e]||n&&I.test(e)),i=e.filter(e=>!r.includes(e));return(0,F.jsxs)(`div`,{className:`flex flex-col items-end gap-1.5`,children:[r.map(e=>{let r=t?.[e]??n?.(e)??``;return(0,F.jsx)(`a`,{href:r,target:`_blank`,rel:`noreferrer`,title:e,children:(0,F.jsx)(`img`,{src:r,alt:e,className:`max-h-60 w-auto max-w-full rounded-xl bg-paper-2 object-contain ring-1 ring-border`})},e)}),i.length?(0,F.jsx)(`div`,{className:`flex flex-wrap justify-end gap-1.5`,children:i.map(e=>(0,F.jsxs)(`span`,{className:`inline-flex max-w-full items-center gap-1.5 rounded-full bg-paper-2 px-2.5 py-1 text-[0.75rem] text-ink-2`,children:[(0,F.jsx)(p,{className:`size-3 shrink-0 text-ink-4`}),(0,F.jsx)(`span`,{className:`truncate`,children:e})]},e))}):null]})}function H(e,t){let n=s(),[i,o]=(0,k.useState)([]),[c,l]=(0,k.useState)(`idle`),[u,d]=(0,k.useState)(null),[f,p]=(0,k.useState)(null),[m,h]=(0,k.useState)(null),[g,_]=(0,k.useState)(null),v=(0,k.useRef)(null);return(0,k.useEffect)(()=>{if(e){if(v.current!==e.id){v.current=e.id,o(e.messages);return}c===`idle`&&o(t=>e.messages.length>=t.length?e.messages:t)}},[e,c]),{messages:i,phase:c,activity:f,thought:m,startedAt:g,error:u,send:async(i,s=[])=>{if(!e||!(i.trim()||s.length)||c!==`idle`)return!1;if(d(null),_(Date.now()),h(null),s.length){l(`thinking`);try{for(let t of s){let n=await fetch(r(`/api/studio/wizards/${e.id}/files/${encodeURIComponent(t.name)}`),{method:`PUT`,credentials:`include`,headers:{"content-type":t.type||`application/octet-stream`},body:t});if(!n.ok){let e=await n.json().catch(()=>({}));throw Error(e.error??n.statusText)}}}catch(t){return d(t.message),l(`idle`),_(null),await n.invalidateQueries({queryKey:[`wizard`,e.id]}),!1}let t=`${x(`editor.attached`)}: ${s.map(e=>e.name).join(`, `)}`;i=i.trim()?`${i}\n\n${t}`:t}let u=`p-${Date.now()}`;o(e=>[...e,{id:`u-${Date.now()}`,role:`user`,content:i,previews:L(s)},{id:u,role:`assistant`,content:``,pending:!0}]),l(`thinking`),p(null);let f=!1;try{await a(`/api/studio/wizards/${e.id}/chat`,{message:i},(e,n)=>{if(e===`text`){let e=JSON.parse(n);o(t=>t.map(t=>t.id===u?{...t,content:t.content+e}:t))}else if(e===`activity`)p(JSON.parse(n));else if(e===`thought`)h(JSON.parse(n));else if(e===`building`)l(`building`);else if(e===`done`){f=!0;let e=JSON.parse(n);o(t=>t.map(t=>t.id===u?{...t,content:e.reply,changed:e.changed,pending:!1}:t)),e.changed&&t(e.draft,e.revision)}else e===`error`&&(f=!0,d(JSON.parse(n).message))}),f||d(x(`editor.chatBroken`))}catch(e){d(e.message)}finally{p(null),h(null),_(null),o(e=>e.filter(e=>!(e.id===u&&!e.content)).map(e=>({...e,pending:!1}))),l(`idle`),await n.invalidateQueries({queryKey:[`wizard`,e.id]}),await n.invalidateQueries({queryKey:[`me`]})}return!0},fileUrl:t=>r(`/api/studio/wizards/${e?.id}/files/${encodeURIComponent(t)}`)}}function U(e){let[t,n]=(0,k.useState)(()=>Date.now());return(0,k.useEffect)(()=>{if(e===null)return;n(Date.now());let t=setInterval(()=>n(Date.now()),1e3);return()=>clearInterval(t)},[e]),e===null?null:Math.max(0,Math.floor((t-e)/1e3))}function W(e){return e<60?`${e} s`:`${Math.floor(e/60)}:${String(e%60).padStart(2,`0`)} min`}function G({chat:e,thought:t,className:n,spinner:r=`size-3.5`}){let i=U(e.startedAt);return(0,F.jsxs)(`div`,{className:y(`min-w-0`,n),children:[(0,F.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,F.jsx)(v,{className:y(`shrink-0`,r)}),(0,F.jsx)(`span`,{className:`min-w-0 truncate`,children:e.activity??(e.phase===`building`?x(`editor.building`):x(`editor.thinking`))}),i===null?null:(0,F.jsx)(`span`,{className:`shrink-0 text-ink-4 tabular-nums`,children:W(i)})]}),t&&e.thought?(0,F.jsx)(`p`,{className:`mt-0.5 truncate pl-5.5 text-[0.75rem] text-ink-4`,children:e.thought}):null]})}function ee({message:e,fileUrl:t}){let{text:n,names:r}=R(e.content);return(0,F.jsxs)(`div`,{className:`ml-8 flex flex-col items-end gap-1.5 self-end`,children:[r.length?(0,F.jsx)(V,{names:r,previews:e.previews,fileUrl:t}):null,n?(0,F.jsx)(`div`,{className:`rounded-xl rounded-br-md bg-paper-2 px-4 py-2.5 text-[0.875rem] leading-relaxed`,children:(0,F.jsx)(`span`,{className:`whitespace-pre-wrap`,children:n})}):null]})}function K({chat:e,avatar:t,hello:n=x(`editor.chatHello`),placeholder:r=x(`editor.composer`),changedLabel:a=`Ablauf aktualisiert`,compact:o,intro:s,closed:c,card:f}){let[S,T]=(0,k.useState)(!1),[D,O]=(0,k.useState)(``),[A,j]=(0,k.useState)([]),M=(0,k.useRef)(null),N=(0,k.useRef)(null),I=(0,k.useRef)(null),L=P(D,O);(0,k.useEffect)(()=>{M.current?.scrollTo({top:M.current.scrollHeight,behavior:`smooth`})},[e.messages,e.phase]),(0,k.useEffect)(()=>{let e=N.current;if(!e)return;let t=()=>{e.style.height=`auto`,e.style.height=D?`${Math.min(e.scrollHeight,200)}px`:``};t();let n=e.clientWidth,r=new ResizeObserver(()=>{e.clientWidth!==n&&(n=e.clientWidth,t())});return r.observe(e),()=>r.disconnect()},[D]);let R=(D.trim()||A.length>0)&&e.phase===`idle`,V=e=>j(t=>[...t.filter(t=>!e.some(e=>e.name===t.name)),...e]),[H,U]=(0,k.useState)(new Map);(0,k.useEffect)(()=>{let e=new Map(A.filter(e=>e.type.startsWith(`image/`)).map(e=>[e,URL.createObjectURL(e)]));return U(e),()=>{for(let t of e.values())URL.revokeObjectURL(t)}},[A]);let W=async()=>{if(!R)return;L.listening&&L.toggle();let t={text:D,files:A};O(``),j([]),await e.send(t.text.trim(),t.files)||(O(t.text),j(t.files))},K=!o||S,q=e.messages.at(-1);return(0,F.jsxs)(`div`,{className:`flex h-full min-h-0 flex-col`,children:[o&&(q||e.error)?(0,F.jsxs)(`button`,{type:`button`,"aria-expanded":S,"aria-label":x(`editor.thread`),onClick:()=>T(e=>!e),className:`flex items-center gap-2 px-4 pt-2.5 pb-0.5 text-left text-[0.8125rem] text-ink-3 transition hover:text-ink`,children:[!(e.error||S)&&q?.pending?(0,F.jsx)(G,{chat:e,className:`flex-1`}):(0,F.jsx)(`span`,{className:y(`min-w-0 flex-1 truncate`,e.error&&`text-rose`),children:e.error??(S?x(`editor.thread`):q?.content)}),S?(0,F.jsx)(h,{className:`size-4 shrink-0`}):(0,F.jsx)(E,{className:`size-4 shrink-0`})]}):null,(0,F.jsxs)(`div`,{ref:M,className:y(`min-h-0 flex-1 overflow-y-auto px-5 py-5`,!K&&`hidden`),children:[e.messages.length===0&&!c?s??(0,F.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,F.jsx)(i,{kind:t,size:32,interactive:!1}),(0,F.jsx)(`p`,{className:`pt-1 text-[0.875rem] text-ink-2 leading-relaxed`,children:n})]}):null,(0,F.jsx)(`div`,{className:`flex flex-col gap-4`,children:e.messages.map(n=>n.role===`user`?(0,F.jsx)(ee,{message:n,fileUrl:e.fileUrl},n.id):(0,F.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,F.jsx)(`div`,{className:`shrink-0`,children:(0,F.jsx)(i,{kind:t,size:28,interactive:!1})}),(0,F.jsxs)(`div`,{className:`min-w-0 pt-0.5 text-[0.875rem]`,children:[n.source===`mcp`?(0,F.jsxs)(`div`,{className:`mb-1 inline-flex items-center gap-1.5 text-[0.75rem] text-ink-3`,children:[(0,F.jsx)(C,{className:`size-3`}),` `,x(`editor.viaClient`,{client:n.client??`MCP`})]}):null,n.content?(0,F.jsx)(u,{text:n.content,className:`text-[0.875rem]`}):null,f&&n.cards?.length?(0,F.jsx)(`div`,{className:`mt-2 flex flex-col gap-2`,children:n.cards.map(e=>(0,F.jsx)(k.Fragment,{children:f(e)},e.id))}):null,n.pending?(0,F.jsx)(G,{chat:e,thought:!0,className:`mt-1 text-[0.8125rem] text-ink-3`}):null,n.changed?(0,F.jsxs)(`div`,{className:`mt-2 inline-flex items-center gap-1.5 rounded-full bg-ember-tint px-2.5 py-0.5 text-[0.75rem] text-ember-strong`,children:[(0,F.jsx)(m,{className:`size-3`}),` `,a]}):null]})]},n.id))}),e.error?(0,F.jsx)(`div`,{className:`mt-4 rounded-lg bg-rose-tint px-3 py-2 text-[0.8125rem] text-rose`,children:e.error}):null]}),c?(0,F.jsx)(`p`,{className:`m-3 rounded-xl bg-paper-2 px-4 py-3 text-[0.8125rem] text-ink-2 leading-relaxed`,children:c}):(0,F.jsxs)(`div`,{className:o?`p-2`:`p-3`,children:[(0,F.jsxs)(`div`,{className:`rounded-xl bg-card p-1.5 shadow-soft ring-1 ring-border focus-within:ring-focus`,children:[H.size?(0,F.jsx)(`div`,{className:`flex flex-wrap gap-2 px-1 pt-1 pb-1.5`,children:A.map((e,t)=>{let n=H.get(e);return n?(0,F.jsx)(B,{url:n,label:e.name,children:(0,F.jsx)(`button`,{type:`button`,"aria-label":x(`editor.detach`),onClick:()=>j(e=>e.filter((e,n)=>n!==t)),className:`-top-1.5 -right-1.5 absolute flex size-5 items-center justify-center rounded-full bg-ink text-paper opacity-0 shadow-soft transition focus-visible:opacity-100 group-hover:opacity-100`,children:(0,F.jsx)(w,{className:`size-3`})})},`${e.name}-${t}`):null})}):null,A.some(e=>!H.has(e))?(0,F.jsx)(`ul`,{className:`flex flex-wrap gap-1.5 px-1 pt-1 pb-1.5`,children:A.map((e,t)=>H.has(e)?null:(0,F.jsxs)(`li`,{className:`inline-flex max-w-full items-center gap-1.5 rounded-full bg-paper-2 py-1 pr-1 pl-2.5 text-[0.75rem] text-ink-2`,children:[(0,F.jsx)(p,{className:`size-3 shrink-0 text-ink-4`}),(0,F.jsx)(`span`,{className:`truncate`,children:e.name}),(0,F.jsx)(`button`,{type:`button`,"aria-label":x(`editor.detach`),onClick:()=>j(e=>e.filter((e,n)=>n!==t)),className:`inline-flex size-5 shrink-0 items-center justify-center rounded-full text-ink-3 hover:bg-paper-3 hover:text-ink`,children:(0,F.jsx)(w,{className:`size-3`})})]},`${e.name}-${t}`))}):null,(0,F.jsxs)(`div`,{className:`flex items-end gap-1`,children:[(0,F.jsx)(b,{label:x(`editor.attach`),onClick:()=>I.current?.click(),children:(0,F.jsx)(g,{className:`size-4`})}),(0,F.jsx)(`input`,{ref:I,type:`file`,multiple:!0,hidden:!0,onChange:e=>{let t=Array.from(e.target.files??[]);e.target.value=``,V(t)}}),(0,F.jsx)(`textarea`,{ref:N,rows:1,value:D,onChange:e=>O(e.target.value),onPaste:e=>{let t=Array.from(e.clipboardData.files);t.length&&(e.preventDefault(),V(t.map(z)))},onKeyDown:e=>{e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),W())},placeholder:L.listening?x(`editor.listening`):r,className:`max-h-[200px] min-h-[40px] flex-1 resize-none bg-transparent px-1.5 py-2 text-[0.875rem] outline-none placeholder:truncate placeholder:text-ink-4`}),L.supported?(0,F.jsx)(b,{label:L.processing?x(`editor.transcribing`):L.listening?x(`editor.voiceStop`):x(`editor.voice`),"aria-pressed":L.listening,disabled:L.processing,onClick:L.toggle,className:y(L.listening&&`bg-rose-tint text-rose hover:bg-rose-tint hover:text-rose`),children:L.processing?(0,F.jsx)(v,{className:`size-4`}):L.listening?(0,F.jsx)(d,{className:`size-3.5 animate-pulse-dot fill-current`}):(0,F.jsx)(_,{className:`size-4`})}):null,(0,F.jsx)(`button`,{type:`button`,onClick:()=>void W(),disabled:!R,className:y(`inline-flex size-9 shrink-0 items-center justify-center rounded-full transition`,R?`bg-primary text-primary-foreground`:`bg-paper-2 text-ink-4`),"aria-label":`Send`,children:(0,F.jsx)(l,{className:`size-4`})})]})]}),L.error?(0,F.jsx)(`p`,{className:`mt-2 px-1 text-[0.75rem] text-rose`,children:L.error===`denied`?x(`editor.micDenied`):L.error}):null]})]})}var q=`wizards.runDrawer.width`,J=`wizards.runDrawer.wide`,Y=680,X=400,Z=()=>Math.max(X,window.innerWidth-120);function Q(e){try{return localStorage.getItem(e)}catch{return null}}function $(e,t){try{localStorage.setItem(e,t)}catch{}}function te(){let[e,t]=(0,k.useState)(()=>{let e=Number(Q(q));return e?Math.min(Math.max(e,X),Z()):Y}),[n,r]=(0,k.useState)(()=>Q(J)===`1`),i=(0,k.useCallback)(e=>{let n=Math.round(Math.min(Math.max(e,X),Z()));t(n),$(q,String(n))},[]);return{width:e,wide:n,toggleWide:()=>{r(!n),$(J,n?`0`:`1`)},onPointerDown:t=>{t.preventDefault();let n=t.clientX,r=e,a=e=>i(r+n-e.clientX),o=()=>{window.removeEventListener(`pointermove`,a),window.removeEventListener(`pointerup`,o),document.body.style.removeProperty(`cursor`),document.body.style.removeProperty(`user-select`)};document.body.style.cursor=`col-resize`,document.body.style.userSelect=`none`,window.addEventListener(`pointermove`,a),window.addEventListener(`pointerup`,o)},onKeyDown:t=>{let n=t.shiftKey?64:16;t.key===`ArrowLeft`?(t.preventDefault(),i(e+n)):t.key===`ArrowRight`&&(t.preventDefault(),i(e-n))},reset:()=>i(Y)}}function ne({header:e,actions:t,onClose:n,children:r}){let i=te();return(0,F.jsx)(`div`,{className:`fixed inset-0 z-50 flex justify-end bg-[oklch(20%_0.01_60/0.22)] backdrop-blur-[1px]`,onClick:n,children:(0,F.jsxs)(`div`,{className:y(`relative flex h-full w-full animate-rise flex-col bg-background shadow-overlay`,!i.wide&&`sm:w-[var(--drawer)]`),style:{"--drawer":`${i.width}px`},onClick:e=>e.stopPropagation(),children:[i.wide?null:(0,F.jsx)(`div`,{role:`separator`,"aria-orientation":`vertical`,"aria-label":x(`editor.resize`),"aria-valuenow":i.width,tabIndex:0,title:x(`editor.resize`),onPointerDown:i.onPointerDown,onKeyDown:i.onKeyDown,onDoubleClick:i.reset,className:`group -left-2.5 absolute inset-y-0 z-10 hidden w-5 cursor-col-resize outline-none sm:block`,children:(0,F.jsx)(`span`,{className:`-translate-y-1/2 absolute top-1/2 left-[7px] h-12 w-1.5 rounded-full bg-ink-4/40 transition group-hover:bg-ember/70 group-focus-visible:bg-ember group-active:h-16 group-active:bg-ember`})}),(0,F.jsxs)(`div`,{className:`flex h-14 shrink-0 items-center gap-3 px-4`,children:[(0,F.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center gap-3`,children:e}),(0,F.jsxs)(`div`,{className:`flex items-center gap-1`,children:[t,(0,F.jsx)(b,{label:x(i.wide?`runDrawer.shrink`:`runDrawer.expand`),onClick:i.toggleWide,className:`max-sm:hidden`,children:i.wide?(0,F.jsx)(O,{className:`size-4`}):(0,F.jsx)(f,{className:`size-4`})}),(0,F.jsx)(b,{label:x(`editor.close`),onClick:n,children:(0,F.jsx)(w,{className:`size-5`})})]})]}),(0,F.jsx)(`div`,{className:`min-h-0 flex-1 overflow-y-auto`,children:r})]})})}export{H as a,L as i,K as n,G as r,ne as t};