@apteva/apteva-kit 0.1.43 → 0.1.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["/root/code/frontends/apteva/apteva-kit/dist/index.js","../src/components/Chat/Chat.tsx","../src/components/Chat/MessageList.tsx","../src/components/Chat/Message.tsx","../src/utils/cn.ts","../src/utils/mock-data.ts","../src/utils/file-utils.ts","../src/utils/widget-parser.ts","../src/utils/widget-context.ts","../src/components/Widgets/Widgets.tsx","../src/components/Widgets/widget-library/Card.tsx","../src/components/Widgets/widget-library/List.tsx","../src/components/Widgets/widget-library/Button.tsx","../src/components/Widgets/widget-library/ButtonGroup.tsx","../src/components/Widgets/widget-library/Table.tsx","../src/components/Widgets/WidgetRenderer.tsx","../src/components/Widgets/WidgetSkeleton.tsx","../src/components/Chat/MarkdownContent.tsx","../src/components/Chat/ToolCall.tsx","../src/components/Chat/WelcomeScreen.tsx","../src/components/Chat/Composer.tsx","../src/components/Chat/CommandComposer.tsx","../src/lib/apteva-client.ts","../src/components/Chat/CommandOutput.tsx","../src/components/Command/Command.tsx","../src/components/Prompt/Prompt.tsx","../src/components/Stream/Stream.tsx","../src/components/Threads/ThreadList.tsx","../src/components/Threads/ThreadItem.tsx","../src/components/Threads/Threads.tsx","../src/utils/theme-script.ts"],"names":["jsxs","jsx","useRef","useState","Fragment","useMemo","threadId","result","error"],"mappings":"AAAA,6xBAAY;AACZ,IAAI,UAAU,EAAE,MAAM,CAAC,cAAc;AACrC,IAAI,gBAAgB,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,GAAG,IAAI,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,EAAE,EAAE,KAAK;AAC/J,IAAI,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,eAAe,CAAC,GAAG,EAAE,OAAO,IAAI,IAAI,SAAS,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC;AAC9G;AACA;ACLA,4EAAsF;ADOtF;AACA;AERA;AFUA;AACA;AGXA;AHaA;AACA;AIdA,4BAAsC;AACtC,+CAAwB;AAEjB,SAAS,EAAA,CAAA,GAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,oCAAA,wBAAQ,MAAW,CAAC,CAAA;AAC7B;AJeA;AACA;AKlBO,IAAM,aAAA,EAA0B;AAAA,EACrC;AAAA,IACE,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,WAAA;AAAA,IACN,OAAA,EAAS,yDAAA;AAAA,IACT,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,IAAO;AAAA,EAC1C,CAAA;AAAA,EACA;AAAA,IACE,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,OAAA,EAAS,iCAAA;AAAA,IACT,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,IAAO;AAAA,EAC1C,CAAA;AAAA,EACA;AAAA,IACE,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,WAAA;AAAA,IACN,OAAA,EAAS,kGAAA;AAAA,IACT,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,IAAO;AAAA,EAC1C,CAAA;AAAA,EACA;AAAA,IACE,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,OAAA,EAAS,yBAAA;AAAA,IACT,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,IAAO;AAAA,EAC1C,CAAA;AAAA,EACA;AAAA,IACE,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,WAAA;AAAA,IACN,OAAA,EAAS,gEAAA;AAAA,IACT,OAAA,EAAS;AAAA,MACP;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,EAAA,EAAI,gBAAA;AAAA,QACJ,KAAA,EAAO;AAAA,UACL,KAAA,EAAO;AAAA,YACL;AAAA,cACE,EAAA,EAAI,OAAA;AAAA,cACJ,KAAA,EAAO,eAAA;AAAA,cACP,QAAA,EAAU,sBAAA;AAAA,cACV,WAAA,EAAa,yCAAA;AAAA,cACb,QAAA,EAAU,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,EAAS,QAAA,EAAU,GAAA,EAAK,OAAA,EAAS,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,EAAE;AAAA,YAChG,CAAA;AAAA,YACA;AAAA,cACE,EAAA,EAAI,MAAA;AAAA,cACJ,KAAA,EAAO,aAAA;AAAA,cACP,QAAA,EAAU,sBAAA;AAAA,cACV,WAAA,EAAa,sCAAA;AAAA,cACb,QAAA,EAAU,EAAE,IAAA,EAAM,MAAA,EAAQ,OAAA,EAAS,OAAA,EAAS,GAAA,EAAK,OAAA,EAAS,GAAA,EAAK,OAAA,EAAS,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,EAAE;AAAA,YAC/F,CAAA;AAAA,YACA;AAAA,cACE,EAAA,EAAI,WAAA;AAAA,cACJ,KAAA,EAAO,kBAAA;AAAA,cACP,QAAA,EAAU,sBAAA;AAAA,cACV,WAAA,EAAa,6CAAA;AAAA,cACb,QAAA,EAAU,EAAE,IAAA,EAAM,WAAA,EAAa,OAAA,EAAS,OAAA,EAAS,GAAA,EAAK,OAAA,EAAS,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,EAAE;AAAA,YACnG;AAAA,UACF;AAAA,QACF,CAAA;AAAA,QACA,OAAA,EAAS;AAAA,UACP;AAAA,YACE,IAAA,EAAM,oBAAA;AAAA,YACN,KAAA,EAAO,QAAA;AAAA,YACP,OAAA,EAAS,QAAA;AAAA,YACT,OAAA,EAAS,CAAC;AAAA,UACZ,CAAA;AAAA,UACA;AAAA,YACE,IAAA,EAAM,cAAA;AAAA,YACN,KAAA,EAAO,SAAA;AAAA,YACP,OAAA,EAAS,QAAA;AAAA,YACT,OAAA,EAAS,CAAC;AAAA,UACZ;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,IAAO;AAAA,EAC1C;AACF,CAAA;AAEO,IAAM,YAAA,EAAwB;AAAA,EACnC;AAAA,IACE,EAAA,EAAI,UAAA;AAAA,IACJ,KAAA,EAAO,gBAAA;AAAA,IACP,OAAA,EAAS,0BAAA;AAAA,IACT,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,KAAQ,CAAA;AAAA,IACzC,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,IAAO,CAAA;AAAA,IACxC,YAAA,EAAc;AAAA,EAChB,CAAA;AAAA,EACA;AAAA,IACE,EAAA,EAAI,UAAA;AAAA,IACJ,KAAA,EAAO,4BAAA;AAAA,IACP,OAAA,EAAS,4BAAA;AAAA,IACT,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,MAAS,CAAA;AAAA,IAC1C,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,KAAQ,CAAA;AAAA,IACzC,YAAA,EAAc;AAAA,EAChB,CAAA;AAAA,EACA;AAAA,IACE,EAAA,EAAI,UAAA;AAAA,IACJ,KAAA,EAAO,iBAAA;AAAA,IACP,OAAA,EAAS,0BAAA;AAAA,IACT,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,MAAS,CAAA;AAAA,IAC1C,SAAA,EAAW,IAAI,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,MAAS,CAAA;AAAA,IAC1C,YAAA,EAAc;AAAA,EAChB;AACF,CAAA;AAEO,IAAM,YAAA,EAAwB;AAAA,EACnC;AAAA,IACE,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI,QAAA;AAAA,IACJ,KAAA,EAAO;AAAA,MACL,KAAA,EAAO,eAAA;AAAA,MACP,WAAA,EAAa,sCAAA;AAAA,MACb,KAAA,EAAO,8DAAA;AAAA,MACP,MAAA,EAAQ;AAAA,IACV,CAAA;AAAA,IACA,OAAA,EAAS;AAAA,MACP;AAAA,QACE,IAAA,EAAM,WAAA;AAAA,QACN,KAAA,EAAO,UAAA;AAAA,QACP,OAAA,EAAS,QAAA;AAAA,QACT,OAAA,EAAS,EAAE,MAAA,EAAQ,aAAa;AAAA,MAClC;AAAA,IACF;AAAA,EACF,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI,QAAA;AAAA,IACJ,KAAA,EAAO;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,WAAA,EAAa,yBAAA;AAAA,MACb,KAAA,EAAO,2DAAA;AAAA,MACP,MAAA,EAAQ;AAAA,IACV,CAAA;AAAA,IACA,OAAA,EAAS;AAAA,MACP;AAAA,QACE,IAAA,EAAM,WAAA;AAAA,QACN,KAAA,EAAO,UAAA;AAAA,QACP,OAAA,EAAS,QAAA;AAAA,QACT,OAAA,EAAS,EAAE,MAAA,EAAQ,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AACF,CAAA;AAEO,SAAS,oBAAA,CAAqB,MAAA,EAAgB,GAAA,EAAwB;AAC3E,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAA,GAAY;AAC9B,IAAA,UAAA,CAAW,CAAA,EAAA,GAAM;AACf,MAAA,OAAA,CAAQ;AAAA,QACN,EAAA,EAAI,CAAA,IAAA,EAAO,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,CAAA;AACf,QAAA;AACG,QAAA;AACE,QAAA;AACZ,MAAA;AACK,IAAA;AACT,EAAA;AACH;AAEgB;AAKM,EAAA;AACO,IAAA;AACN,IAAA;AAEF,IAAA;AACI,MAAA;AACH,QAAA;AACd,QAAA;AACK,MAAA;AACiB,QAAA;AACd,QAAA;AACV,MAAA;AACY,IAAA;AACf,EAAA;AACH;AAGiC;AACV,EAAA;AAEK,EAAA;AACjB,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAA;AACT,EAAA;AAE0B,EAAA;AACjB,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAAA;AACT,EAAA;AAE0B,EAAA;AACjB,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iDAAA;AACT,EAAA;AAE0B,EAAA;AACjB,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAA;AACT,EAAA;AAE0B,EAAA;AACjB,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAA;AACT,EAAA;AAGO,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mDAAA;AACT;AAGgB;AACO,EAAA;AAEK,EAAA;AACjB,IAAA;AACT,EAAA;AAE0B,EAAA;AACjB,IAAA;AACT,EAAA;AAE0B,EAAA;AACjB,IAAA;AACT,EAAA;AAE0B,EAAA;AACjB,IAAA;AACT,EAAA;AAE0B,EAAA;AACjB,IAAA;AACT,EAAA;AAGO,EAAA;AACT;AAGgB;AACE,EAAA;AACK,EAAA;AAEI,EAAA;AACrB,EAAA;AAGsB,EAAA;AACX,IAAA;AACL,MAAA;AACkB,MAAA;AACjB,MAAA;AACE,QAAA;AACM,QAAA;AACL,QAAA;AACV,MAAA;AACS,MAAA;AACP,QAAA;AACQ,UAAA;AACC,UAAA;AACE,UAAA;AACE,UAAA;AACb,QAAA;AACF,MAAA;AACD,IAAA;AACH,EAAA;AAE0B,EAAA;AACX,IAAA;AACL,MAAA;AACkB,MAAA;AACjB,MAAA;AACE,QAAA;AACL,UAAA;AACM,YAAA;AACG,YAAA;AACG,YAAA;AACG,YAAA;AACf,UAAA;AACA,UAAA;AACM,YAAA;AACG,YAAA;AACG,YAAA;AACG,YAAA;AACf,UAAA;AACA,UAAA;AACM,YAAA;AACG,YAAA;AACG,YAAA;AACG,YAAA;AACf,UAAA;AACF,QAAA;AACF,MAAA;AACD,IAAA;AACH,EAAA;AAG0B,EAAA;AACX,IAAA;AACL,MAAA;AACkB,MAAA;AACjB,MAAA;AACE,QAAA;AACL,UAAA;AACM,YAAA;AACG,YAAA;AACG,YAAA;AACG,YAAA;AACI,YAAA;AACP,YAAA;AACA,cAAA;AACE,cAAA;AACH,cAAA;AACT,YAAA;AACF,UAAA;AACA,UAAA;AACM,YAAA;AACG,YAAA;AACG,YAAA;AACG,YAAA;AACI,YAAA;AACP,YAAA;AACA,cAAA;AACE,cAAA;AACG,cAAA;AACf,YAAA;AACF,UAAA;AACA,UAAA;AACM,YAAA;AACG,YAAA;AACG,YAAA;AACG,YAAA;AACI,YAAA;AACP,YAAA;AACA,cAAA;AACE,cAAA;AACH,cAAA;AACT,YAAA;AACF,UAAA;AACF,QAAA;AACF,MAAA;AACS,MAAA;AACP,QAAA;AACQ,UAAA;AACC,UAAA;AACE,UAAA;AACC,UAAA;AACZ,QAAA;AACA,QAAA;AACQ,UAAA;AACC,UAAA;AACE,UAAA;AACC,UAAA;AACZ,QAAA;AACF,MAAA;AACD,IAAA;AAGQ,IAAA;AACD,MAAA;AACG,MAAA;AACA,QAAA;AACI,QAAA;AACS,QAAA;AACT,QAAA;AACb,MAAA;AACF,IAAA;AACF,EAAA;AAG0B,EAAA;AACf,IAAA;AACD,MAAA;AACG,MAAA;AACI,QAAA;AACF,QAAA;AACA,QAAA;AACX,MAAA;AACF,IAAA;AACF,EAAA;AAE2B,EAAA;AAC7B;AAGgB;AAOW,EAAA;AACG,EAAA;AACT,EAAA;AAEF,EAAA;AACX,IAAA;AACiB,MAAA;AACD,QAAA;AAChB,QAAA;AACK,MAAA;AACiB,QAAA;AAGN,QAAA;AACE,UAAA;AACjB,QAAA;AAGgB,QAAA;AACD,QAAA;AACG,QAAA;AACrB,MAAA;AACc,IAAA;AACQ,MAAA;AACd,MAAA;AACV,IAAA;AACY,EAAA;AAChB;ALG8B;AACA;AMrZ4B;AACpC,EAAA;AACC,IAAA;AACG,IAAA;AACE,MAAA;AAEA,MAAA;AACR,MAAA;AAChB,IAAA;AACuB,IAAA;AACE,IAAA;AAC1B,EAAA;AACH;AAKoC;AACV,EAAA;AACf,IAAA;AACT,EAAA;AACO,EAAA;AACT;AAKoC;AACX,EAAA;AAAA;AAErB,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAAA;AAEA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACF,EAAA;AACsB,EAAA;AACxB;AAKsB;AACC,EAAA;AACH,EAAA;AAEX,EAAA;AACC,IAAA;AACE,IAAA;AACA,MAAA;AACW,MAAA;AACX,MAAA;AACR,IAAA;AACF,EAAA;AACF;AAKsB;AACI,EAAA;AACH,EAAA;AACG,IAAA;AACxB,EAAA;AACO,EAAA;AACT;AAKsB;AAKA,EAAA;AACX,IAAA;AACT,EAAA;AAGgC,EAAA;AAGf,EAAA;AACK,IAAA;AACtB,EAAA;AAGyB,EAAA;AACA,EAAA;AAElB,EAAA;AACT;AAK+B;AACD,EAAA;AACH,EAAA;AACE,EAAA;AAC7B;AAKkC;AAK2C;AAClD,EAAA;AACA,IAAA;AACzB,EAAA;AACgB,EAAA;AACS,IAAA;AACzB,EAAA;AACqB,EAAA;AACvB;AN0W8B;AACA;AOreW;AAC5B,EAAA;AACa,EAAA;AACL,IAAA;AACK,IAAA;AACR,IAAA;AAChB,EAAA;AACsB,EAAA;AACxB;AAK6B;AACf,EAAA;AACG,EAAA;AACE,EAAA;AAEQ,EAAA;AACJ,IAAA;AAEH,IAAA;AACD,MAAA;AACb,MAAA;AACF,IAAA;AAEqB,IAAA;AACN,MAAA;AACb,MAAA;AACF,IAAA;AAEkB,IAAA;AACJ,MAAA;AACZ,MAAA;AACF,IAAA;AAEc,IAAA;AAEM,IAAA;AAClB,MAAA;AACkB,IAAA;AAClB,MAAA;AACiB,MAAA;AACR,QAAA;AACT,MAAA;AACF,IAAA;AACF,EAAA;AAEO,EAAA;AACT;AAKqC;AACA,EAAA;AAClB,EAAA;AACM,EAAA;AACJ,EAAA;AACoB,EAAA;AAGrB,EAAA;AACM,EAAA;AAEI,EAAA;AAEF,IAAA;AACN,IAAA;AAEH,IAAA;AACM,MAAA;AACb,MAAA;AAEF,MAAA;AAEiB,QAAA;AACC,QAAA;AACD,QAAA;AACd,MAAA;AAEC,QAAA;AACa,QAAA;AAEA,QAAA;AAEE,UAAA;AACC,UAAA;AACD,UAAA;AACrB,QAAA;AACF,MAAA;AACF,IAAA;AACF,EAAA;AAGsB,EAAA;AACM,IAAA;AAC5B,EAAA;AAGqB,EAAA;AAEjB,EAAA;AACY,EAAA;AACY,IAAA;AACL,IAAA;AAGF,IAAA;AAEI,IAAA;AAErB,MAAA;AACF,IAAA;AAGoB,IAAA;AAGF,IAAA;AACI,MAAA;AACH,MAAA;AACD,QAAA;AACN,UAAA;AACG,UAAA;AACV,QAAA;AACH,MAAA;AACF,IAAA;AAGI,IAAA;AAEkB,MAAA;AACA,MAAA;AAEH,MAAA;AAGM,MAAA;AAET,MAAA;AACN,QAAA;AACE,QAAA;AACA,UAAA;AACF,UAAA;AACJ,UAAA;AACmB,UAAA;AACrB,QAAA;AACD,MAAA;AACY,MAAA;AACH,IAAA;AAEZ,IAAA;AAEe,IAAA;AACU,IAAA;AAC3B,EAAA;AAGmB,EAAA;AACK,IAAA;AACH,IAAA;AACH,MAAA;AACN,QAAA;AACG,QAAA;AACV,MAAA;AACH,IAAA;AACF,EAAA;AAGwB,EAAA;AACR,IAAA;AACN,MAAA;AACe,MAAA;AACtB,IAAA;AACH,EAAA;AAGuB,EAAA;AACP,IAAA;AACN,MAAA;AACO,MAAA;AACd,IAAA;AACH,EAAA;AAEmB,EAAA;AACrB;APib8B;AACA;AQ3nBI;AAC1B,EAAA;AACI,IAAA;AACC,IAAA;AACX,EAAA;AACM,EAAA;AACI,IAAA;AACC,IAAA;AACX,EAAA;AACc,EAAA;AACJ,IAAA;AACC,IAAA;AACX,EAAA;AACM,EAAA;AACI,IAAA;AACC,IAAA;AACX,EAAA;AACO,EAAA;AACG,IAAA;AACC,IAAA;AACX,EAAA;AACO,EAAA;AACG,IAAA;AACC,IAAA;AACX,EAAA;AACO,EAAA;AACG,IAAA;AACC,IAAA;AACX,EAAA;AACF;AAIqD;AAKrC;AACE,EAAA;AAEF,EAAA;AAAA;AAAA;AAAA;AAAA;AAEc,EAAA;AACd,IAAA;AACF,IAAA;AACa,IAAA;AAA2B;AACpD,EAAA;AAEW,EAAA;AAAA;AAAA;AAEJ,EAAA;AACT;AAKgB;AACE,EAAA;AACT,EAAA;AAAA,mCAAA;AAA0D;AACnE;ARunB8B;AACA;ASvrBJ;ATyrBI;AACA;AU5qBd;AALe;AACD,EAAA;AAGzB,EAAA;AACW,IAAA;AAET,oBAAA;AACE,sBAAA;AACe,MAAA;AAClB,IAAA;AAEoB,IAAA;AAEL,MAAA;AAEQ,MAAA;AAGZ,QAAA;AAAA,QAAA;AAGG,UAAA;AACe,YAAA;AACG,YAAA;AACC,YAAA;AACN,YAAA;AACZ,UAAA;AAEO,UAAA;AAEF,UAAA;AAAA,QAAA;AAXH,QAAA;AAcX,MAAA;AAEJ,IAAA;AAEJ,EAAA;AAEJ;AVsqB8B;AACA;AWhsBpBA;AAfqB;AACJ,EAAA;AAGtB,EAAA;AAEI,IAAA;AAAA,IAAA;AAEY,MAAA;AAGC,MAAA;AAEX,MAAA;AAAc,QAAA;AAEd,wBAAA;AACCC,0BAAAA;AACkB,UAAA;AAEhB,UAAA;AAEJ,QAAA;AAEmB,QAAA;AAGZ,UAAA;AAAA,UAAA;AAGG,YAAA;AACe,cAAA;AACC,cAAA;AACJ,cAAA;AACC,cAAA;AACZ,YAAA;AAEO,YAAA;AAEF,YAAA;AAAA,UAAA;AAXH,UAAA;AAcX,QAAA;AAAA,MAAA;AAAA,IAAA;AAlCQ,IAAA;AAsChB,EAAA;AAEJ;AXmsB8B;AACA;AYvuB1B;AAX6B;AACN,EAAA;AAEF,EAAA;AACZ,IAAA;AACE,IAAA;AACF,IAAA;AACF,IAAA;AACT,EAAA;AAGEA,EAAAA;AAAC,IAAA;AAAA,IAAA;AAEU,MAAA;AAEiB,QAAA;AACN,QAAA;AACC,QAAA;AACN,QAAA;AACZ,MAAA;AAEH,MAAA;AACc,MAAA;AACZ,QAAA;AACD,MAAA;AAEA,MAAA;AAAA,IAAA;AACH,EAAA;AAEJ;AZgvB8B;AACA;AavvBpB;AAxBoB;AACX,EAAA;AAEM,EAAA;AACZ,IAAA;AACE,IAAA;AACF,IAAA;AACX,EAAA;AAG4B,EAAA;AACH,IAAA;AACzB,EAAA;AAGEA,EAAAA;AAAC,IAAA;AAAA,IAAA;AACY,MAAA;AACT,QAAA;AACW,QAAA;AACb,MAAA;AAEc,MAAA;AACG,QAAA;AAEb,QAAA;AAAC,UAAA;AAAA,UAAA;AAEgB,YAAA;AACD,cAAA;AACC,gCAAA;AACH,kBAAA;AACK,kBAAA;AACD,kBAAA;AACC,kBAAA;AACZ,gBAAA;AACH,cAAA;AACF,YAAA;AACW,YAAA;AACT,cAAA;AACe,cAAA;AACjB,YAAA;AAEQ,YAAA;AAAA,UAAA;AAhBI,UAAA;AAiBd,QAAA;AAEH,MAAA;AAAA,IAAA;AACH,EAAA;AAEJ;Ab8wB8B;AACA;AczxBpBD;AArCsB;AACP,EAAA;AAED,EAAA;AACL,IAAA;AACR,MAAA;AAAiB,QAAA;AACjB,MAAA;AAAgB,QAAA;AACrB,MAAA;AAAgB,QAAA;AAClB,IAAA;AACF,EAAA;AAGG,EAAA;AAIO,IAAA;AAID,oBAAA;AAGM,MAAA;AAAA,MAAA;AAEY,QAAA;AACT,UAAA;AACU,UAAA;AACU,UAAA;AACtB,QAAA;AACsB,QAAA;AAEd,QAAA;AAAA,MAAA;AARI,MAAA;AAYpB,IAAA;AACC,oBAAA;AACiB,MAAA;AACb,QAAA;AAAA,QAAA;AAEY,UAAA;AACT,YAAA;AACA,YAAA;AACW,YAAA;AACb,UAAA;AACe,UAAA;AACF,YAAA;AACE,8BAAA;AACI,gBAAA;AACJ,gBAAA;AACC,gBAAA;AACC,gBAAA;AACZ,cAAA;AACH,YAAA;AACF,UAAA;AACiB,UAAA;AAER,UAAA;AACN,YAAA;AAAA,YAAA;AAEY,cAAA;AACT,gBAAA;AACU,gBAAA;AACG,gBAAA;AACf,cAAA;AAEK,cAAA;AAAe,YAAA;AAPR,YAAA;AASf,UAAA;AAAA,QAAA;AA7Bc,QAAA;AA+BlB,MAAA;AAEC,MAAA;AACG,QAAA;AAAA,QAAA;AACkB,UAAA;AACP,UAAA;AACX,UAAA;AAAA,QAAA;AAGH,MAAA;AAEJ,IAAA;AAGN,EAAA;AAEJ;AdkzB8B;AACA;Ae13BpBA;AAfuB;AACV,EAAA;AACd,IAAA;AACIC,MAAAA;AACJ,IAAA;AACIA,MAAAA;AACJ,IAAA;AACIA,MAAAA;AACJ,IAAA;AACIA,MAAAA;AACJ,IAAA;AACIA,MAAAA;AACT,IAAA;AAEID,MAAAA;AACG,wBAAA;AAAsC,UAAA;AAA6B,UAAA;AAAK,QAAA;AACxE,wBAAA;AACH,MAAA;AAEN,EAAA;AACF;Af64B8B;AACA;ASz4BtB;AA9BgB;AACtB,EAAA;AACA,EAAA;AACA,EAAA;AACS,EAAA;AACC,EAAA;AACA,EAAA;AACV,EAAA;AACe;AACC,EAAA;AACG,IAAA;AACQ,sBAAA;AACxB,IAAA;AACwB,EAAA;AAEL,EAAA;AACb,IAAA;AACD,IAAA;AACG,IAAA;AACX,EAAA;AAEuB,EAAA;AACd,IAAA;AACC,IAAA;AACD,IAAA;AACT,EAAA;AAGG,EAAA;AAML;ATi6B8B;AACA;AgB37BpBA;AAPuB;AAGjB,EAAA;AACP,IAAA;AAEDC,MAAAA;AAEK,wBAAA;AACA,wBAAA;AACA,wBAAA;AAEL,MAAA;AAGC,IAAA;AAEDA,MAAAA;AAGO,wBAAA;AACA,wBAAA;AACCA,0BAAAA;AACAA,0BAAAA;AACF,QAAA;AAGN,MAAA;AAGC,IAAA;AAEDD,MAAAA;AACG,wBAAA;AACA,wBAAA;AACA,wBAAA;AACH,MAAA;AAGC,IAAA;AAEDA,MAAAA;AACG,wBAAA;AACA,wBAAA;AACCC,0BAAAA;AACAA,0BAAAA;AACF,QAAA;AACC,wBAAA;AACH,MAAA;AAGC,IAAA;AAEDD,MAAAA;AACG,wBAAA;AACA,wBAAA;AACCC,0BAAAA;AACAA,0BAAAA;AACAA,0BAAAA;AACAA,0BAAAA;AACAA,0BAAAA;AACF,QAAA;AACF,MAAA;AAGC,IAAA;AAEDA,MAAAA;AAKC,IAAA;AAEDA,MAAAA;AAOC,IAAA;AAEDA,MAAAA;AAGO,wBAAA;AACA,wBAAA;AAGP,MAAA;AAGC,IAAA;AAEDD,MAAAA;AAEG,wBAAA;AACCC,0BAAAA;AAGAA,0BAAAA;AAGAA,0BAAAA;AAGF,QAAA;AAGE,QAAA;AACEA,0BAAAA;AAGAA,0BAAAA;AAGAA,0BAAAA;AAIH,QAAA;AACH,MAAA;AAGJ,IAAA;AAGID,MAAAA;AACG,wBAAA;AACA,wBAAA;AACH,MAAA;AAEN,EAAA;AACF;AhBq4B8B;AACA;AiBn0BlBA;AAxM8B;AAChB,EAAA;AACI,EAAA;AAC9B;AAE6B;AACQ,EAAA;AAMf,EAAA;AAEJ,EAAA;AACZ,EAAA;AACM,EAAA;AAEkB,EAAA;AAER,IAAA;AACO,MAAA;AACzB,IAAA;AAEiB,IAAA;AAES,MAAA;AACL,MAAA;AACZ,MAAA;AACLC,wBAAAA;AAAC,UAAA;AAAA,UAAA;AAEC,YAAA;AACA,YAAA;AACU,YAAA;AAAA,UAAA;AAHa,UAAA;AAIzB,QAAA;AACF,MAAA;AACsB,IAAA;AAEE,MAAA;AACJ,MAAA;AAGE,MAAA;AACb,QAAA;AACLA,0BAAAA;AAAC,YAAA;AAAA,YAAA;AAEM,cAAA;AACA,cAAA;AACK,cAAA;AAAA,YAAA;AAHa,YAAA;AAIzB,UAAA;AACF,QAAA;AACK,MAAA;AACE,QAAA;AACLA,0BAAAA;AAAC,YAAA;AAAA,YAAA;AAEC,cAAA;AACO,cAAA;AACH,cAAA;AACM,cAAA;AAET,cAAA;AAAA,YAAA;AANoB,YAAA;AAOvB,UAAA;AACF,QAAA;AACF,MAAA;AACsB,IAAA;AAEV,MAAA;AACU,IAAA;AAEf,MAAA;AACJ,wBAAA;AAGH,MAAA;AACF,IAAA;AAE0B,IAAA;AAC5B,EAAA;AAGqB,EAAA;AACI,IAAA;AACzB,EAAA;AAE2B,EAAA;AAC7B;AAEuB;AACO,EAAA;AACO,EAAA;AACzB,EAAA;AACF,EAAA;AAEiB,EAAA;AACH,IAAA;AAGC,IAAA;AACR,IAAA;AACJ,MAAA;AACJ,wBAAA;AAGH,MAAA;AACA,MAAA;AACA,MAAA;AACF,IAAA;AAEqB,IAAA;AACR,IAAA;AACJ,MAAA;AACJ,wBAAA;AAGH,MAAA;AACA,MAAA;AACA,MAAA;AACF,IAAA;AAGqB,IAAA;AACR,IAAA;AAC2B,MAAA;AACd,MAAA;AAEP,MAAA;AACG,QAAA;AACD,QAAA;AACL,UAAA;AACRA,4BAAAA;AACF,UAAA;AACA,UAAA;AACK,QAAA;AACL,UAAA;AACF,QAAA;AACF,MAAA;AAEO,MAAA;AACJ,wBAAA;AAGH,MAAA;AACA,MAAA;AACF,IAAA;AAGqB,IAAA;AACR,IAAA;AAC2B,MAAA;AACd,MAAA;AAEP,MAAA;AACG,QAAA;AACD,QAAA;AACL,UAAA;AACRA,4BAAAA;AACF,UAAA;AACA,UAAA;AACK,QAAA;AACL,UAAA;AACF,QAAA;AACF,MAAA;AAEO,MAAA;AACJ,wBAAA;AAGH,MAAA;AACA,MAAA;AACF,IAAA;AAGwB,IAAA;AACE,IAAA;AAEF,MAAA;AACC,MAAA;AAEH,MAAA;AAEE,QAAA;AAGf,QAAA;AAGyB,QAAA;AACb,QAAA;AACE,UAAA;AACH,UAAA;AACE,YAAA;AACA,YAAA;AACd,YAAA;AACK,UAAA;AACL,YAAA;AACF,UAAA;AACF,QAAA;AAEO,QAAA;AACLA,0BAAAA;AAEIA,4BAAAA;AAOAA,4BAAAA;AATM,UAAA;AAoBZ,QAAA;AACA,QAAA;AACF,MAAA;AACF,IAAA;AAGiB,IAAA;AACH,MAAA;AACP,IAAA;AACE,MAAA;AACJ,wBAAA;AACsB,UAAA;AACD,UAAA;AACtB,QAAA;AACF,MAAA;AACF,IAAA;AACA,IAAA;AACF,EAAA;AAEO,EAAA;AACT;AAEkC;AAE7B,EAAA;AAIL;AjBy8B8B;AACA;AkBhsCtB;AAJyB;AACL,EAAA;AAEtBD,IAAAA;AACG,sBAAA;AACE,wBAAA;AACA,wBAAA;AACH,MAAA;AACC,sBAAA;AACH,IAAA;AAEJ,EAAA;AAE4B,EAAA;AAExBA,IAAAA;AACG,sBAAA;AAGA,sBAAA;AACH,IAAA;AAEJ,EAAA;AAIEA,EAAAA;AACG,oBAAA;AAGA,oBAAA;AAAoC,MAAA;AAAK,MAAA;AAAO,IAAA;AACnD,EAAA;AAEJ;AlB6rC8B;AACA;AGjkCtB;AA7I2B;AACV,EAAA;AACC,EAAA;AACI,EAAA;AACD,EAAA;AAGA,EAAA;AAGL,EAAA;AACE,IAAA;AACZ,MAAA;AACV,IAAA;AACe,IAAA;AAEZ,IAAA;AAEsB,EAAA;AAGX,EAAA;AACQ,IAAA;AACC,MAAA;AACd,QAAA;AACgB,UAAA;AACJ,UAAA;AACjB,QAAA;AACF,MAAA;AACF,IAAA;AACmB,EAAA;AAGL,EAAA;AACQ,IAAA;AACC,MAAA;AACd,QAAA;AACgB,UAAA;AACJ,UAAA;AACjB,QAAA;AACF,MAAA;AACF,IAAA;AACiB,EAAA;AAGQ,EAAA;AACH,IAAA;AACbC,MAAAA;AACT,IAAA;AAGe,IAAA;AAGK,IAAA;AAKK,IAAA;AAChB,MAAA;AACT,IAAA;AAEOA,IAAAA;AACT,EAAA;AAGM,EAAA;AACkB,IAAA;AACb,MAAA;AACT,IAAA;AAEe,IAAA;AACsB,IAAA;AACpB,IAAA;AAEQ,IAAA;AACF,MAAA;AACG,QAAA;AACL,MAAA;AAEG,QAAA;AACT,UAAA;AACPA,4BAAAA;AAKF,UAAA;AACa,UAAA;AACf,QAAA;AAES,QAAA;AACPA,0BAAAA;AAGF,QAAA;AACiB,MAAA;AAEG,QAAA;AACT,UAAA;AACPA,4BAAAA;AAKF,UAAA;AACa,UAAA;AACf,QAAA;AAES,QAAA;AACPA,0BAAAA;AAGF,QAAA;AACF,MAAA;AACD,IAAA;AAGsB,IAAA;AACZ,MAAA;AACN,wBAAA;AAKH,MAAA;AACF,IAAA;AAEyB,IAAA;AAC3B,EAAA;AAG4B,EAAA;AACd,IAAA;AACHA,MAAAA;AACT,IAAA;AAGoB,IAAA;AAEhBD,MAAAA;AACG,wBAAA;AACA,wBAAA;AACA,wBAAA;AACH,MAAA;AAEJ,IAAA;AAIuB,IAAA;AACd,MAAA;AACT,IAAA;AAGyB,IAAA;AAC3B,EAAA;AAGM,EAAA;AACgB,IAAA;AAEhBC,MAAAA;AAMJ,IAAA;AAEe,IAAA;AACsB,IAAA;AACpB,IAAA;AAEQ,IAAA;AACN,MAAA;AACG,QAAA;AACI,MAAA;AACF,QAAA;AACT,UAAA;AACPA,4BAAAA;AAKF,UAAA;AACa,UAAA;AACf,QAAA;AACS,QAAA;AACPA,0BAAAA;AAGF,QAAA;AACsB,MAAA;AACF,QAAA;AACT,UAAA;AACPA,4BAAAA;AAKF,UAAA;AACa,UAAA;AACf,QAAA;AACS,QAAA;AACPA,0BAAAA;AAGF,QAAA;AACF,MAAA;AACD,IAAA;AAEsB,IAAA;AACZ,MAAA;AACN,wBAAA;AAKH,MAAA;AACF,IAAA;AAEO,IAAA;AACT,EAAA;AAGM,EAAA;AACoB,IAAA;AACf,MAAA;AACT,IAAA;AAEqC,IAAA;AAEZ,IAAA;AACF,MAAA;AACE,QAAA;AACH,QAAA;AACC,UAAA;AACZ,QAAA;AACS,UAAA;AAChB,QAAA;AACiB,MAAA;AACR,QAAA;AACPA,0BAAAA;AACG,YAAA;AAAA,YAAA;AACe,cAAA;AACE,cAAA;AAAqC,YAAA;AAEzD,UAAA;AACF,QAAA;AACF,MAAA;AACD,IAAA;AAEM,IAAA;AACT,EAAA;AAGe,EAAA;AAEXD,IAAAA;AAC0B,MAAA;AAEJ,MAAA;AAMnB,sBAAA;AAGH,IAAA;AAEJ,EAAA;AAGsB,EAAA;AACP,EAAA;AAEXA,IAAAA;AACG,MAAA;AAEmB,MAAA;AAMnB,sBAAA;AAGH,IAAA;AAEJ,EAAA;AAGEA,EAAAA;AAAC,IAAA;AAAA,IAAA;AACY,MAAA;AACT,QAAA;AACS,QAAA;AACX,MAAA;AAEA,MAAA;AAAC,wBAAA;AAImB,QAAA;AAMnB,wBAAA;AAED,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;AHqlC8B;AACA;AmBv3CtB;AArCN;AACG,EAAA;AAAA,EAAA;AACe,IAAA;AACC,IAAA;AACF,IAAA;AACX,IAAA;AAAA,EAAA;AAEN;AAKA;AAK4B;AAC5B,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACU,EAAA;AACV,EAAA;AACqB;AAEyB,EAAA;AAC/B,IAAA;AACf,EAAA;AAEmB,EAAA;AACQ,EAAA;AAGR,EAAA;AAEfC,IAAAA;AAEK,sBAAA;AAGA,sBAAA;AAEL,IAAA;AAEJ,EAAA;AAG2B,EAAA;AAEvBD,IAAAA;AAEI,MAAA;AAEI,QAAA;AAGA,QAAA;AAEJ,MAAA;AAGA,MAAA;AAEK,QAAA;AAAA,QAAA;AAEgB,UAAA;AACJ,UAAA;AACT,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACF,UAAA;AAEA,UAAA;AACEC,4BAAAA;AAGAD,4BAAAA;AACEC,8BAAAA;AAGQ,cAAA;AAKV,YAAA;AACF,UAAA;AAAA,QAAA;AA1BK,QAAA;AA6BX,MAAA;AAEJ,IAAA;AAEJ,EAAA;AAIED,EAAAA;AAEG,oBAAA;AAEE,sBAAA;AAMC,MAAA;AAOA,MAAA;AAEJ,IAAA;AAIE,IAAA;AAEG,sBAAA;AAEI,QAAA;AAAA,QAAA;AAEgB,UAAA;AACJ,UAAA;AACT,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACF,UAAA;AAEA,UAAA;AACEC,4BAAAA;AAGAD,4BAAAA;AACEC,8BAAAA;AAGQ,cAAA;AAKV,YAAA;AACAA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACW,gBAAA;AACL,gBAAA;AACE,gBAAA;AACC,gBAAA;AAER,gBAAA;AAAC,kBAAA;AAAA,kBAAA;AACC,oBAAA;AACA,oBAAA;AACA,oBAAA;AACE,oBAAA;AAAA,kBAAA;AACJ,gBAAA;AAAA,cAAA;AACF,YAAA;AACF,UAAA;AAAA,QAAA;AAzCK,QAAA;AA4CX,MAAA;AAGC,sBAAA;AAEI,QAAA;AAAA,QAAA;AAEgB,UAAA;AACJ,UAAA;AACT,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AACF,UAAA;AAEA,UAAA;AACEA,4BAAAA;AAGAD,4BAAAA;AACEC,8BAAAA;AAGQ,cAAA;AAKV,YAAA;AACF,UAAA;AAAA,QAAA;AA5BK,QAAA;AA+BX,MAAA;AACF,IAAA;AAEJ,EAAA;AAEJ;AnBg1C8B;AACA;AExgDtB;AAxBoB;AAC1B,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACmB;AACwB,EAAA;AAE3B,EAAA;AAEO,IAAA;AACH,MAAA;AAClB,IAAA;AACW,EAAA;AAGXA,EAAAA;AAEK,IAAA;AAAA,IAAA;AACQ,MAAA;AACG,MAAA;AACJ,MAAA;AACG,MAAA;AACA,MAAA;AACM,MAAA;AAAyB,MAAA;AAAA,IAAA;AAG5B,EAAA;AAQtB;AFwhD8B;AACA;AoBzlDIC;AA+GxBD;AA7FiB;AACD,EAAA;AACI,EAAA;AACP,EAAA;AACH,EAAA;AAC8B,EAAA;AAC3BC,EAAAA;AACCA,EAAAA;AAEC,EAAA;AACK,IAAA;AACP,MAAA;AACN,MAAA;AACb,IAAA;AACF,EAAA;AAEyB,EAAA;AACG,IAAA;AACT,IAAA;AAED,IAAA;AACM,MAAA;AACI,MAAA;AACd,MAAA;AACQ,MAAA;AACD,MAAA;AAED,MAAA;AACM,QAAA;AACtB,MAAA;AACF,IAAA;AACF,EAAA;AAEoE,EAAA;AAC5C,IAAA;AAEE,IAAA;AACA,IAAA;AAC1B,EAAA;AAE0B,EAAA;AACA,IAAA;AACF,MAAA;AACe,MAAA;AACT,MAAA;AAEJ,MAAA;AACD,QAAA;AACG,QAAA;AACW,UAAA;AAEjB,UAAA;AACM,YAAA;AACpB,UAAA;AACgB,UAAA;AACX,QAAA;AACO,UAAA;AACd,QAAA;AACD,MAAA;AAEuB,MAAA;AACN,QAAA;AAClB,MAAA;AAEuB,MAAA;AACD,QAAA;AACH,QAAA;AACnB,MAAA;AAGwB,sBAAA;AACP,MAAA;AAGA,MAAA;AACnB,IAAA;AACF,EAAA;AAEoB,EAAA;AACM,IAAA;AACC,MAAA;AAEL,MAAA;AACI,QAAA;AACtB,MAAA;AACuB,MAAA;AACxB,IAAA;AACH,EAAA;AAEqB,EAAA;AACK,IAAA;AAEpBD,MAAAA;AAIJ,IAAA;AACiB,IAAA;AAEbA,MAAAA;AAIJ,IAAA;AAEEA,IAAAA;AAIJ,EAAA;AAGED,EAAAA;AAGI,IAAA;AAEK,sBAAA;AAGA,sBAAA;AAEL,IAAA;AAIqB,IAAA;AAGhB,MAAA;AAAA,MAAA;AAEW,QAAA;AAET,QAAA;AACC,UAAA;AAMFA,0BAAAA;AACEC,4BAAAA;AAGAA,4BAAAA;AAGF,UAAA;AACAA,0BAAAA;AAAC,YAAA;AAAA,YAAA;AACgB,cAAA;AACL,cAAA;AACJ,cAAA;AAEN,cAAA;AAEA,YAAA;AACF,UAAA;AAAA,QAAA;AAAA,MAAA;AA1BK,MAAA;AA6BX,IAAA;AAGD,oBAAA;AACE,sBAAA;AACCA,wBAAAA;AAAC,UAAA;AAAA,UAAA;AACM,YAAA;AACU,YAAA;AACL,YAAA;AACJ,YAAA;AAEN,YAAA;AAEA,UAAA;AACF,QAAA;AAIE,QAAA;AACEA,0BAAAA;AACAD,0BAAAA;AAAC,YAAA;AAAA,YAAA;AACW,cAAA;AACH,cAAA;AACC,gBAAA;AACA,gBAAA;AACR,cAAA;AAEA,cAAA;AAAA,gCAAA;AAAC,kBAAA;AAAA,kBAAA;AACU,oBAAA;AACP,sCAAA;AACA,sBAAA;AACF,oBAAA;AACA,oBAAA;AAEA,oBAAA;AAAA,sCAAA;AAGA,sCAAA;AAAyD,oBAAA;AAAA,kBAAA;AAC3D,gBAAA;AACC,gBAAA;AACE,kBAAA;AAAA,kBAAA;AACU,oBAAA;AACP,sBAAA;AACA,sBAAA;AACF,oBAAA;AACA,oBAAA;AAEA,oBAAA;AAAA,sCAAA;AAGA,sCAAA;AAA6D,oBAAA;AAAA,kBAAA;AAC/D,gBAAA;AAAA,cAAA;AAAA,YAAA;AAEJ,UAAA;AACF,QAAA;AAEJ,MAAA;AAEAC,sBAAAA;AAAC,QAAA;AAAA,QAAA;AACM,UAAA;AACE,UAAA;AACG,UAAA;AACC,UAAA;AACX,UAAA;AACA,UAAA;AACU,UAAA;AACJ,UAAA;AACc,UAAA;AAAQ,QAAA;AAC9B,MAAA;AAGE,MAAA;AAAC,QAAA;AAAA,QAAA;AACU,UAAA;AACC,UAAA;AACJ,UAAA;AAEN,UAAA;AAEA,QAAA;AAGFA,MAAAA;AAAC,QAAA;AAAA,QAAA;AACU,UAAA;AACQ,UAAA;AACP,UAAA;AACJ,UAAA;AAEN,UAAA;AAEA,QAAA;AACF,MAAA;AAEJ,IAAA;AAGAA,oBAAAA;AAAC,MAAA;AAAA,MAAA;AACM,QAAA;AACA,QAAA;AACG,QAAA;AACE,QAAA;AACA,QAAA;AACH,QAAA;AAAA,MAAA;AACT,IAAA;AACF,EAAA;AAEJ;ApBohD8B;AACA;AqB/yDrBE;AA2NOC;AAhMgB;AAC9B,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACc,EAAA;AACH,EAAA;AACY;AACGD,EAAAA;AACL,EAAA;AACH,EAAA;AACU,EAAA;AACiB,EAAA;AACxBD,EAAAA;AACCA,EAAAA;AAEK,EAAA;AACH,IAAA;AACL,IAAA;AAED,IAAA;AACM,MAAA;AACI,MAAA;AACb,MAAA;AACO,MAAA;AACpB,IAAA;AACF,EAAA;AAEuB,EAAA;AACK,IAAA;AACP,MAAA;AACJ,MAAA;AACf,IAAA;AACF,EAAA;AAEyB,EAAA;AACb,oBAAA;AACc,oBAAA;AAC1B,EAAA;AAE2B,EAAA;AACX,IAAA;AACQ,IAAA;AACG,MAAA;AACA,MAAA;AACzB,IAAA;AACF,EAAA;AAE0B,EAAA;AACA,IAAA;AACF,MAAA;AACe,MAAA;AACT,MAAA;AAEJ,MAAA;AACD,QAAA;AACG,QAAA;AACW,UAAA;AACjB,UAAA;AACM,YAAA;AACpB,UAAA;AACgB,UAAA;AACX,QAAA;AACO,UAAA;AACd,QAAA;AACD,MAAA;AAEuB,MAAA;AACN,QAAA;AAClB,MAAA;AAEuB,MAAA;AACD,QAAA;AACH,QAAA;AACnB,MAAA;AAEiB,MAAA;AACA,MAAA;AACnB,IAAA;AACF,EAAA;AAEoB,EAAA;AACM,IAAA;AACC,MAAA;AACL,MAAA;AACI,QAAA;AACtB,MAAA;AACuB,MAAA;AACxB,IAAA;AACH,EAAA;AAEqB,EAAA;AACK,IAAA;AAEpBD,MAAAA;AAIJ,IAAA;AACiB,IAAA;AAEbA,MAAAA;AAIJ,IAAA;AAEEA,IAAAA;AAIJ,EAAA;AAG0B,EAAA;AACC,IAAA;AAET,MAAA;AACG,QAAA;AACjB,MAAA;AAEqB,MAAA;AACJ,QAAA;AACjB,MAAA;AACe,MAAA;AACjB,IAAA;AACc,IAAA;AACG,MAAA;AACjB,IAAA;AACyB,IAAA;AACD,MAAA;AACxB,IAAA;AACc,IAAA;AACS,MAAA;AACvB,IAAA;AACmB,IAAA;AACrB,EAAA;AAEwB,EAAA;AACV,EAAA;AAGZD,EAAAA;AAGI,IAAA;AAEK,sBAAA;AAGA,sBAAA;AAEL,IAAA;AAIFA,oBAAAA;AAAC,MAAA;AAAA,MAAA;AACY,QAAA;AACT,UAAA;AACoB,UAAA;AACV,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACZ,QAAA;AAGA,QAAA;AAAAA,0BAAAA;AAEa,YAAA;AAEPC,8BAAAA;AAAC,gBAAA;AAAA,gBAAA;AACM,kBAAA;AACI,kBAAA;AACC,kBAAA;AACJ,kBAAA;AAEN,kBAAA;AAEA,gBAAA;AACF,cAAA;AAIE,cAAA;AACE,gCAAA;AACA,gCAAA;AAAC,kBAAA;AAAA,kBAAA;AACC,oBAAA;AACO,oBAAA;AACC,sBAAA;AACA,sBAAA;AACR,oBAAA;AAEA,oBAAA;AAAA,sCAAA;AAAC,wBAAA;AAAA,wBAAA;AACC,0BAAA;AACE,4CAAA;AACA,4BAAA;AACF,0BAAA;AACA,0BAAA;AAEA,0BAAA;AAAA,4CAAA;AAGA,4CAAA;AAAyD,0BAAA;AAAA,wBAAA;AAC3D,sBAAA;AACC,sBAAA;AACE,wBAAA;AAAA,wBAAA;AACC,0BAAA;AACE,4BAAA;AACA,4BAAA;AACF,0BAAA;AACA,0BAAA;AAEA,0BAAA;AAAA,4CAAA;AAGA,4CAAA;AAAqD,0BAAA;AAAA,wBAAA;AACvD,sBAAA;AAAA,oBAAA;AAAA,kBAAA;AAEJ,gBAAA;AACF,cAAA;AAEJ,YAAA;AAIS,YAAA;AAKA,YAAA;AAGb,UAAA;AAGc,UAAA;AAGP,YAAA;AAAA,YAAA;AAEW,cAAA;AACK,cAAA;AAEd,cAAA;AACC,gBAAA;AAMF,gCAAA;AAAC,kBAAA;AAAA,kBAAA;AACU,oBAAA;AACT,oBAAA;AACM,oBAAA;AAEN,oBAAA;AAEA,kBAAA;AACF,gBAAA;AAAA,cAAA;AAAA,YAAA;AAnBK,YAAA;AAsBX,UAAA;AAKA,UAAA;AAAC,YAAA;AAAA,YAAA;AACM,cAAA;AACE,cAAA;AACI,cAAA;AACA,cAAA;AACE,cAAA;AACb,cAAA;AACM,cAAA;AACK,cAAA;AACT,gBAAA;AACA,gBAAA;AACA,gBAAA;AACA,gBAAA;AACF,cAAA;AACS,cAAA;AAAsC,YAAA;AAGjDA,UAAAA;AAAC,YAAA;AAAA,YAAA;AACY,cAAA;AACT,gBAAA;AACU,gBAAA;AACA,gBAAA;AACA,gBAAA;AACA,gBAAA;AACA,gBAAA;AACZ,cAAA;AAEC,cAAA;AAEG,gCAAA;AACA,gCAAA;AAGF,cAAA;AAAA,YAAA;AAEJ,UAAA;AAIFA,0BAAAA;AAIMA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AACX,gBAAA;AAAA,cAAA;AAED,YAAA;AACAA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AACX,gBAAA;AAAA,cAAA;AAED,YAAA;AAGF,UAAA;AAEa,YAAA;AACR,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AACJ,gBAAA;AAEN,gBAAA;AAEA,cAAA;AACF,YAAA;AAIU,YAAA;AACT,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AACJ,gBAAA;AAEN,gBAAA;AAEA,cAAA;AACF,YAAA;AAIS,YAAA;AACR,cAAA;AAAA,cAAA;AACU,gBAAA;AACG,gBAAA;AACD,gBAAA;AACT,kBAAA;AACA,kBAAA;AACA,kBAAA;AACY,kBAAA;AAGd,gBAAA;AACM,gBAAA;AAEN,gBAAA;AAEA,cAAA;AACF,YAAA;AAIR,UAAA;AAAA,QAAA;AAAA,MAAA;AACF,IAAA;AAGAA,oBAAAA;AAAC,MAAA;AAAA,MAAA;AACM,QAAA;AACA,QAAA;AACG,QAAA;AACE,QAAA;AACA,QAAA;AACH,QAAA;AAAA,MAAA;AACT,IAAA;AACF,EAAA;AAEJ;ArBysD8B;AACA;AsBpkEN;AACA;AAEL;AAGH,EAAA;AAFN,IAAA;AAGQ,IAAA;AACJ,MAAA;AACA,MAAA;AACV,IAAA;AACF,EAAA;AAAA;AAAA;AAAA;AAKsC,EAAA;AACZ,IAAA;AACA,IAAA;AAC1B,EAAA;AAAA;AAAA;AAAA;AAKgC,EAAA;AACN,IAAA;AAC1B,EAAA;AAAA;AAAA;AAAA;AAKwD,EAAA;AAClD,IAAA;AACU,MAAA;AACQ,QAAA;AACF,QAAA;AACA,QAAA;AACA,QAAA;AACjB,MAAA;AAEsB,MAAA;AACb,QAAA;AACC,QAAA;AACS,UAAA;AACE,UAAA;AACpB,QAAA;AACqB,QAAA;AACtB,MAAA;AAEiB,MAAA;AACI,QAAA;AACE,QAAA;AACxB,MAAA;AAEmB,MAAA;AAKZ,MAAA;AACS,QAAA;AACE,QAAA;AACF,QAAA;AAChB,MAAA;AACc,IAAA;AACA,MAAA;AACR,MAAA;AACR,IAAA;AACF,EAAA;AAAA;AAAA;AAAA;AAOE,EAAA;AAII,IAAA;AACU,MAAA;AACQ,QAAA;AACF,QAAA;AACA,QAAA;AACA,QAAA;AACjB,MAAA;AAEsB,MAAA;AACb,QAAA;AACC,QAAA;AACS,UAAA;AACE,UAAA;AACR,UAAA;AACZ,QAAA;AACqB,QAAA;AAChB,UAAA;AACK,UAAA;AACT,QAAA;AACF,MAAA;AAEiB,MAAA;AACI,QAAA;AACE,QAAA;AACxB,MAAA;AAEwB,MAAA;AACX,MAAA;AACK,QAAA;AAClB,MAAA;AAEoB,MAAA;AACP,MAAA;AACE,MAAA;AAEF,MAAA;AACS,QAAA;AACV,QAAA;AAEQ,QAAA;AACG,QAAA;AACF,QAAA;AAEA,QAAA;AACG,UAAA;AAEA,UAAA;AACA,YAAA;AAEL,YAAA;AACE,8BAAA;AACb,cAAA;AACF,YAAA;AAEI,YAAA;AACY,cAAA;AAGJ,cAAA;AACG,gBAAA;AACb,cAAA;AAGa,cAAA;AAEH,YAAA;AACG,cAAA;AACf,YAAA;AACF,UAAA;AACF,QAAA;AACF,MAAA;AAEqB,sBAAA;AACP,IAAA;AACF,MAAA;AACC,sBAAA;AACP,MAAA;AACR,IAAA;AACF,EAAA;AAAA;AAAA;AAAA;AAKoC,EAAA;AACX,IAAA;AACb,MAAA;AACC,MAAA;AACS,QAAA;AACE,QAAA;AACpB,MAAA;AACuB,MAAA;AACxB,IAAA;AAEiB,IAAA;AACI,MAAA;AACE,MAAA;AACxB,IAAA;AAEmB,IAAA;AACP,IAAA;AACd,EAAA;AAAA;AAAA;AAAA;AAKwB,EAAA;AACC,IAAA;AACb,MAAA;AACC,MAAA;AACW,QAAA;AACpB,MAAA;AACD,IAAA;AAEiB,IAAA;AACI,MAAA;AACE,MAAA;AACxB,IAAA;AAEmB,IAAA;AACP,IAAA;AACd,EAAA;AAAA;AAAA;AAAA;AAKoB,EAAA;AACd,IAAA;AACqB,MAAA;AACb,QAAA;AACC,QAAA;AACS,UAAA;AACE,UAAA;AACpB,QAAA;AACD,MAAA;AAEiB,MAAA;AACI,QAAA;AACE,QAAA;AACxB,MAAA;AACc,IAAA;AACA,MAAA;AACR,MAAA;AACR,IAAA;AACF,EAAA;AACF;AAGgC;AtB0hEF;AACA;ACzpDtBG;AA1nB8C;AACpD,EAAA;AACA,EAAA;AACmB,EAAA;AACnB,EAAA;AACA,EAAA;AACA,EAAA;AACU,EAAA;AAAA;AAEI,EAAA;AACG,EAAA;AACjB,EAAA;AAAA;AAEiB,EAAA;AACN,EAAA;AACX,EAAA;AACkB,EAAA;AACH,EAAA;AACD,EAAA;AAAA;AAEd,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AAAA;AAEA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AAAA;AAEA,EAAA;AACa,EAAA;AACC,EAAA;AAAA;AAGE,EAAA;AAChB,EAAA;AACuB,EAAA;AACvB,EAAA;AAEA,EAAA;AACiD;AACrB,EAAA;AACV,EAAA;AACM,EAAA;AACAD,EAAAA;AACH,EAAA;AAGA,EAAA;AACC,EAAA;AACD,EAAA;AACO,EAAA;AACP,EAAA;AACG,EAAA;AACA,EAAA;AACC,EAAA;AACDA,EAAAA;AACD,EAAA;AACE,EAAA;AACA,EAAA;AACJD,EAAAA;AAGf,EAAA;AAGmB,EAAA;AACH,IAAA;AACd,MAAA;AACI,QAAA;AACR,MAAA;AACF,IAAA;AAC0B,IAAA;AACpB,MAAA;AACI,QAAA;AACR,MAAA;AACF,IAAA;AACmB,IAAA;AACE,IAAA;AACT,EAAA;AAGWG,EAAAA;AACH,IAAA;AACE,IAAA;AAGF,IAAA;AAA8B;AACxB,EAAA;AAGZ,EAAA;AACQ,IAAA;AACG,MAAA;AACE,QAAA;AACA,QAAA;AACxB,MAAA;AACH,IAAA;AACiB,EAAA;AAEH,EAAA;AACA,IAAA;AACK,sBAAA;AACnB,IAAA;AAC0B,EAAA;AAGZ,EAAA;AACM,IAAA;AACT,EAAA;AAGG,EAAA;AACR,IAAA;AACiB,MAAA;AACG,MAAA;AACF,QAAA;AACtB,MAAA;AACF,IAAA;AAC0B,IAAA;AACJ,IAAA;AACH,EAAA;AAEK,EAAA;AACT,IAAA;AACO,oBAAA;AAEN,IAAA;AACQ,MAAA;AACD,MAAA;AACD,MAAA;AACtB,IAAA;AACF,EAAA;AAE2B,EAAA;AAGD,EAAA;AAEE,IAAA;AACR,IAAA;AACK,IAAA;AAKR,IAAA;AACoB,MAAA;AACV,QAAA;AACf,QAAA;AACG,QAAA;AACE,QAAA;AACU,QAAA;AACvB,MAAA;AAEuB,MAAA;AACP,sBAAA;AAClB,IAAA;AACiB,IAAA;AAEb,IAAA;AAEqB,MAAA;AAEV,MAAA;AACM,QAAA;AACK,QAAA;AACjB,MAAA;AACsH,QAAA;AACvH,QAAA;AACA,QAAA;AACA,QAAA;AACkB,QAAA;AAChB,QAAA;AAEgB,QAAA;AACF,UAAA;AACd,UAAA;AACI,YAAA;AACF,YAAA;AACU,cAAA;AACP,YAAA;AACW,cAAA;AAClB,YAAA;AACF,UAAA;AAEa,UAAA;AACL,YAAA;AACF,YAAA;AACK,cAAA;AACS,gBAAA;AACd,gBAAA;AACK,kBAAA;AACM,kBAAA;AACA,kBAAA;AACG,kBAAA;AACd,gBAAA;AACF,cAAA;AACK,YAAA;AACE,cAAA;AACF,gBAAA;AACH,gBAAA;AACM,kBAAA;AACE,kBAAA;AACG,kBAAA;AACA,kBAAA;AACE,kBAAA;AACC,kBAAA;AACd,gBAAA;AACF,cAAA;AACF,YAAA;AACD,UAAA;AACH,QAAA;AAEmB,QAAA;AACjB,UAAA;AACY,YAAA;AACD,YAAA;AACD,YAAA;AACJ,YAAA;AACA,YAAA;AACN,UAAA;AACW,UAAA;AACK,YAAA;AACP,cAAA;AACO,gBAAA;AACR,kBAAA;AACK,kBAAA;AACH,oBAAA;AACA,oCAAA;AACF,kBAAA;AACF,gBAAA;AACA,gBAAA;AACG,cAAA;AACO,gBAAA;AACR,kBAAA;AACF,gBAAA;AACA,gBAAA;AACG,cAAA;AACA,cAAA;AACO,gBAAA;AACR,kBAAA;AACA,kBAAA;AACF,gBAAA;AACA,gBAAA;AACG,cAAA;AACO,gBAAA;AACJ,kBAAA;AACF,oBAAA;AACA,oBAAA;AACF,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kCAAA;AACA,kBAAA;AACF,gBAAA;AACA,gBAAA;AACG,cAAA;AACO,gBAAA;AACR,kBAAA;AACF,gBAAA;AACA,gBAAA;AACG,cAAA;AACO,gBAAA;AACF,kBAAA;AACF,kBAAA;AACF,oBAAA;AACA,oCAAA;AACF,kBAAA;AACA,kBAAA;AACA,kBAAA;AACF,gBAAA;AACA,gBAAA;AACG,cAAA;AACO,gBAAA;AACR,kBAAA;AAEA,kBAAA;AACF,gBAAA;AACA,gBAAA;AACG,cAAA;AACO,gBAAA;AACd,YAAA;AACF,UAAA;AACc,UAAA;AACR,YAAA;AACI,cAAA;AACF,cAAA;AACU,gBAAA;AACP,cAAA;AACL,gBAAA;AACF,cAAA;AACF,YAAA;AACa,YAAA;AACL,cAAA;AACF,cAAA;AACK,gBAAA;AACG,kBAAA;AACR,kBAAA;AACK,oBAAA;AAAA;AAEM,oBAAA;AACA,oBAAA;AACC,oBAAA;AACZ,kBAAA;AACF,gBAAA;AACF,cAAA;AACO,cAAA;AACR,YAAA;AACeC,YAAAA;AACd,cAAA;AACA,8BAAA;AACF,YAAA;AACkB,YAAA;AAClB,YAAA;AACgB,YAAA;AAClB,UAAA;AACW,UAAA;AACH,YAAA;AACY,cAAA;AACV,cAAA;AACG,cAAA;AACE,cAAA;AACC,cAAA;AACd,YAAA;AACa,YAAA;AACL,cAAA;AACF,cAAA;AACS,gBAAA;AACb,cAAA;AACW,cAAA;AACZ,YAAA;AACiB,YAAA;AAClB,YAAA;AACgB,YAAA;AACD,4BAAA;AACjB,UAAA;AACF,QAAA;AACF,MAAA;AACc,IAAA;AACoB,MAAA;AACX,QAAA;AACf,QAAA;AACG,QAAA;AACE,QAAA;AACQ,QAAA;AACrB,MAAA;AACuB,MAAA;AACb,sBAAA;AACV,IAAA;AACkB,MAAA;AACpB,IAAA;AACF,EAAA;AAGqB,EAAA;AAGE,EAAA;AACE,IAAA;AACE,IAAA;AACH,MAAA;AACG,MAAA;AACvB,MAAA;AACF,IAAA;AAGwB,IAAA;AACN,MAAA;AACI,MAAA;AACF,MAAA;AAEL,MAAA;AACM,QAAA;AACE,UAAA;AAA0C;AAAA;AAAA,iBAAA;AAC3C,UAAA;AACE,UAAA;AACF,UAAA;AACZ,QAAA;AACD,MAAA;AACD,QAAA;AACI,UAAA;AACA,UAAA;AAAsD;AAA+B;AAE1E,UAAA;AACL,YAAA;AACD,YAAA;AACD,YAAA;AACA,YAAA;AACT,UAAA;AACgB,UAAA;AACC,UAAA;AACF,UAAA;AACJ,QAAA;AACE,UAAA;AACE,UAAA;AACA,UAAA;AACD,0BAAA;AACjB,QAAA;AACF,MAAA;AACA,MAAA;AACF,IAAA;AAEyB,IAAA;AACL,IAAA;AACP,IAAA;AACQ,IAAA;AACH,IAAA;AAEd,IAAA;AACW,MAAA;AACU,QAAA;AACf,UAAA;AACJ,UAAA;AACE,YAAA;AACW,YAAA;AACC,cAAA;AACR,gBAAA;AACA,gBAAA;AACM,gBAAA;AACM,gBAAA;AACd,cAAA;AACF,YAAA;AACc,YAAA;AACkB,cAAA;AACnB,gBAAA;AACD,gBAAA;AACC,gBAAA;AACX,cAAA;AACA,cAAA;AACgB,cAAA;AACD,cAAA;AACF,8BAAA;AACf,YAAA;AACW,YAAA;AACO,cAAA;AACA,cAAA;AACD,8BAAA;AACjB,YAAA;AACF,UAAA;AACK,QAAA;AACa,UAAA;AACY,UAAA;AACnB,YAAA;AACQ,YAAA;AACR,YAAA;AACX,UAAA;AACiB,UAAA;AACD,UAAA;AACD,UAAA;AACI,0BAAA;AACrB,QAAA;AACK,MAAA;AAEC,QAAA;AACgB,QAAA;AAAsC;AAA8B;AAGpF,QAAA;AAIe,QAAA;AACf,UAAA;AACe,UAAA;AACA,UAAA;AACjB,YAAA;AACY,cAAA;AACD,cAAA;AACD,cAAA;AACJ,cAAA;AACI,cAAA;AACV,YAAA;AACW,YAAA;AACE,cAAA;AACT,gBAAA;AACA,gBAAA;AACA,gBAAA;AACM,gBAAA;AACM,gBAAA;AACH,cAAA;AACT,gBAAA;AACA,gBAAA;AACa,gCAAA;AAEb,gBAAA;AACA,gBAAA;AACS,cAAA;AACT,gCAAA;AACA,gBAAA;AACS,cAAA;AACJ,gBAAA;AACH,kBAAA;AACA,kCAAA;AACF,gBAAA;AACS,cAAA;AACT,gBAAA;AACF,cAAA;AACF,YAAA;AACc,YAAA;AACkB,cAAA;AACnB,gBAAA;AACD,gBAAA;AACC,gBAAA;AACX,cAAA;AACA,cAAA;AACgB,cAAA;AACD,cAAA;AACf,cAAA;AACa,8BAAA;AACf,YAAA;AACW,YAAA;AACO,cAAA;AACA,cAAA;AAChB,cAAA;AACe,8BAAA;AACjB,YAAA;AACF,UAAA;AACK,QAAA;AACY,UAAA;AACL,YAAA;AACD,YAAA;AACD,YAAA;AACJ,YAAA;AACI,YAAA;AACT,UAAA;AAC6B,UAAA;AACnB,YAAA;AACQ,YAAA;AACC,YAAA;AACA,YAAA;AACpB,UAAA;AACiB,UAAA;AACD,UAAA;AACD,UAAA;AACI,0BAAA;AACrB,QAAA;AACF,MAAA;AACY,IAAA;AACE,MAAA;AACO,MAAA;AACE,MAAA;AACR,sBAAA;AACjB,IAAA;AACF,EAAA;AAE2B,EAAA;AACH,IAAA;AACD,IAAA;AACD,IAAA;AACP,IAAA;AACK,IAAA;AACR,IAAA;AACU,IAAA;AACC,IAAA;AACE,IAAA;AACzB,EAAA;AAE0B,EAAA;AACF,IAAA;AACZ,IAAA;AACU,IAAA;AACK,IAAA;AAAA;AAA0C;AACpD,IAAA;AACjB,EAAA;AAEyB,EAAA;AACP,IAAA;AACN,IAAA;AACU,IAAA;AACE,IAAA;AACxB,EAAA;AAGmB,EAAA;AAEO,IAAA;AAClB,MAAA;AACiB,QAAA;AACL,MAAA;AACA,QAAA;AAChB,MAAA;AACF,IAAA;AAGkB,IAAA;AAEG,IAAA;AACG,MAAA;AACD,MAAA;AACE,MAAA;AACV,MAAA;AACf,IAAA;AAEwB,IAAA;AAC1B,EAAA;AAEkB,EAAA;AAIhBN,EAAAA;AAE0B,IAAA;AAGjB,sBAAA;AACA,sBAAA;AACC,QAAA;AAEI,QAAA;AAKH,MAAA;AAOP,IAAA;AAKA,IAAA;AACEC,sBAAAA;AAAC,QAAA;AAAA,QAAA;AACC,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACgB,UAAA;AAChB,UAAA;AACA,UAAA;AAAA,QAAA;AACF,MAAA;AACAA,sBAAAA;AAAC,QAAA;AAAA,QAAA;AACgB,UAAA;AACF,UAAA;AACH,UAAA;AACV,UAAA;AACQ,UAAA;AACR,UAAA;AACc,UAAA;AAAqD,QAAA;AACrE,MAAA;AACF,IAAA;AAKA,IAAA;AACG,MAAA;AAAA,MAAA;AACqB,QAAA;AACI,UAAA;AACL,UAAA;AACjB,QAAA;AACO,QAAA;AACG,QAAA;AACW,QAAA;AACrB,QAAA;AACA,QAAA;AACU,QAAA;AACC,QAAA;AACD,QAAA;AACD,QAAA;AACD,QAAA;AACE,QAAA;AACG,QAAA;AAAe,MAAA;AAElC,IAAA;AAGD,oBAAA;AACS,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA;AAYP,IAAA;AACL,EAAA;AAEH;AD0sE6B;AACA;AuB75FrBE;AAsDC;AvB02FoB;AACA;AwBj6FdA;AAmjBNC;AA7iBc;AACtB,EAAA;AACS,EAAA;AACT,EAAA;AACc,EAAA;AACD,EAAA;AACC,EAAA;AACK,EAAA;AACT,EAAA;AACA,EAAA;AACC,EAAA;AACX,EAAA;AACmB,EAAA;AACnB,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACc,EAAA;AACC,EAAA;AACG,EAAA;AAClB,EAAA;AACA,EAAA;AACe;AACWD,EAAAA;AACEA,EAAAA;AACFA,EAAAA;AACE,EAAA;AACF,EAAA;AACF,EAAA;AACAA,EAAAA;AACD,EAAA;AACC,EAAA;AACF,EAAA;AACG,EAAA;AACA,EAAA;AACE,EAAA;AAEX,EAAA;AACK,IAAA;AACF,MAAA;AACjB,IAAA;AACc,EAAA;AAGA,EAAA;AACM,IAAA;AACT,EAAA;AAGG,EAAA;AACR,IAAA;AACiB,MAAA;AACG,MAAA;AACF,QAAA;AACtB,MAAA;AACF,IAAA;AAE0B,IAAA;AACJ,IAAA;AACH,EAAA;AAEE,EAAA;AACE,IAAA;AAEE,IAAA;AACJ,MAAA;AACH,MAAA;AAChB,MAAA;AACF,IAAA;AAGwB,IAAA;AACJ,MAAA;AACL,MAAA;AACA,MAAA;AAGA,MAAA;AACM,QAAA;AACE,UAAA;AACD,UAAA;AACE,UAAA;AACT,UAAA;AACL,QAAA;AACD,MAAA;AAED,QAAA;AAEE,UAAA;AAEc,UAAA;AACC,YAAA;AACf,cAAA;AACQ,gBAAA;AACA,gBAAA;AACR,cAAA;AACG,cAAA;AACU,gBAAA;AACH,gBAAA;AACA,kBAAA;AACM,kBAAA;AACD,kBAAA;AACb,gBAAA;AACA,cAAA;AACJ,YAAA;AACK,UAAA;AACY,YAAA;AACnB,UAAA;AAGoB,UAAA;AACd,UAAA;AAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sJAAA;AAqBZ,UAAA;AACI;AAChB;AAEc,UAAA;AACN,YAAA;AACD,YAAA;AACD,YAAA;AACA,YAAA;AACD,UAAA;AACU,YAAA;AACC,YAAA;AACT,YAAA;AACO,UAAA;AACF,YAAA;AACA,YAAA;AACE,YAAA;AACD,4BAAA;AAChB,UAAA;AACW,QAAA;AACE,UAAA;AACA,UAAA;AACE,UAAA;AACD,0BAAA;AACjB,QAAA;AACF,MAAA;AACA,MAAA;AACF,IAAA;AAEkB,IAAA;AACL,IAAA;AACA,IAAA;AACQ,IAAA;AACR,IAAA;AACM,IAAA;AACT,oBAAA;AAEN,IAAA;AACW,MAAA;AAEU,QAAA;AAEf,UAAA;AAEJ,UAAA;AACE,YAAA;AACW,YAAA;AACC,cAAA;AACR,gBAAA;AACA,gBAAA;AACU,gCAAA;AAGJ,gBAAA;AACM,gBAAA;AACC,gCAAA;AACJ,cAAA;AAEH,gBAAA;AACK,gBAAA;AACA,kBAAA;AACG,kBAAA;AACF,kBAAA;AACD,kBAAA;AACT,gBAAA;AACJ,cAAA;AACF,YAAA;AACc,YAAA;AAEkB,cAAA;AACnB,gBAAA;AACH,gBAAA;AACK,kBAAA;AACE,kBAAA;AACX,kBAAA;AACA,kBAAA;AACW,kBAAA;AACb,gBAAA;AACS,gBAAA;AACX,cAAA;AAEUI,cAAAA;AACD,cAAA;AACM,cAAA;AACFA,8BAAAA;AACf,YAAA;AACW,YAAA;AAEK,cAAA;AACE,cAAA;AACD,8BAAA;AACjB,YAAA;AACF,UAAA;AACK,QAAA;AAEC,UAAA;AACS,YAAA;AACE,cAAA;AACA,8BAAA;AACN,cAAA;AACR,YAAA;AACG,UAAA;AAGY,UAAA;AAEJ,UAAA;AAER,UAAA;AAEwB,UAAA;AACnB,YAAA;AACH,YAAA;AACK,cAAA;AACE,cAAA;AACX,cAAA;AACA,cAAA;AACW,cAAA;AACH,cAAA;AAAa;AACvB,YAAA;AACS,YAAA;AACA,YAAA;AACX,UAAA;AAEgB,UAAA;AACE,UAAA;AACH,UAAA;AACI,0BAAA;AACrB,QAAA;AACK,MAAA;AAEgB,QAAA;AAEf,UAAA;AAGA,UAAA;AAEc,UAAA;AAEC,YAAA;AACf,cAAA;AACQ,gBAAA;AACA,gBAAA;AACR,cAAA;AACG,cAAA;AACU,gBAAA;AAAA;AACH,gBAAA;AACA,kBAAA;AACM,kBAAA;AACD,kBAAA;AACb,gBAAA;AACA,cAAA;AACJ,YAAA;AACK,UAAA;AAEY,YAAA;AACnB,UAAA;AAGoB,UAAA;AAGhB,UAAA;AACW,UAAA;AAEb,YAAA;AACK,UAAA;AAEL,YAAA;AACF,UAAA;AAEgB,UAAA;AACI;AAChB;AAEe,UAAA;AACjB,YAAA;AACY,cAAA;AACD,cAAA;AACD,cAAA;AACJ,cAAA;AACN,YAAA;AACW,YAAA;AACC,cAAA;AACR,gBAAA;AACA,gBAAA;AACU,gCAAA;AAGJ,gBAAA;AACM,gBAAA;AACC,gCAAA;AACJ,cAAA;AAEH,gBAAA;AACK,gBAAA;AACA,kBAAA;AACG,kBAAA;AACF,kBAAA;AACD,kBAAA;AACT,gBAAA;AACJ,cAAA;AACF,YAAA;AACc,YAAA;AAEkB,cAAA;AACnB,gBAAA;AACH,gBAAA;AACK,kBAAA;AACE,kBAAA;AACX,kBAAA;AACA,kBAAA;AACW,kBAAA;AACb,gBAAA;AACS,gBAAA;AACX,cAAA;AAEUA,cAAAA;AACD,cAAA;AACM,cAAA;AACFA,8BAAAA;AACf,YAAA;AACW,YAAA;AAEGC,cAAAA;AACA,cAAA;AACI,cAAA;AACH,8BAAA;AACf,YAAA;AACF,UAAA;AACK,QAAA;AAEC,UAAA;AACS,YAAA;AACE,cAAA;AACA,8BAAA;AACN,cAAA;AACR,YAAA;AACG,UAAA;AAGF,UAAA;AAEc,UAAA;AAEC,YAAA;AACf,cAAA;AACQ,gBAAA;AACA,gBAAA;AACR,cAAA;AACG,cAAA;AACU,gBAAA;AAAA;AACH,gBAAA;AACA,kBAAA;AACM,kBAAA;AACD,kBAAA;AACb,gBAAA;AACA,cAAA;AACJ,YAAA;AACK,UAAA;AAEY,YAAA;AACnB,UAAA;AAGoB,UAAA;AAGhB,UAAA;AACW,UAAA;AAEb,YAAA;AACK,UAAA;AAEL,YAAA;AACF,UAAA;AAEgB,UAAA;AACI;AAChB;AAEa,UAAA;AACL,YAAA;AACD,YAAA;AACD,YAAA;AACJ,YAAA;AACL,UAAA;AAEa,UAAA;AAEgB,UAAA;AACnB,YAAA;AACH,YAAA;AACK,cAAA;AACE,cAAA;AACX,cAAA;AACA,cAAA;AACW,cAAA;AACb,YAAA;AACkB,YAAA;AACA,YAAA;AACpB,UAAA;AAEgB,UAAA;AACE,UAAA;AACH,UAAA;AACI,0BAAA;AACrB,QAAA;AACF,MAAA;AACY,IAAA;AACE,MAAA;AACA,MAAA;AACE,MAAA;AACD,sBAAA;AACjB,IAAA;AACF,EAAA;AAE2B,EAAA;AACV,IAAA;AACD,IAAA;AACD,IAAA;AACA,IAAA;AACA,IAAA;AACH,IAAA;AACU,IAAA;AACI,IAAA;AACL,IAAA;AACrB,EAAA;AAE0B,EAAA;AAGA,IAAA;AACF,IAAA;AACZ,IAAA;AACU,IAAA;AAGK,IAAA;AAAA;AAA0C;AACpD,IAAA;AACjB,EAAA;AAEyB,EAAA;AAEE,IAAA;AACf,IAAA;AACU,IAAA;AACI,IAAA;AACT,IAAA;AACjB,EAAA;AAEyB,EAAA;AACC,IAAA;AACE,sBAAA;AAG+F,MAAA;AAEjG,MAAA;AACE,QAAA;AAEH,QAAA;AAEM,QAAA;AACN,UAAA;AACG,YAAA;AACV,cAAA;AACA,cAAA;AAEQ,cAAA;AAED,gBAAA;AACH,kBAAA;AACA,kBAAA;AACK,kBAAA;AACF,kBAAA;AAAA;AACE,kBAAA;AACZ,gBAAA;AACa,cAAA;AAEH,gBAAA;AACH,kBAAA;AACA,kBAAA;AACK,kBAAA;AACA,kBAAA;AACZ,gBAAA;AACH,cAAA;AACF,YAAA;AACQ,YAAA;AACV,UAAA;AACO,UAAA;AACR,QAAA;AACH,MAAA;AAEiB,MAAA;AACnB,IAAA;AACF,EAAA;AAEoB,EAAA;AACD,IAAA;AACnB,EAAA;AAEkB,EAAA;AAGhBR,EAAAA;AAAC,IAAA;AAAA,IAAA;AACY,MAAA;AACT,QAAA;AACU,QAAA;AACU,QAAA;AACV,QAAA;AACA,QAAA;AACA,QAAA;AACW,QAAA;AACrB,QAAA;AACF,MAAA;AACoB,MAAA;AAGpB,MAAA;AAAAA,wBAAAA;AACuB,UAAA;AAEjBC,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACQ,gBAAA;AACI,gBAAA;AACC,gBAAA;AACJ,kBAAA;AACF,oBAAA;AACF,oBAAA;AACF,kBAAA;AACF,gBAAA;AACA,gBAAA;AACU,gBAAA;AACJ,gBAAA;AAAA,cAAA;AACR,YAAA;AAEe,YAAA;AAIQ,cAAA;AACZ,gBAAA;AAAA,gBAAA;AACW,kBAAA;AACA,kBAAA;AACA,kBAAA;AAAA,gBAAA;AAGZ,cAAA;AACE,gCAAA;AAGA,gCAAA;AAGF,cAAA;AAEFA,8BAAAA;AAAC,gBAAA;AAAA,gBAAA;AACU,kBAAA;AACC,kBAAA;AACH,kBAAA;AAEP,kBAAA;AAEA,gBAAA;AACF,cAAA;AAGN,YAAA;AAEJ,UAAA;AAGmB,UAAA;AAEjBD,4BAAAA;AACG,cAAA;AACE,gBAAA;AAAA,gBAAA;AACU,kBAAA;AACC,kBAAA;AACJ,kBAAA;AAEN,kBAAA;AAEA,gBAAA;AACF,cAAA;AAGA,cAAA;AACE,gCAAA;AAAC,kBAAA;AAAA,kBAAA;AACU,oBAAA;AACT,oBAAA;AACE,sBAAA;AACA,sBAAA;AACF,oBAAA;AACM,oBAAA;AAEN,oBAAA;AACE,sCAAA;AACA,sCAAA;AACA,sCAAA;AACA,sCAAA;AACA,sCAAA;AACA,sCAAA;AACA,sCAAA;AACA,sCAAA;AACA,sCAAA;AACF,oBAAA;AAAA,kBAAA;AACF,gBAAA;AACC,gBAAA;AAGG,kCAAA;AACE,oCAAA;AAGA,oCAAA;AACE,sCAAA;AACA,sCAAA;AACF,oBAAA;AACF,kBAAA;AACA,kCAAA;AAAC,oBAAA;AAAA,oBAAA;AACC,sBAAA;AACI,wBAAA;AACF,wBAAA;AACF,sBAAA;AACA,sBAAA;AACE,wBAAA;AACA,wBAAA;AACF,sBAAA;AACK,sBAAA;AAEL,sBAAA;AAAC,wBAAA;AAAA,wBAAA;AACC,0BAAA;AACE,4BAAA;AACA,4BAAA;AACF,0BAAA;AAAA,wBAAA;AACF,sBAAA;AAAA,oBAAA;AACF,kBAAA;AAEJ,gBAAA;AAEF,cAAA;AAEJ,YAAA;AAEe,YAAA;AAIQ,cAAA;AACZ,gBAAA;AAAA,gBAAA;AACW,kBAAA;AACA,kBAAA;AACA,kBAAA;AAAA,gBAAA;AAGZ,cAAA;AAMFC,8BAAAA;AAAC,gBAAA;AAAA,gBAAA;AACU,kBAAA;AACC,kBAAA;AACJ,kBAAA;AAEN,kBAAA;AAEA,gBAAA;AACF,cAAA;AAGN,YAAA;AAEFA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACM,gBAAA;AACE,gBAAA;AACI,gBAAA;AACC,gBAAA;AACJ,kBAAA;AACF,oBAAA;AACF,oBAAA;AACF,kBAAA;AACF,gBAAA;AACA,gBAAA;AACU,gBAAA;AAAA,cAAA;AACZ,YAAA;AACAA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACU,gBAAA;AACE,gBAAA;AACA,gBAAA;AACT,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACS,kBAAA;AACX,gBAAA;AACM,gBAAA;AAEN,gBAAA;AAEA,cAAA;AACF,YAAA;AACF,UAAA;AAGS,UAAA;AAEPA,4BAAAA;AACAA,4BAAAA;AAIE,YAAA;AACEA,8BAAAA;AACG,gBAAA;AAAA,gBAAA;AACW,kBAAA;AACD,kBAAA;AAAsB,gBAAA;AAEnC,cAAA;AACAD,8BAAAA;AAA0D,gBAAA;AAAS,gBAAA;AAAC,cAAA;AACtE,YAAA;AAEJ,UAAA;AAGS,UAAA;AAEPA,4BAAAA;AACEC,8BAAAA;AACAA,8BAAAA;AAGF,YAAA;AACAA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACS,gBAAA;AACG,gBAAA;AACT,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACF,gBAAA;AAEA,gBAAA;AAEA,cAAA;AACF,YAAA;AACF,UAAA;AAGS,UAAA;AAGLD,4BAAAA;AACEC,8BAAAA;AAGAD,8BAAAA;AACE,gCAAA;AACA,gCAAA;AAGF,cAAA;AACF,YAAA;AACAA,4BAAAA;AACEC,8BAAAA;AAAC,gBAAA;AAAA,gBAAA;AACU,kBAAA;AACC,kBAAA;AACX,kBAAA;AAAA,gBAAA;AAED,cAAA;AACAA,8BAAAA;AAAC,gBAAA;AAAA,gBAAA;AACU,kBAAA;AACC,kBAAA;AACX,kBAAA;AAAA,gBAAA;AAED,cAAA;AACF,YAAA;AAEJ,UAAA;AAGS,UAAA;AAEPD,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AAEV,gBAAA;AAAA,kCAAA;AAGA,kCAAA;AAA0G,gBAAA;AAAA,cAAA;AAC5G,YAAA;AACAA,4BAAAA;AACEC,8BAAAA;AAAC,gBAAA;AAAA,gBAAA;AACU,kBAAA;AACC,kBAAA;AACX,kBAAA;AAAA,gBAAA;AAED,cAAA;AACAA,8BAAAA;AAAC,gBAAA;AAAA,gBAAA;AACU,kBAAA;AACC,kBAAA;AACX,kBAAA;AAAA,gBAAA;AAED,cAAA;AACF,YAAA;AACF,UAAA;AAGS,UAAA;AAEPA,4BAAAA;AAEIA,8BAAAA;AAGAD,8BAAAA;AACE,gCAAA;AACA,gCAAA;AACF,cAAA;AAEJ,YAAA;AAEE,YAAA;AAAC,cAAA;AAAA,cAAA;AACQ,gBAAA;AACI,gBAAA;AACC,gBAAA;AACJ,kBAAA;AACF,oBAAA;AACF,oBAAA;AACF,kBAAA;AACF,gBAAA;AACA,gBAAA;AACU,gBAAA;AACJ,gBAAA;AAAA,cAAA;AACR,YAAA;AAEJ,UAAA;AAGS,UAAA;AAMHA,4BAAAA;AACEC,8BAAAA;AAGAD,8BAAAA;AACE,gCAAA;AACA,gCAAA;AACF,cAAA;AACF,YAAA;AACc,4BAAA;AAKK,YAAA;AAGZ,cAAA;AAAA,cAAA;AAEC,gBAAA;AACA,gBAAA;AAAA,cAAA;AAFY,cAAA;AAKlB,YAAA;AAIR,UAAA;AAGS,UAAA;AAEPA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACW,gBAAA;AACD,gBAAA;AACE,kBAAA;AACC,kBAAA;AACZ,gBAAA;AAEA,gBAAA;AAAA,kCAAA;AAGA,kCAAA;AAEA,gBAAA;AAAA,cAAA;AACF,YAAA;AACAC,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACU,gBAAA;AACE,kBAAA;AACC,kBAAA;AACZ,gBAAA;AACW,gBAAA;AACT,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACF,gBAAA;AACM,gBAAA;AAEN,gBAAA;AAEA,cAAA;AACF,YAAA;AACF,UAAA;AAEJ,QAAA;AAIE,QAAA;AAEEA,0BAAAA;AAGO,YAAA;AACE,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AACJ,gBAAA;AAEN,gBAAA;AAEA,cAAA;AACF,YAAA;AAGA,YAAA;AACEA,8BAAAA;AAAC,gBAAA;AAAA,gBAAA;AACU,kBAAA;AACE,kBAAA;AACT,oBAAA;AACA,oBAAA;AACF,kBAAA;AACM,kBAAA;AAEN,kBAAA;AACE,oCAAA;AACA,oCAAA;AACA,oCAAA;AACA,oCAAA;AACA,oCAAA;AACA,oCAAA;AACA,oCAAA;AACA,oCAAA;AACA,oCAAA;AACF,kBAAA;AAAA,gBAAA;AACF,cAAA;AACC,cAAA;AAGK,gCAAA;AACE,kCAAA;AAGA,kCAAA;AACE,oCAAA;AACA,oCAAA;AACF,kBAAA;AACF,gBAAA;AACA,gCAAA;AAAC,kBAAA;AAAA,kBAAA;AACW,oBAAA;AACN,sBAAA;AACF,sBAAA;AACF,oBAAA;AACA,oBAAA;AACE,sBAAA;AACA,sBAAA;AACF,oBAAA;AACK,oBAAA;AAEL,oBAAA;AAAC,sBAAA;AAAA,sBAAA;AACC,wBAAA;AACE,0BAAA;AACA,0BAAA;AACF,wBAAA;AAAA,sBAAA;AACF,oBAAA;AAAA,kBAAA;AACF,gBAAA;AAEJ,cAAA;AAEJ,YAAA;AAIR,UAAA;AAGa,UAAA;AAGbD,0BAAAA;AACc,YAAA;AACT,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AACX,gBAAA;AAAA,cAAA;AAED,YAAA;AAGU,YAAA;AACT,cAAA;AAAA,cAAA;AACU,gBAAA;AACE,gBAAA;AACA,gBAAA;AACT,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACS,kBAAA;AACX,gBAAA;AACO,gBAAA;AAEN,gBAAA;AAOC,cAAA;AAEJ,YAAA;AAEJ,UAAA;AACF,QAAA;AAIkB,QAAA;AAIdA,0BAAAA;AACEA,4BAAAA;AACEC,8BAAAA;AAGAA,8BAAAA;AACF,YAAA;AACAA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AAEV,gBAAA;AAEA,cAAA;AACF,YAAA;AACF,UAAA;AAGAA,0BAAAA;AASAD,0BAAAA;AACEC,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AACX,gBAAA;AAAA,cAAA;AAED,YAAA;AACAA,4BAAAA;AAAC,cAAA;AAAA,cAAA;AACU,gBAAA;AACC,gBAAA;AACX,gBAAA;AAAA,cAAA;AAED,YAAA;AACF,UAAA;AAEJ,QAAA;AAIFA,wBAAAA;AAAC,UAAA;AAAA,UAAA;AACM,YAAA;AACA,YAAA;AACG,YAAA;AACE,YAAA;AACA,YAAA;AACH,YAAA;AAAA,UAAA;AACT,QAAA;AAEC,wBAAA;AACS,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA;AAaP,QAAA;AAAA,MAAA;AAAA,IAAA;AACL,EAAA;AAEJ;AxB8tF8B;AACA;AyB52HrBE;AA6EH;AAxEiB;AACrB,EAAA;AACc,EAAA;AACC,EAAA;AACL,EAAA;AACC,EAAA;AACE,EAAA;AACD,EAAA;AACZ,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACU,EAAA;AACQ,EAAA;AAClB,EAAA;AACc;AACYA,EAAAA;AACR,EAAA;AACIA,EAAAA;AAE2C,EAAA;AACrC,IAAA;AACR,IAAA;AACC,MAAA;AACE,sBAAA;AACrB,IAAA;AACF,EAAA;AAEqB,EAAA;AACA,IAAA;AAEH,oBAAA;AACC,IAAA;AAEb,IAAA;AACW,MAAA;AAEQ,QAAA;AACA,QAAA;AACE,wBAAA;AACV,QAAA;AACN,MAAA;AAEY,QAAA;AACL,UAAA;AACD,UAAA;AACV,QAAA;AACmB,wBAAA;AACT,QAAA;AACb,MAAA;AACc,IAAA;AACA,MAAA;AACd,IAAA;AACkB,MAAA;AACpB,IAAA;AACF,EAAA;AAEuB,EAAA;AACJ,IAAA;AACE,MAAA;AACJ,MAAA;AACf,IAAA;AACF,EAAA;AAEyB,EAAA;AACN,IAAA;AACF,MAAA;AACf,IAAA;AACF,EAAA;AAGEH,EAAAA;AACG,oBAAA;AACCC,sBAAAA;AAAC,QAAA;AAAA,QAAA;AACM,UAAA;AACL,UAAA;AACU,UAAA;AACC,UAAA;AACH,UAAA;AACR,UAAA;AACU,UAAA;AACA,UAAA;AAAA,QAAA;AACZ,MAAA;AAEc,MAAA;AACX,QAAA;AAAA,QAAA;AACU,UAAA;AACC,UAAA;AACA,UAAA;AAET,UAAA;AAA8B,QAAA;AACjC,MAAA;AAEJ,IAAA;AAGE,IAAA;AACS,MAAA;AAAO,MAAA;AAAI,MAAA;AAAU,MAAA;AAC9B,IAAA;AAGmB,IAAA;AAGd,MAAA;AAAA,MAAA;AAEgB,QAAA;AACL,QAAA;AAET,QAAA;AAAA,MAAA;AAJI,MAAA;AAOX,IAAA;AAIA,IAAA;AACG,sBAAA;AACA,sBAAA;AACH,IAAA;AAEJ,EAAA;AAEJ;AzB01H8B;AACA;A0B39HrBE;AAiHL;AA5GmB;AACrB,EAAA;AACA,EAAA;AACA,EAAA;AACY,EAAA;AACF,EAAA;AACV,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACU,EAAA;AACG,EAAA;AACC,EAAA;AACd,EAAA;AACc;AACUA,EAAAA;AACJ,EAAA;AACD,EAAA;AAEH,EAAA;AACI,IAAA;AACD,MAAA;AACjB,IAAA;AACY,EAAA;AAES,EAAA;AACF,IAAA;AACT,oBAAA;AAEN,IAAA;AACW,MAAA;AAGT,QAAA;AAKI,QAAA;AACJ,UAAA;AACW,UAAA;AACS,YAAA;AACH,4BAAA;AACjB,UAAA;AACA,UAAA;AACF,QAAA;AAEkB,QAAA;AACE,QAAA;AACA,wBAAA;AACf,MAAA;AAEiB,QAAA;AAEH,QAAA;AACjB,UAAA;AACY,YAAA;AACD,YAAA;AACD,YAAA;AACV,UAAA;AACW,UAAA;AACC,YAAA;AACR,cAAA;AACQ,cAAA;AACQ,8BAAA;AAClB,YAAA;AACF,UAAA;AACM,UAAA;AAEc,YAAA;AACH,YAAA;AACF,4BAAA;AACf,UAAA;AACW,UAAA;AAEG,YAAA;AACC,4BAAA;AACE,YAAA;AACjB,UAAA;AACF,QAAA;AACF,MAAA;AACc,IAAA;AACF,MAAA;AACC,sBAAA;AACO,MAAA;AACtB,IAAA;AACF,EAAA;AAEuB,EAAA;AACd,IAAA;AACD,IAAA;AACC,IAAA;AACT,EAAA;AAEqB,EAAA;AAEjBF,IAAAA;AACG,MAAA;AAAA,MAAA;AACU,QAAA;AACC,QAAA;AACX,QAAA;AAAA,MAAA;AAGH,IAAA;AAEJ,EAAA;AAGED,EAAAA;AACG,IAAA;AACe,IAAA;AAClB,EAAA;AAEJ;A1Bq8H8B;AACA;A2B5jIrBG;A3B8jIqB;AACA;A4BxiIpB;AAZ2B;AAEjCH,EAAAA;AAAC,IAAA;AAAA,IAAA;AACe,MAAA;AACZ,QAAA;AACD,MAAA;AACQ,MAAA;AAET,MAAA;AAAAA,wBAAAA;AACEC,0BAAAA;AACmB,UAAA;AACnBD,0BAAAA;AACEA,4BAAAA;AAAc,cAAA;AAAa,cAAA;AAAS,YAAA;AACpCC,4BAAAA;AACAA,4BAAAA;AACF,UAAA;AACF,QAAA;AAGE,QAAA;AAAC,UAAA;AAAA,UAAA;AACiB,YAAA;AACZ,cAAA;AACO,cAAA;AACX,YAAA;AACU,YAAA;AACJ,YAAA;AACP,YAAA;AAAA,UAAA;AAED,QAAA;AAAA,MAAA;AAAA,IAAA;AAEJ,EAAA;AAEJ;AAE4B;AACd,EAAA;AACa,EAAA;AACE,EAAA;AACF,EAAA;AACD,EAAA;AAEA,EAAA;AACI,EAAA;AACF,EAAA;AACE,EAAA;AAChB,EAAA;AACd;A5ByjI8B;AACA;A2BpkIpB;AAlCiB;AACzB,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACa,EAAA;AACH,EAAA;AACQ;AACE,EAAA;AAEI,EAAA;AAEP,IAAA;AAEjB,EAAA;AAEuB,EAAA;AAGrBD,EAAAA;AAEI,IAAA;AACG,MAAA;AAAA,MAAA;AACM,QAAA;AACO,QAAA;AACL,QAAA;AACU,QAAA;AACP,QAAA;AAAA,MAAA;AAEd,IAAA;AAGD,oBAAA;AACiB,MAAA;AAGV,QAAA;AAEiB,QAAA;AAChB,UAAA;AAAA,UAAA;AAEC,YAAA;AACiB,YAAA;AACD,YAAA;AACA,YAAA;AAA0B,UAAA;AAJ9B,UAAA;AAMf,QAAA;AAEJ,MAAA;AAEgB,MAAA;AAEZ,wBAAA;AAGA,wBAAA;AACH,MAAA;AAEJ,IAAA;AACF,EAAA;AAEJ;AAE4B;AACd,EAAA;AACe,EAAA;AACA,EAAA;AACC,EAAA;AACF,EAAA;AACA,EAAA;AAEX,EAAA;AACO,IAAA;AACK,MAAA;AACX,MAAA;AAEM,MAAA;AACR,QAAA;AACC,MAAA;AACD,QAAA;AACC,MAAA;AACD,QAAA;AACV,MAAA;AAEoB,MAAA;AACD,MAAA;AACZ,MAAA;AACT,IAAA;AACC,IAAA;AACH,EAAA;AACF;A3BolI8B;AACA;A6BnqIxB;AApBkB;AACtB,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACU,EAAA;AACG,EAAA;AACG,EAAA;AACN,EAAA;AACV,EAAA;AACe;AACQ,EAAA;AACZ,IAAA;AACC,IAAA;AACJ,IAAA;AACR,EAAA;AAEwB,EAAA;AAEpBA,IAAAA;AAC2B,MAAA;AACtB,QAAA;AAAA,QAAA;AAEgB,UAAA;AACJ,UAAA;AACT,YAAA;AACc,YAAA;AAGhB,UAAA;AAEQ,UAAA;AAAA,QAAA;AATI,QAAA;AAWf,MAAA;AACiB,MAAA;AACf,QAAA;AAAA,QAAA;AACU,UAAA;AACC,UAAA;AACX,UAAA;AAAA,QAAA;AAED,MAAA;AAEJ,IAAA;AAEJ,EAAA;AAGEA,EAAAA;AACoB,IAAA;AAEb,MAAA;AAAA,MAAA;AACU,QAAA;AACC,QAAA;AACX,QAAA;AAAA,MAAA;AAGH,IAAA;AAGFC,oBAAAA;AAAC,MAAA;AAAA,MAAA;AACC,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AAAA,MAAA;AACF,IAAA;AACF,EAAA;AAEJ;A7BkrI8B;AACA;A8BxvIH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBM;AACxB,EAAA;AACT;A9ByvI8B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"/root/code/frontends/apteva/apteva-kit/dist/index.js","sourcesContent":[null,"import { useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';\nimport { ChatProps, CommandResult } from '../../types/components';\nimport { Message as MessageType } from '../../types/messages';\nimport { MessageList } from './MessageList';\nimport { Composer } from './Composer';\nimport { CommandComposer } from './CommandComposer';\nimport { cn, generateMockResponse, generateMockCommandStream, buildMessageWithAttachments, ContentBlock, generateWidgetContext, generateCompactWidgetContext } from '../../utils';\nimport { aptevaClient } from '../../lib/apteva-client';\nimport { Widget } from '../../types/widgets';\nimport { WidgetRenderer } from '../Widgets/WidgetRenderer';\nimport { MarkdownContent } from './MarkdownContent';\n\nexport interface ChatHandle {\n /** Send a message programmatically (as if the user typed it) */\n sendMessage: (text: string) => Promise<void>;\n /** Send a system/background message (not shown as user message, just triggers agent) */\n sendSystemMessage: (text: string) => Promise<void>;\n /** Get current messages */\n getMessages: () => MessageType[];\n /** Clear all messages */\n clearMessages: () => void;\n}\n\nexport const Chat = forwardRef<ChatHandle, ChatProps>(function Chat({\n agentId,\n threadId,\n initialMessages = [],\n context,\n apiUrl,\n apiKey,\n useMock = false,\n // Mode switching\n initialMode = 'chat',\n showModeToggle = false,\n onModeChange,\n // Command mode options\n commandVariant = 'default',\n planMode = false,\n onPlanModeChange,\n enableStreaming = true,\n showProgress = true,\n loadingText = 'Processing...',\n // Welcome screen\n welcomeTitle,\n welcomeSubtitle,\n welcomeIcon,\n suggestedPrompts,\n welcomeVariant,\n // Events\n onThreadChange,\n onMessageSent,\n onAction,\n onFileUpload,\n onComplete,\n onError,\n onToolCall,\n onToolResult,\n // UI\n placeholder,\n showHeader = true,\n headerTitle = 'Chat',\n\n // Widget detection\n enableWidgets = false,\n availableWidgets,\n compactWidgetContext = false,\n onWidgetRender,\n\n className,\n}: ChatProps, ref: React.ForwardedRef<ChatHandle>) {\n const [messages, setMessages] = useState<MessageType[]>(initialMessages);\n const [isLoading, setIsLoading] = useState(false);\n const [currentThreadId, setCurrentThreadId] = useState<string | null>(threadId || null);\n const [mode, setMode] = useState<'chat' | 'command'>(initialMode);\n const [chatToolName, setChatToolName] = useState<string | null>(null); // Track tool name for chat mode header\n\n // Command mode state\n const [commandState, setCommandState] = useState<'idle' | 'loading' | 'success' | 'error' | 'plan-pending'>('idle');\n const [commandResult, setCommandResult] = useState<CommandResult | null>(null);\n const [commandError, setCommandError] = useState<Error | null>(null);\n const [progress, setProgress] = useState(0);\n const [commandInput, setCommandInput] = useState('');\n const [streamedContent, setStreamedContent] = useState('');\n const [currentToolName, setCurrentToolName] = useState<string | null>(null);\n const [currentRequestId, setCurrentRequestId] = useState<string | null>(null);\n const [plan, setPlan] = useState<string>('');\n const [pendingCommand, setPendingCommand] = useState<string>('');\n const [internalPlanMode, setInternalPlanMode] = useState(planMode);\n const [showSettingsMenu, setShowSettingsMenu] = useState(false);\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n // Store handleSendMessage ref so we can call it from useImperativeHandle\n const handleSendMessageRef = useRef<((text: string, files?: File[], isSystem?: boolean) => Promise<void>) | null>(null);\n\n // Expose imperative methods via ref\n useImperativeHandle(ref, () => ({\n sendMessage: async (text: string) => {\n if (handleSendMessageRef.current) {\n await handleSendMessageRef.current(text);\n }\n },\n sendSystemMessage: async (text: string) => {\n if (handleSendMessageRef.current) {\n await handleSendMessageRef.current(text, undefined, true);\n }\n },\n getMessages: () => messages,\n clearMessages: () => setMessages([]),\n }), [messages]);\n\n // Generate effective context with widget definitions if enabled\n const effectiveContext = useMemo(() => {\n if (!enableWidgets) return context;\n const widgetContext = compactWidgetContext\n ? generateCompactWidgetContext(availableWidgets)\n : generateWidgetContext(availableWidgets);\n return context ? `${context}\\n${widgetContext}` : widgetContext;\n }, [context, enableWidgets, availableWidgets, compactWidgetContext]);\n\n // Configure API client if props provided\n useEffect(() => {\n if (apiUrl || apiKey) {\n aptevaClient.configure({\n ...(apiUrl && { apiUrl }),\n ...(apiKey && { apiKey }),\n });\n }\n }, [apiUrl, apiKey]);\n\n useEffect(() => {\n if (threadId) {\n onThreadChange?.(threadId);\n }\n }, [threadId, onThreadChange]);\n\n // Sync internal plan mode with prop\n useEffect(() => {\n setInternalPlanMode(planMode);\n }, [planMode]);\n\n // Close settings menu when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (showSettingsMenu && !target.closest('.settings-menu-container')) {\n setShowSettingsMenu(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [showSettingsMenu]);\n\n const handleModeChange = (newMode: 'chat' | 'command') => {\n setMode(newMode);\n onModeChange?.(newMode);\n // Reset command state when switching modes\n if (newMode === 'command') {\n setCommandState('idle');\n setCommandResult(null);\n setCommandError(null);\n }\n };\n\n const defaultPlaceholder = mode === 'chat' ? 'Type a message...' : 'Enter your command...';\n\n // ==================== CHAT MODE LOGIC ====================\n const handleSendMessage = async (text: string, files?: File[], isSystem?: boolean) => {\n // Build display content for user message\n const hasFiles = files && files.length > 0;\n const fileNames = hasFiles ? files.map(f => f.name) : [];\n const displayContent = hasFiles\n ? `${text}${text ? '\\n' : ''}[Attached: ${fileNames.join(', ')}]`\n : text;\n\n // Only add user message to UI if not a system message\n if (!isSystem) {\n const userMessage: MessageType = {\n id: `msg-${Date.now()}`,\n role: 'user',\n content: displayContent,\n timestamp: new Date(),\n metadata: hasFiles ? { attachments: fileNames } : undefined,\n };\n\n setMessages((prev) => [...prev, userMessage]);\n onMessageSent?.(userMessage);\n }\n setIsLoading(true);\n\n try {\n // Build structured message with attachments\n const messagePayload = await buildMessageWithAttachments(text, files);\n\n if (useMock) {\n const response = await generateMockResponse(1000);\n setMessages((prev) => [...prev, response]);\n } else {\n let contentSegments: Array<{ type: 'text'; content: string } | { type: 'tool'; id: string; name: string; result?: any }> = [];\n let currentTextBuffer = '';\n let accumulatedWidgets: Widget[] = [];\n let responseThreadId = currentThreadId;\n let toolInputBuffer = '';\n const streamingMessageId = `msg-${Date.now()}`; // Stable ID for entire stream\n\n const updateMessage = () => {\n const segments = [...contentSegments];\n if (currentTextBuffer) {\n const lastSegment = segments[segments.length - 1];\n if (lastSegment && lastSegment.type === 'text') {\n lastSegment.content = currentTextBuffer;\n } else {\n segments.push({ type: 'text', content: currentTextBuffer });\n }\n }\n\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage && lastMessage.role === 'assistant') {\n return [\n ...prev.slice(0, -1),\n {\n ...lastMessage,\n content: currentTextBuffer,\n widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : undefined,\n metadata: { ...lastMessage.metadata, content_segments: segments, isStreaming: true },\n }\n ];\n } else {\n return [\n ...prev,\n {\n id: streamingMessageId,\n role: 'assistant' as const,\n content: currentTextBuffer,\n widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : undefined,\n timestamp: new Date(),\n metadata: { content_segments: segments, isStreaming: true },\n }\n ];\n }\n });\n };\n\n await aptevaClient.chatStream(\n {\n agent_id: agentId,\n message: messagePayload,\n stream: true,\n ...(currentThreadId && { thread_id: currentThreadId }),\n ...(effectiveContext && { system: effectiveContext }),\n },\n (chunk) => {\n switch (chunk.type) {\n case 'thread_id':\n if (chunk.thread_id) {\n responseThreadId = chunk.thread_id;\n if (!currentThreadId) {\n setCurrentThreadId(chunk.thread_id);\n onThreadChange?.(chunk.thread_id);\n }\n }\n break;\n case 'request_id':\n if (chunk.request_id) {\n setCurrentRequestId(chunk.request_id);\n }\n break;\n case 'content':\n case 'token':\n if (chunk.content) {\n currentTextBuffer += chunk.content;\n updateMessage();\n }\n break;\n case 'tool_call':\n if (chunk.tool_id && chunk.tool_name) {\n if (currentTextBuffer) {\n contentSegments.push({ type: 'text', content: currentTextBuffer });\n currentTextBuffer = '';\n }\n contentSegments.push({ type: 'tool', id: chunk.tool_id, name: chunk.tool_name });\n toolInputBuffer = '';\n setChatToolName(chunk.tool_name); // Show tool name in header\n onToolCall?.(chunk.tool_name, chunk.tool_id);\n updateMessage();\n }\n break;\n case 'tool_input_delta':\n if (chunk.tool_id && chunk.content) {\n toolInputBuffer += chunk.content;\n }\n break;\n case 'tool_result':\n if (chunk.tool_id) {\n const toolSegment = contentSegments.find((s) => s.type === 'tool' && s.id === chunk.tool_id) as { type: 'tool'; id: string; name: string; result?: any } | undefined;\n if (toolSegment) {\n toolSegment.result = chunk.content;\n onToolResult?.(toolSegment.name, chunk.content);\n }\n setChatToolName(null); // Clear tool name from header\n updateMessage();\n }\n break;\n case 'widget':\n if (chunk.widget) {\n accumulatedWidgets.push(chunk.widget);\n // Widget reporting happens in Message.tsx to avoid duplicates\n updateMessage();\n }\n break;\n case 'error':\n throw new Error(chunk.message || 'Stream error');\n }\n },\n (threadId) => {\n if (currentTextBuffer) {\n const lastSegment = contentSegments[contentSegments.length - 1];\n if (lastSegment && lastSegment.type === 'text') {\n lastSegment.content = currentTextBuffer;\n } else {\n contentSegments.push({ type: 'text', content: currentTextBuffer });\n }\n }\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage && lastMessage.role === 'assistant') {\n return [\n ...prev.slice(0, -1),\n {\n ...lastMessage,\n // Keep the same ID to avoid React remounting the component\n content: currentTextBuffer || 'Response received',\n widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : undefined,\n metadata: { thread_id: threadId, content_segments: contentSegments, isStreaming: false },\n }\n ];\n }\n return prev;\n });\n if (threadId && threadId !== currentThreadId) {\n setCurrentThreadId(threadId);\n onThreadChange?.(threadId);\n }\n setIsLoading(false);\n setCurrentRequestId(null);\n setChatToolName(null);\n },\n (error) => {\n const errorMessage: MessageType = {\n id: `msg-${Date.now()}-error`,\n role: 'assistant',\n content: `Error: ${error.message}`,\n timestamp: new Date(),\n metadata: { error: true },\n };\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage && lastMessage.id.includes('streaming')) {\n return [...prev.slice(0, -1), errorMessage];\n }\n return [...prev, errorMessage];\n });\n setIsLoading(false);\n setCurrentRequestId(null);\n setChatToolName(null);\n onError?.(error);\n }\n );\n }\n } catch (error) {\n const errorMessage: MessageType = {\n id: `msg-${Date.now()}-error`,\n role: 'assistant',\n content: error instanceof Error ? `Error: ${error.message}` : 'An error occurred',\n timestamp: new Date(),\n metadata: { error: true },\n };\n setMessages((prev) => [...prev, errorMessage]);\n onError?.(error instanceof Error ? error : new Error('Unknown error'));\n } finally {\n setIsLoading(false);\n }\n };\n\n // Assign to ref so useImperativeHandle can call it\n handleSendMessageRef.current = handleSendMessage;\n\n // ==================== COMMAND MODE LOGIC ====================\n const executeCommand = async (commandOverride?: string, files?: File[]) => {\n const currentCommand = commandOverride || commandInput;\n if (!currentCommand.trim() && (!files || files.length === 0)) {\n setCommandError(new Error('Please enter a command'));\n setCommandState('error');\n return;\n }\n\n // Plan mode: show plan first\n if (internalPlanMode && commandState !== 'plan-pending') {\n setCommandState('loading');\n setCommandError(null);\n setCommandInput('');\n\n if (useMock) {\n setTimeout(() => {\n const mockPlan = `1. Analyze the request: \"${currentCommand}\"\\n2. Process the data\\n3. Generate response\\n4. Return results`;\n setPlan(mockPlan);\n setPendingCommand(currentCommand);\n setCommandState('plan-pending');\n }, 800);\n } else {\n try {\n const planningInstruction = `CRITICAL PLANNING MODE: You are ONLY creating a plan. Write a numbered list of steps describing what WOULD be done. DO NOT execute anything.`;\n const systemMessage = effectiveContext ? `${effectiveContext}\\n\\n${planningInstruction}` : planningInstruction;\n\n const response = await aptevaClient.chat({\n agent_id: agentId,\n message: currentCommand,\n stream: false,\n system: systemMessage,\n });\n setPlan(response.message);\n setPendingCommand(currentCommand);\n setCommandState('plan-pending');\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Failed to generate plan');\n setCommandError(error);\n setCommandState('error');\n onError?.(error);\n }\n }\n return;\n }\n\n setCommandState('loading');\n setCommandError(null);\n setProgress(0);\n setStreamedContent('');\n setCommandInput('');\n\n try {\n if (useMock) {\n if (enableStreaming) {\n let accumulatedContent = '';\n generateMockCommandStream(\n currentCommand,\n (chunk) => {\n if (chunk.type === 'token' && chunk.content) {\n accumulatedContent += chunk.content;\n setStreamedContent(accumulatedContent);\n const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);\n setProgress(estimatedProgress);\n }\n },\n (threadId) => {\n const result: CommandResult = {\n success: true,\n data: { summary: accumulatedContent, thread_id: threadId },\n message: accumulatedContent || 'Command executed successfully',\n };\n setCommandResult(result);\n setCommandState('success');\n setProgress(100);\n onComplete?.(result);\n },\n (error) => {\n setCommandError(error);\n setCommandState('error');\n onError?.(error);\n }\n );\n } else {\n await new Promise(resolve => setTimeout(resolve, 1500));\n const result: CommandResult = {\n success: true,\n data: { summary: `Executed: ${currentCommand}` },\n message: `Command executed successfully`,\n };\n setCommandResult(result);\n setCommandState('success');\n setProgress(100);\n onComplete?.(result);\n }\n } else {\n // Real API\n const commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you\\'re doing or the result. Examples: \"Analyzing customer data from last quarter...\" or \"Created 5 new database entries successfully\" or \"Search complete: found 12 matching results\". NO greetings, NO filler words, NO clarification requests. Action/result only.';\n const systemMessage = effectiveContext ? `${effectiveContext}\\n\\n${commandInstruction}` : commandInstruction;\n\n // Build message with attachments if files provided\n const messagePayload = files && files.length > 0\n ? await buildMessageWithAttachments(currentCommand, files)\n : currentCommand;\n\n if (enableStreaming) {\n let accumulatedContent = '';\n let lastToolName = '';\n await aptevaClient.chatStream(\n {\n agent_id: agentId,\n message: messagePayload,\n stream: true,\n ...(currentThreadId && { thread_id: currentThreadId }),\n system: systemMessage,\n },\n (chunk) => {\n if ((chunk.type === 'token' || chunk.type === 'content') && chunk.content) {\n accumulatedContent += chunk.content;\n setStreamedContent(accumulatedContent);\n setCurrentToolName(null); // Clear tool name when we get content\n const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);\n setProgress(estimatedProgress);\n } else if (chunk.type === 'tool_call' && chunk.tool_name) {\n lastToolName = chunk.tool_name;\n setCurrentToolName(chunk.tool_name);\n onToolCall?.(chunk.tool_name, chunk.tool_id || '');\n // Reset for display - show only tool, not accumulated text\n accumulatedContent = '';\n setStreamedContent('');\n } else if (chunk.type === 'tool_result') {\n onToolResult?.(lastToolName, chunk.content);\n setCurrentToolName(null); // Tool finished, will show next content\n } else if (chunk.type === 'thread_id' && chunk.thread_id) {\n if (!currentThreadId) {\n setCurrentThreadId(chunk.thread_id);\n onThreadChange?.(chunk.thread_id);\n }\n } else if (chunk.type === 'request_id' && chunk.request_id) {\n setCurrentRequestId(chunk.request_id);\n }\n },\n (threadId) => {\n const result: CommandResult = {\n success: true,\n data: { summary: accumulatedContent, thread_id: threadId },\n message: accumulatedContent || 'Command executed successfully',\n };\n setCommandResult(result);\n setCommandState('success');\n setProgress(100);\n setCurrentRequestId(null);\n onComplete?.(result);\n },\n (error) => {\n setCommandError(error);\n setCommandState('error');\n setCurrentRequestId(null);\n onError?.(error);\n }\n );\n } else {\n const response = await aptevaClient.chat({\n agent_id: agentId,\n message: messagePayload,\n stream: false,\n ...(currentThreadId && { thread_id: currentThreadId }),\n system: systemMessage,\n });\n const result: CommandResult = {\n success: true,\n data: { summary: response.message, thread_id: response.thread_id },\n widgets: response.widgets,\n message: response.message,\n };\n setCommandResult(result);\n setCommandState('success');\n setProgress(100);\n onComplete?.(result);\n }\n }\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Unknown error');\n setCommandError(error);\n setCommandState('error');\n onError?.(error);\n }\n };\n\n const resetCommand = () => {\n setCommandState('idle');\n setCommandResult(null);\n setCommandError(null);\n setProgress(0);\n setCommandInput('');\n setPlan('');\n setPendingCommand('');\n setStreamedContent('');\n setCurrentToolName(null);\n };\n\n const approvePlan = () => {\n const planToExecute = plan;\n setPlan('');\n setPendingCommand('');\n const executionMessage = `Execute this plan now:\\n\\n${planToExecute}`;\n executeCommand(executionMessage);\n };\n\n const rejectPlan = () => {\n setCommandInput(pendingCommand);\n setPlan('');\n setPendingCommand('');\n setCommandState('idle');\n };\n\n // Stop generation handler\n const handleStop = async () => {\n // Call cancel API if we have a request ID\n if (currentRequestId && agentId) {\n try {\n await aptevaClient.cancelRequest(agentId, currentRequestId);\n } catch (error) {\n console.error('Failed to cancel request:', error);\n }\n }\n\n // For chat mode\n setIsLoading(false);\n // For command mode\n if (commandState === 'loading') {\n setCommandState('idle');\n setStreamedContent('');\n setCurrentToolName(null);\n setProgress(0);\n }\n // Clear request ID\n setCurrentRequestId(null);\n };\n\n const isCompact = commandVariant === 'compact';\n\n // ==================== RENDER ====================\n return (\n <div className={cn('flex flex-col h-full', className)}>\n {/* Header - only show in chat mode when showHeader is true */}\n {showHeader && mode === 'chat' && (\n <div className=\"apteva-chat-header px-4 py-3 flex items-center justify-between\">\n <div>\n <div className=\"apteva-chat-title\">{headerTitle}</div>\n <div className={cn(\n \"apteva-chat-status\",\n isLoading\n ? chatToolName\n ? \"apteva-chat-status-tool\"\n : \"apteva-chat-status-thinking\"\n : \"apteva-chat-status-ready\"\n )}>\n {isLoading\n ? chatToolName\n ? `Using ${chatToolName}...`\n : 'Thinking...'\n : 'Ready'}\n </div>\n </div>\n </div>\n )}\n\n {/* CHAT MODE */}\n {mode === 'chat' && (\n <>\n <MessageList\n messages={messages}\n onAction={onAction}\n welcomeTitle={welcomeTitle}\n welcomeSubtitle={welcomeSubtitle}\n welcomeIcon={welcomeIcon}\n suggestedPrompts={suggestedPrompts}\n welcomeVariant={welcomeVariant}\n onPromptClick={(prompt) => handleSendMessage(prompt)}\n enableWidgets={enableWidgets}\n onWidgetRender={onWidgetRender}\n />\n <Composer\n onSendMessage={handleSendMessage}\n placeholder={placeholder || defaultPlaceholder}\n disabled={isLoading}\n isLoading={isLoading}\n onStop={handleStop}\n onFileUpload={onFileUpload}\n onSwitchMode={showModeToggle ? () => handleModeChange('command') : undefined}\n />\n </>\n )}\n\n {/* COMMAND MODE - Self-contained composer with inline response */}\n {mode === 'command' && (\n <div className=\"w-full\">\n <CommandComposer\n onExecute={(text, files) => {\n setCommandInput(text);\n executeCommand(text, files);\n }}\n state={commandState}\n response={commandResult?.data?.summary || commandResult?.message}\n error={commandError?.message}\n plan={plan}\n streamedContent={streamedContent}\n toolName={currentToolName}\n onApprove={approvePlan}\n onReject={rejectPlan}\n onReset={resetCommand}\n onStop={handleStop}\n onExpand={showModeToggle ? () => handleModeChange('chat') : undefined}\n placeholder={placeholder || 'Enter your command...'}\n />\n </div>\n )}\n\n <style dangerouslySetInnerHTML={{\n __html: `\n @keyframes pulse-border {\n 0%, 100% { border-color: rgb(59, 130, 246); }\n 50% { border-color: rgb(147, 197, 253); }\n }\n .animate-pulse-border {\n animation: pulse-border 2s ease-in-out infinite;\n }\n .apteva-composer {\n border-radius: var(--apteva-border-radius, 1rem) !important;\n }\n `\n }} />\n </div>\n );\n});\n","import { useEffect, useRef } from 'react';\nimport { Message as MessageType } from '../../types/messages';\nimport { SuggestedPrompt } from '../../types/components';\nimport { Widget } from '../../types/widgets';\nimport { Message } from './Message';\nimport { WelcomeScreen } from './WelcomeScreen';\nimport { ActionEvent } from '../../types/actions';\n\ninterface MessageListProps {\n messages: MessageType[];\n onAction?: (action: ActionEvent) => void;\n // Welcome screen props\n welcomeTitle?: string;\n welcomeSubtitle?: string;\n welcomeIcon?: React.ReactNode;\n suggestedPrompts?: (string | SuggestedPrompt)[];\n welcomeVariant?: 'centered' | 'minimal';\n onPromptClick?: (prompt: string) => void;\n // Widget detection\n enableWidgets?: boolean;\n onWidgetRender?: (widget: Widget) => void;\n}\n\nexport function MessageList({\n messages,\n onAction,\n welcomeTitle,\n welcomeSubtitle,\n welcomeIcon,\n suggestedPrompts,\n welcomeVariant,\n onPromptClick,\n enableWidgets,\n onWidgetRender,\n}: MessageListProps) {\n const listRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n // Auto-scroll to bottom when new messages arrive\n if (listRef.current) {\n listRef.current.scrollTop = listRef.current.scrollHeight;\n }\n }, [messages]);\n\n return (\n <div ref={listRef} className=\"apteva-message-list apteva-scrollbar-hidden\">\n {messages.length === 0 ? (\n <WelcomeScreen\n title={welcomeTitle}\n subtitle={welcomeSubtitle}\n icon={welcomeIcon}\n prompts={suggestedPrompts}\n variant={welcomeVariant}\n onPromptClick={onPromptClick || (() => {})}\n />\n ) : (\n messages.map((message) => (\n <div key={message.id} className={message.role === 'user' ? 'apteva-message-row-user' : 'apteva-message-row-assistant'}>\n <Message message={message} onAction={onAction} enableWidgets={enableWidgets} onWidgetRender={onWidgetRender} />\n </div>\n ))\n )}\n </div>\n );\n}\n","import { useEffect, useRef, useMemo } from 'react';\nimport { Message as MessageType } from '../../types/messages';\nimport { Widget } from '../../types/widgets';\nimport { cn, parseWidgetsFromText } from '../../utils';\nimport { Widgets } from '../Widgets';\nimport { ActionEvent } from '../../types/actions';\nimport { MarkdownContent } from './MarkdownContent';\nimport { ToolCall } from './ToolCall';\nimport { WidgetRenderer } from '../Widgets/WidgetRenderer';\nimport { WidgetSkeleton } from '../Widgets/WidgetSkeleton';\n\ntype ContentSegment =\n | { type: 'text'; content: string }\n | { type: 'tool'; id: string; name: string; result?: any };\n\ninterface MessageProps {\n message: MessageType;\n onAction?: (action: ActionEvent) => void;\n enableWidgets?: boolean;\n onWidgetRender?: (widget: Widget) => void;\n}\n\nexport function Message({ message, onAction, enableWidgets, onWidgetRender }: MessageProps) {\n const isUser = message.role === 'user';\n const contentSegments = message.metadata?.content_segments as ContentSegment[] | undefined;\n const isStreaming = message.metadata?.isStreaming === true;\n const hasContent = message.content || (contentSegments && contentSegments.length > 0);\n\n // Track which widgets we've already reported to avoid duplicates\n const reportedWidgetsRef = useRef<Set<string>>(new Set());\n\n // Parse widgets from content (memoized to avoid reparsing on every render)\n const parsedWidgets = useMemo(() => {\n if (!enableWidgets || isUser || !message.content) {\n return [];\n }\n const parsed = parseWidgetsFromText(message.content);\n return parsed.segments\n .filter((seg): seg is { type: 'widget'; widget: Widget } => seg.type === 'widget' && !!seg.widget)\n .map(seg => seg.widget);\n }, [enableWidgets, isUser, message.content]);\n\n // Report message.widgets when they change\n useEffect(() => {\n if (onWidgetRender && message.widgets) {\n for (const widget of message.widgets) {\n if (!reportedWidgetsRef.current.has(widget.id)) {\n reportedWidgetsRef.current.add(widget.id);\n onWidgetRender(widget);\n }\n }\n }\n }, [message.widgets, onWidgetRender]);\n\n // Report parsed widgets from text content (after render)\n useEffect(() => {\n if (onWidgetRender && parsedWidgets.length > 0) {\n for (const widget of parsedWidgets) {\n if (!reportedWidgetsRef.current.has(widget.id)) {\n reportedWidgetsRef.current.add(widget.id);\n onWidgetRender(widget);\n }\n }\n }\n }, [parsedWidgets, onWidgetRender]);\n\n // Render text content (markdown only, no widgets - widgets rendered separately)\n const renderTextContent = (text: string) => {\n if (!enableWidgets || isUser) {\n return <MarkdownContent content={text} />;\n }\n\n // Parse to get cleaned text (strips @ui: patterns)\n const parsed = parseWidgetsFromText(text);\n\n // Combine all text segments\n const cleanedText = parsed.segments\n .filter(seg => seg.type === 'text' && seg.content)\n .map(seg => seg.content)\n .join('');\n\n if (!cleanedText.trim()) {\n return null;\n }\n\n return <MarkdownContent content={cleanedText} />;\n };\n\n // Render content with widgets as separate elements (like tool calls)\n const renderContentWithWidgets = () => {\n if (!enableWidgets || isUser || !message.content) {\n return null;\n }\n\n const parsed = parseWidgetsFromText(message.content);\n const elements: React.ReactNode[] = [];\n let textBuffer = '';\n\n parsed.segments.forEach((segment, index) => {\n if (segment.type === 'text' && segment.content) {\n textBuffer += segment.content;\n } else if (segment.type === 'widget' && segment.widget) {\n // Flush text buffer as a bubble\n if (textBuffer.trim()) {\n elements.push(\n <div key={`text-${index}`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n textBuffer = '';\n }\n // Render widget standalone\n elements.push(\n <div key={`widget-${index}`} className=\"apteva-widget-standalone\">\n <WidgetRenderer widget={segment.widget} onAction={onAction} />\n </div>\n );\n } else if (segment.type === 'widget_pending' && segment.pendingType) {\n // Flush text buffer as a bubble\n if (textBuffer.trim()) {\n elements.push(\n <div key={`text-${index}`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n textBuffer = '';\n }\n // Render skeleton standalone\n elements.push(\n <div key={`pending-${index}`} className=\"apteva-widget-standalone\">\n <WidgetSkeleton type={segment.pendingType} />\n </div>\n );\n }\n });\n\n // Flush remaining text\n if (textBuffer.trim()) {\n elements.push(\n <div key=\"text-final\" className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n }\n\n return elements.length > 0 ? elements : null;\n };\n\n // Render content with inline tool calls\n const renderContent = () => {\n if (isUser) {\n return <div className=\"apteva-message-text\">{message.content}</div>;\n }\n\n // Show typing indicator for streaming messages without content\n if (isStreaming && !hasContent) {\n return (\n <div className=\"apteva-typing-indicator\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n );\n }\n\n // If we have content segments, render them in order\n // This is handled differently - returns array of elements for split bubbles\n if (contentSegments && contentSegments.length > 0) {\n return null; // Handled by renderSegmentedContent\n }\n\n // Fallback to just content\n return renderTextContent(message.content);\n };\n\n // Render text segment with widgets separated out\n const renderTextSegmentWithWidgets = (text: string, keyPrefix: string) => {\n if (!enableWidgets) {\n return (\n <div key={keyPrefix} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={text} />\n </div>\n </div>\n );\n }\n\n const parsed = parseWidgetsFromText(text);\n const elements: React.ReactNode[] = [];\n let textBuffer = '';\n\n parsed.segments.forEach((seg, idx) => {\n if (seg.type === 'text' && seg.content) {\n textBuffer += seg.content;\n } else if (seg.type === 'widget' && seg.widget) {\n if (textBuffer.trim()) {\n elements.push(\n <div key={`${keyPrefix}-text-${idx}`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n textBuffer = '';\n }\n elements.push(\n <div key={`${keyPrefix}-widget-${idx}`} className=\"apteva-widget-standalone\">\n <WidgetRenderer widget={seg.widget} onAction={onAction} />\n </div>\n );\n } else if (seg.type === 'widget_pending' && seg.pendingType) {\n if (textBuffer.trim()) {\n elements.push(\n <div key={`${keyPrefix}-text-${idx}`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n textBuffer = '';\n }\n elements.push(\n <div key={`${keyPrefix}-pending-${idx}`} className=\"apteva-widget-standalone\">\n <WidgetSkeleton type={seg.pendingType} />\n </div>\n );\n }\n });\n\n if (textBuffer.trim()) {\n elements.push(\n <div key={`${keyPrefix}-text-final`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n }\n\n return elements;\n };\n\n // Render segmented content with separate bubbles for text and tool calls outside bubbles\n const renderSegmentedContent = () => {\n if (!contentSegments || contentSegments.length === 0) {\n return null;\n }\n\n const elements: React.ReactNode[] = [];\n\n contentSegments.forEach((segment, index) => {\n if (segment.type === 'text' && segment.content) {\n const textElements = renderTextSegmentWithWidgets(segment.content, `seg-${index}`);\n if (Array.isArray(textElements)) {\n elements.push(...textElements);\n } else {\n elements.push(textElements);\n }\n } else if (segment.type === 'tool') {\n elements.push(\n <div key={segment.id} className=\"apteva-tool-call-standalone\">\n <ToolCall\n name={segment.name}\n status={segment.result !== undefined ? 'completed' : 'running'}\n />\n </div>\n );\n }\n });\n\n return elements;\n };\n\n // For assistant messages with content segments (tool calls), render as separate bubbles\n if (!isUser && contentSegments && contentSegments.length > 0) {\n return (\n <div className=\"apteva-message-segmented\">\n {renderSegmentedContent()}\n\n {message.widgets && message.widgets.length > 0 && (\n <div className=\"apteva-widget-standalone\">\n <Widgets widgets={message.widgets} onAction={onAction} layout=\"stack\" />\n </div>\n )}\n\n <div className=\"apteva-message-timestamp apteva-message-timestamp-assistant\" suppressHydrationWarning>\n {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n </div>\n </div>\n );\n }\n\n // For assistant messages with widgets in content, render with separate bubbles\n const widgetContent = renderContentWithWidgets();\n if (!isUser && enableWidgets && widgetContent) {\n return (\n <div className=\"apteva-message-segmented\">\n {widgetContent}\n\n {message.widgets && message.widgets.length > 0 && (\n <div className=\"apteva-widget-standalone\">\n <Widgets widgets={message.widgets} onAction={onAction} layout=\"stack\" />\n </div>\n )}\n\n <div className=\"apteva-message-timestamp apteva-message-timestamp-assistant\" suppressHydrationWarning>\n {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={cn(\n 'apteva-message-bubble',\n isUser ? 'apteva-message-user' : 'apteva-message-assistant'\n )}\n >\n <div className={isUser ? 'apteva-message-content-user' : 'apteva-message-content-assistant'}>\n {renderContent()}\n </div>\n\n {message.widgets && message.widgets.length > 0 && (\n <div className=\"apteva-widget-standalone\">\n <Widgets widgets={message.widgets} onAction={onAction} layout=\"stack\" />\n </div>\n )}\n\n <div className={cn('apteva-message-timestamp', isUser ? 'apteva-message-timestamp-user' : 'apteva-message-timestamp-assistant')} suppressHydrationWarning>\n {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n </div>\n </div>\n );\n}\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { Message, Thread } from '../types/messages';\nimport { Widget } from '../types/widgets';\n\nexport const mockMessages: Message[] = [\n {\n id: 'msg-1',\n role: 'assistant',\n content: 'Hello! I\\'m your AI assistant. How can I help you today?',\n timestamp: new Date(Date.now() - 3600000),\n },\n {\n id: 'msg-2',\n role: 'user',\n content: 'I want to plan a trip to Europe',\n timestamp: new Date(Date.now() - 3500000),\n },\n {\n id: 'msg-3',\n role: 'assistant',\n content: 'Great choice! Europe has amazing destinations. What\\'s your budget and how many days do you have?',\n timestamp: new Date(Date.now() - 3400000),\n },\n {\n id: 'msg-4',\n role: 'user',\n content: 'Around $2000 for 5 days',\n timestamp: new Date(Date.now() - 3300000),\n },\n {\n id: 'msg-5',\n role: 'assistant',\n content: 'Perfect! I found some great destinations that fit your budget:',\n widgets: [\n {\n type: 'list',\n id: 'destinations-1',\n props: {\n items: [\n {\n id: 'paris',\n title: 'Paris, France',\n subtitle: '5 days • $1,850',\n description: 'The City of Light with iconic landmarks',\n metadata: { city: 'Paris', country: 'France', lat: 48.8566, lng: 2.3522, price: 1850, days: 5 },\n },\n {\n id: 'rome',\n title: 'Rome, Italy',\n subtitle: '5 days • $1,650',\n description: 'Ancient history meets modern culture',\n metadata: { city: 'Rome', country: 'Italy', lat: 41.9028, lng: 12.4964, price: 1650, days: 5 },\n },\n {\n id: 'barcelona',\n title: 'Barcelona, Spain',\n subtitle: '5 days • $1,450',\n description: 'Beautiful beaches and Gaudí architecture',\n metadata: { city: 'Barcelona', country: 'Spain', lat: 41.3851, lng: 2.1734, price: 1450, days: 5 },\n },\n ],\n },\n actions: [\n {\n type: 'select_destination',\n label: 'Select',\n handler: 'client',\n payload: {},\n },\n {\n type: 'view_details',\n label: 'Details',\n handler: 'server',\n payload: {},\n },\n ],\n },\n ],\n timestamp: new Date(Date.now() - 3200000),\n },\n];\n\nexport const mockThreads: Thread[] = [\n {\n id: 'thread-1',\n title: 'Trip to Europe',\n preview: 'Planning a 5-day trip...',\n createdAt: new Date(Date.now() - 86400000),\n updatedAt: new Date(Date.now() - 3600000),\n messageCount: 12,\n },\n {\n id: 'thread-2',\n title: 'Restaurant Recommendations',\n preview: 'Looking for good places...',\n createdAt: new Date(Date.now() - 172800000),\n updatedAt: new Date(Date.now() - 86400000),\n messageCount: 8,\n },\n {\n id: 'thread-3',\n title: 'Budget Planning',\n preview: 'Help with monthly budget',\n createdAt: new Date(Date.now() - 259200000),\n updatedAt: new Date(Date.now() - 172800000),\n messageCount: 15,\n },\n];\n\nexport const mockWidgets: Widget[] = [\n {\n type: 'card',\n id: 'card-1',\n props: {\n title: 'Paris, France',\n description: '5-day adventure in the City of Light',\n image: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34',\n footer: 'Total: $1,850',\n },\n actions: [\n {\n type: 'book_trip',\n label: 'Book Now',\n handler: 'client',\n payload: { tripId: 'trip-paris' },\n },\n ],\n },\n {\n type: 'card',\n id: 'card-2',\n props: {\n title: 'Rome, Italy',\n description: 'Explore ancient wonders',\n image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5',\n footer: 'Total: $1,650',\n },\n actions: [\n {\n type: 'book_trip',\n label: 'Book Now',\n handler: 'client',\n payload: { tripId: 'trip-rome' },\n },\n ],\n },\n];\n\nexport function generateMockResponse(delay: number = 1000): Promise<Message> {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n id: `msg-${Date.now()}`,\n role: 'assistant',\n content: 'This is a mock response. In production, this would come from your AI agent API.',\n timestamp: new Date(),\n });\n }, delay);\n });\n}\n\nexport function generateMockStreamingResponse(\n text: string,\n onChunk: (chunk: string) => void,\n typingSpeed: number = 30\n): Promise<void> {\n return new Promise((resolve) => {\n const words = text.split(' ');\n let currentIndex = 0;\n\n const interval = setInterval(() => {\n if (currentIndex < words.length) {\n onChunk(words[currentIndex] + ' ');\n currentIndex++;\n } else {\n clearInterval(interval);\n resolve();\n }\n }, typingSpeed);\n });\n}\n\n// Generate mock plan based on command content\nexport function generateMockPlan(command: string): string {\n const lowerCommand = command.toLowerCase();\n\n if (lowerCommand.includes('analyze') || lowerCommand.includes('analysis')) {\n return `**Plan:**\\n\\n1. Fetch data from the analytics database\\n2. Apply filters and aggregations\\n3. Calculate key metrics and trends\\n4. Generate visualization data\\n5. Compile insights and recommendations`;\n }\n\n if (lowerCommand.includes('sales') || lowerCommand.includes('revenue')) {\n return `**Plan:**\\n\\n1. Query sales records for the specified period\\n2. Calculate total revenue and growth rates\\n3. Break down performance by product category\\n4. Analyze regional distribution\\n5. Present findings in charts and summary`;\n }\n\n if (lowerCommand.includes('report') || lowerCommand.includes('summary')) {\n return `**Plan:**\\n\\n1. Gather data from all relevant sources\\n2. Aggregate metrics across categories\\n3. Identify key trends and anomalies\\n4. Generate executive summary\\n5. Create detailed breakdowns with visualizations`;\n }\n\n if (lowerCommand.includes('customer') || lowerCommand.includes('user')) {\n return `**Plan:**\\n\\n1. Pull customer data from CRM\\n2. Calculate engagement metrics\\n3. Segment users by behavior patterns\\n4. Analyze satisfaction scores\\n5. Generate customer insights report`;\n }\n\n if (lowerCommand.includes('task') || lowerCommand.includes('todo') || lowerCommand.includes('work') || lowerCommand.includes('completed')) {\n return `**Plan:**\\n\\n1. Retrieve task records from the database\\n2. Filter by status and date range\\n3. Organize by priority and category\\n4. Calculate completion metrics\\n5. Display in interactive list format`;\n }\n\n // Default plan\n return `**Plan:**\\n\\n1. Parse and understand the command requirements\\n2. Gather necessary data from available sources\\n3. Process and analyze the information\\n4. Format results for optimal presentation\\n5. Return response with any relevant visualizations`;\n}\n\n// Generate mock command response based on command content\nexport function generateMockCommandResponse(command: string): string {\n const lowerCommand = command.toLowerCase();\n\n if (lowerCommand.includes('analyze') || lowerCommand.includes('analysis')) {\n return `Analysis complete for \"${command}\". Found 247 records with an average value of $1,234. The data shows a 23% increase compared to last quarter. Key insights: Revenue is up, customer satisfaction improved by 15%, and operational costs decreased by 8%.`;\n }\n\n if (lowerCommand.includes('sales') || lowerCommand.includes('revenue')) {\n return `Sales data processed: Q4 2024 revenue reached $2.4M, representing 18% growth year-over-year. Top performing products: Enterprise Plan (+45%), Pro Plan (+32%), Basic Plan (+12%). Regional breakdown: North America (52%), Europe (31%), APAC (17%).`;\n }\n\n if (lowerCommand.includes('report') || lowerCommand.includes('summary')) {\n return `Report generated successfully. Executive Summary: Overall performance exceeded targets by 12%. Marketing ROI improved to 3.2x, customer acquisition cost reduced by 18%, and lifetime value increased by 24%. Detailed breakdown available in attached widgets.`;\n }\n\n if (lowerCommand.includes('data') || lowerCommand.includes('metrics')) {\n return `Data metrics retrieved: 1,847 active users, 12,394 sessions this month, 94.2% uptime, average response time 127ms. Performance is within acceptable parameters. No critical issues detected.`;\n }\n\n if (lowerCommand.includes('customer') || lowerCommand.includes('user')) {\n return `Customer analysis complete: 523 new customers this month, 89% retention rate, average satisfaction score 4.6/5. Top feedback themes: excellent support (87%), easy to use (72%), good value (68%). 3 support tickets pending review.`;\n }\n\n // Default response\n return `This is a mock response showing how your agent would process and respond to commands. The actual response would be generated by your AI agent based on real data and context.`;\n}\n\n// Generate mock command response with widgets\nexport function generateMockCommandWithWidgets(command: string): { message: string; widgets: Widget[]; action?: { type: string; payload: any } } {\n const message = generateMockCommandResponse(command);\n const lowerCommand = command.toLowerCase();\n\n let widgets: Widget[] = [];\n let action: { type: string; payload: any } | undefined;\n\n // Add relevant widgets based on command type\n if (lowerCommand.includes('sales') || lowerCommand.includes('revenue') || lowerCommand.includes('analyze')) {\n widgets.push({\n type: 'card',\n id: `widget-${Date.now()}-1`,\n props: {\n title: 'Q4 2024 Performance',\n description: 'Revenue: $2.4M (+18% YoY)',\n footer: 'Updated: ' + new Date().toLocaleDateString(),\n },\n actions: [\n {\n type: 'view_details',\n label: 'View Details',\n handler: 'client',\n payload: { reportId: 'q4-2024' },\n },\n ],\n });\n }\n\n if (lowerCommand.includes('customer') || lowerCommand.includes('user')) {\n widgets.push({\n type: 'list',\n id: `widget-${Date.now()}-2`,\n props: {\n items: [\n {\n id: 'metric-1',\n title: 'Active Users',\n subtitle: '1,847 users',\n description: '+12% from last month',\n },\n {\n id: 'metric-2',\n title: 'Retention Rate',\n subtitle: '89%',\n description: 'Above industry average',\n },\n {\n id: 'metric-3',\n title: 'Satisfaction Score',\n subtitle: '4.6/5',\n description: 'Based on 234 reviews',\n },\n ],\n },\n });\n }\n\n // Add task widget for task-related commands\n if (lowerCommand.includes('task') || lowerCommand.includes('todo') || lowerCommand.includes('work') || lowerCommand.includes('completed')) {\n widgets.push({\n type: 'list',\n id: `widget-${Date.now()}-tasks`,\n props: {\n items: [\n {\n id: 'task-1',\n title: 'Implement user authentication',\n subtitle: 'Created just now',\n description: 'Added OAuth 2.0 support with Google and GitHub providers',\n backgroundColor: 'rgba(59, 130, 246, 0.15)',\n metadata: {\n status: 'created',\n priority: 'high',\n tags: ['backend', 'security']\n }\n },\n {\n id: 'task-2',\n title: 'Update API documentation',\n subtitle: 'Modified 2 minutes ago',\n description: 'Changed endpoint descriptions and added new examples',\n backgroundColor: 'rgba(234, 179, 8, 0.15)',\n metadata: {\n status: 'modified',\n priority: 'medium',\n tags: ['docs']\n }\n },\n {\n id: 'task-3',\n title: 'Fix login redirect bug',\n subtitle: 'Completed 5 minutes ago',\n description: 'Users now properly redirected after successful login',\n backgroundColor: 'rgba(34, 197, 94, 0.15)',\n metadata: {\n status: 'completed',\n priority: 'urgent',\n tags: ['bugfix', 'auth']\n }\n }\n ],\n },\n actions: [\n {\n type: 'view_task',\n label: 'View',\n handler: 'client',\n payload: {}\n },\n {\n type: 'undo',\n label: 'Undo',\n handler: 'server',\n payload: {}\n }\n ]\n });\n\n // Agent also wants to update the database after showing tasks\n action = {\n type: 'update_database',\n payload: {\n table: 'tasks',\n operation: 'mark_as_viewed',\n taskIds: ['task-1', 'task-2', 'task-3'],\n timestamp: new Date().toISOString()\n }\n };\n }\n\n // Add agent action for analysis commands\n if (lowerCommand.includes('analyze') || lowerCommand.includes('analysis')) {\n action = {\n type: 'send_notification',\n payload: {\n recipient: 'team@company.com',\n subject: 'Analysis Complete',\n message: 'Your requested analysis has been completed and is ready for review.'\n }\n };\n }\n\n return { message, widgets, action };\n}\n\n// Simulate streaming command response\nexport function generateMockCommandStream(\n command: string,\n onChunk: (chunk: { type: 'token' | 'widget' | 'complete'; content?: string; widget?: Widget }) => void,\n onComplete: (threadId: string) => void,\n onError: (error: Error) => void,\n typingSpeed: number = 30\n): void {\n const { message, widgets } = generateMockCommandWithWidgets(command);\n const words = message.split(' ');\n let currentIndex = 0;\n\n const interval = setInterval(() => {\n try {\n if (currentIndex < words.length) {\n onChunk({ type: 'token', content: words[currentIndex] + ' ' });\n currentIndex++;\n } else {\n clearInterval(interval);\n\n // Send widgets after text is complete\n widgets.forEach(widget => {\n onChunk({ type: 'widget', widget });\n });\n\n // Signal completion\n const threadId = `mock_thread_${Date.now()}`;\n onChunk({ type: 'complete' });\n onComplete(threadId);\n }\n } catch (error) {\n clearInterval(interval);\n onError(error instanceof Error ? error : new Error('Mock streaming error'));\n }\n }, typingSpeed);\n}\n","/**\n * File utilities for converting files to base64 and creating content blocks\n */\n\nexport interface ContentBlock {\n type: 'text' | 'image' | 'document';\n text?: string;\n source?: {\n type: 'base64';\n media_type: string;\n data: string;\n };\n}\n\n/**\n * Convert a File to base64 string\n */\nexport function fileToBase64(file: File): Promise<string> {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n // Remove data URL prefix (e.g., \"data:image/png;base64,\")\n const base64 = result.split(',')[1];\n resolve(base64);\n };\n reader.onerror = () => reject(new Error('Failed to read file'));\n reader.readAsDataURL(file);\n });\n}\n\n/**\n * Determine the content block type based on file MIME type\n */\nexport function getContentBlockType(mimeType: string): 'image' | 'document' {\n if (mimeType.startsWith('image/')) {\n return 'image';\n }\n return 'document';\n}\n\n/**\n * Check if a file type is supported for upload\n */\nexport function isSupportedFileType(file: File): boolean {\n const supportedTypes = [\n // Images\n 'image/jpeg',\n 'image/png',\n 'image/gif',\n 'image/webp',\n // Documents\n 'application/pdf',\n 'text/plain',\n 'application/msword',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n ];\n return supportedTypes.includes(file.type);\n}\n\n/**\n * Convert a File to a content block for the agent API\n */\nexport async function fileToContentBlock(file: File): Promise<ContentBlock> {\n const base64 = await fileToBase64(file);\n const blockType = getContentBlockType(file.type);\n\n return {\n type: blockType,\n source: {\n type: 'base64',\n media_type: file.type,\n data: base64,\n },\n };\n}\n\n/**\n * Convert multiple files to content blocks\n */\nexport async function filesToContentBlocks(files: FileList | File[]): Promise<ContentBlock[]> {\n const fileArray = Array.from(files);\n const blocks = await Promise.all(\n fileArray.map(file => fileToContentBlock(file))\n );\n return blocks;\n}\n\n/**\n * Build a structured message with text and file attachments\n */\nexport async function buildMessageWithAttachments(\n text: string,\n files?: FileList | File[]\n): Promise<string | ContentBlock[]> {\n // If no files, return simple text\n if (!files || files.length === 0) {\n return text;\n }\n\n // Build content blocks array\n const blocks: ContentBlock[] = [];\n\n // Add text block first if there's text\n if (text.trim()) {\n blocks.push({ type: 'text', text: text.trim() });\n }\n\n // Convert files to content blocks\n const fileBlocks = await filesToContentBlocks(files);\n blocks.push(...fileBlocks);\n\n return blocks;\n}\n\n/**\n * Get a human-readable file size string\n */\nexport function formatFileSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\n/**\n * Maximum file size (10MB)\n */\nexport const MAX_FILE_SIZE = 10 * 1024 * 1024;\n\n/**\n * Validate file for upload\n */\nexport function validateFile(file: File): { valid: boolean; error?: string } {\n if (!isSupportedFileType(file)) {\n return { valid: false, error: `Unsupported file type: ${file.type}` };\n }\n if (file.size > MAX_FILE_SIZE) {\n return { valid: false, error: `File too large: ${formatFileSize(file.size)} (max ${formatFileSize(MAX_FILE_SIZE)})` };\n }\n return { valid: true };\n}\n","import { Widget } from '../types/widgets';\n\nexport interface ParsedSegment {\n type: 'text' | 'widget' | 'widget_pending';\n content?: string;\n widget?: Widget;\n pendingType?: string; // Widget type being streamed\n}\n\nexport interface ParsedContent {\n segments: ParsedSegment[];\n hasWidgets: boolean;\n hasPendingWidget: boolean;\n}\n\n/**\n * Simple hash function to generate stable IDs from content\n */\nfunction simpleHash(str: string): string {\n let hash = 0;\n for (let i = 0; i < str.length; i++) {\n const char = str.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n return Math.abs(hash).toString(36);\n}\n\n/**\n * Find the matching closing bracket, handling nested brackets\n */\nfunction findMatchingBracket(text: string, startIndex: number): number {\n let depth = 0;\n let inString = false;\n let escapeNext = false;\n\n for (let i = startIndex; i < text.length; i++) {\n const char = text[i];\n\n if (escapeNext) {\n escapeNext = false;\n continue;\n }\n\n if (char === '\\\\' && inString) {\n escapeNext = true;\n continue;\n }\n\n if (char === '\"') {\n inString = !inString;\n continue;\n }\n\n if (inString) continue;\n\n if (char === '[' || char === '{') {\n depth++;\n } else if (char === ']' || char === '}') {\n depth--;\n if (depth === 0) {\n return i;\n }\n }\n }\n\n return -1; // No match found\n}\n\n/**\n * Parse text content and extract widgets from @ui:type[{props}] syntax\n */\nexport function parseWidgetsFromText(text: string): ParsedContent {\n const segments: ParsedSegment[] = [];\n let hasWidgets = false;\n let hasPendingWidget = false;\n let currentIndex = 0;\n let pendingWidgetType: string | null = null;\n\n // First, check if there's an incomplete widget at the end\n let processText = text;\n const lastWidgetStart = text.lastIndexOf('@ui:');\n\n if (lastWidgetStart !== -1) {\n // Check if this last @ui: pattern is complete\n const afterStart = text.slice(lastWidgetStart);\n const typeMatch = afterStart.match(/^@ui:(\\w+)/);\n\n if (typeMatch) {\n const widgetType = typeMatch[1];\n const bracketOpenIndex = afterStart.indexOf('[');\n\n if (bracketOpenIndex === -1) {\n // No opening bracket yet - incomplete, show skeleton\n processText = text.slice(0, lastWidgetStart);\n pendingWidgetType = widgetType;\n hasPendingWidget = true;\n } else {\n // Has opening bracket, check if it's closed\n const fullBracketStart = lastWidgetStart + bracketOpenIndex;\n const bracketEnd = findMatchingBracket(text, fullBracketStart);\n\n if (bracketEnd === -1) {\n // Bracket not closed - incomplete widget, show skeleton\n processText = text.slice(0, lastWidgetStart);\n pendingWidgetType = widgetType;\n hasPendingWidget = true;\n }\n }\n }\n }\n\n // Clean up trailing whitespace before pending widget\n if (hasPendingWidget) {\n processText = processText.replace(/[\\s:;\\-–—\\.]+$/g, '');\n }\n\n // Pattern to find @ui:type[ starts\n const startPattern = /@ui:(\\w+)\\[/g;\n\n let match;\n while ((match = startPattern.exec(processText)) !== null) {\n const widgetType = match[1];\n const bracketStart = match.index + match[0].length - 1; // Position of '['\n\n // Find the matching ']'\n const bracketEnd = findMatchingBracket(processText, bracketStart);\n\n if (bracketEnd === -1) {\n // No matching bracket - shouldn't happen after pre-processing, but skip just in case\n continue;\n }\n\n // Extract the JSON content (everything between [ and ])\n const jsonContent = processText.slice(bracketStart + 1, bracketEnd);\n\n // Add text before the widget\n if (match.index > currentIndex) {\n const textContent = processText.slice(currentIndex, match.index).trim();\n if (textContent) {\n segments.push({\n type: 'text',\n content: textContent\n });\n }\n }\n\n // Parse and add the widget\n try {\n // Trim and normalize JSON content\n const trimmedJson = jsonContent.trim();\n const parsed = JSON.parse(trimmedJson);\n // Generate stable ID based on widget type and content\n const widgetId = `widget-${widgetType}-${simpleHash(trimmedJson)}`;\n\n // Extract meta field if present, rest goes to props\n const { meta, ...props } = parsed;\n\n segments.push({\n type: 'widget',\n widget: {\n type: widgetType,\n id: widgetId,\n props,\n ...(meta && { meta })\n }\n });\n hasWidgets = true;\n } catch (e) {\n // JSON parsing failed - hide the raw syntax entirely\n }\n\n currentIndex = bracketEnd + 1;\n startPattern.lastIndex = currentIndex;\n }\n\n // Add remaining text (already cleaned of incomplete widgets)\n if (currentIndex < processText.length) {\n const remainingText = processText.slice(currentIndex).trim();\n if (remainingText) {\n segments.push({\n type: 'text',\n content: remainingText\n });\n }\n }\n\n // If no segments were created, use the processed text\n if (segments.length === 0 && processText.trim()) {\n segments.push({\n type: 'text',\n content: processText.trim()\n });\n }\n\n // Add pending widget skeleton at the end if we detected one\n if (pendingWidgetType) {\n segments.push({\n type: 'widget_pending',\n pendingType: pendingWidgetType\n });\n }\n\n return { segments, hasWidgets, hasPendingWidget };\n}\n\n/**\n * Check if text contains any widget syntax\n */\nexport function containsWidgets(text: string): boolean {\n return /@ui:\\w+\\[/.test(text);\n}\n\n/**\n * Strip widget syntax from text, returning only plain text content\n */\nexport function stripWidgets(text: string): string {\n const parsed = parseWidgetsFromText(text);\n return parsed.segments\n .filter(s => s.type === 'text' && s.content)\n .map(s => s.content)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n}\n","/**\n * Widget definitions for context injection\n */\nexport const WIDGET_DEFINITIONS = {\n card: {\n schema: 'title, description?, image?, footer?',\n example: '@ui:card[{\"title\": \"Summary\", \"description\": \"Details here\"}]'\n },\n list: {\n schema: 'items: [{id, title, subtitle?, description?}]',\n example: '@ui:list[{\"items\": [{\"id\": \"1\", \"title\": \"Item\", \"subtitle\": \"Info\"}]}]'\n },\n button_group: {\n schema: 'buttons: [{id, label, variant?}]',\n example: '@ui:button_group[{\"buttons\": [{\"id\": \"ok\", \"label\": \"OK\"}]}]'\n },\n form: {\n schema: 'fields: [{name, type, label, required?}]',\n example: '@ui:form[{\"fields\": [{\"name\": \"email\", \"type\": \"text\", \"label\": \"Email\"}]}]'\n },\n table: {\n schema: 'columns: [{key, label}], rows: [...]',\n example: '@ui:table[{\"columns\": [{\"key\": \"name\", \"label\": \"Name\"}], \"rows\": [{\"name\": \"A\"}]}]'\n },\n image: {\n schema: 'src, alt, caption?',\n example: '@ui:image[{\"src\": \"url\", \"alt\": \"desc\"}]'\n },\n chart: {\n schema: 'chartType: line|bar|pie, data: {labels, datasets}',\n example: '@ui:chart[{\"chartType\": \"bar\", \"data\": {\"labels\": [\"A\"], \"datasets\": [{\"label\": \"X\", \"data\": [10]}]}}]'\n }\n} as const;\n\nexport type WidgetType = keyof typeof WIDGET_DEFINITIONS;\n\nexport const ALL_WIDGET_TYPES: WidgetType[] = Object.keys(WIDGET_DEFINITIONS) as WidgetType[];\n\n/**\n * Generate system prompt context describing available widgets\n */\nexport function generateWidgetContext(enabledWidgets?: WidgetType[]): string {\n const widgets = enabledWidgets || ALL_WIDGET_TYPES;\n\n let context = `\\n## UI Widgets\\nRender widgets: @ui:type[{props}]. \"meta\" field (at root level, NOT inside items) holds extended data captured by UI.\\n\\n`;\n\n for (const type of widgets) {\n const def = WIDGET_DEFINITIONS[type];\n if (!def) continue;\n context += `${type}: ${def.schema} | ${def.example}\\n`;\n }\n\n context += `\\nMeta: @ui:list[{\"items\": [{\"id\": \"1\", \"title\": \"X\"}], \"meta\": {\"items\": [{\"id\": \"1\", \"title\": \"X\", \"extra\": \"...\"}]}}]\\n`;\n\n return context;\n}\n\n/**\n * Generate a compact version of widget context\n */\nexport function generateCompactWidgetContext(enabledWidgets?: WidgetType[]): string {\n const widgets = enabledWidgets || ALL_WIDGET_TYPES;\n return `\\nWidgets: @ui:type[{props}]. Types: ${widgets.join(', ')}. Add \"meta\" at root (not inside items) for extended data.\\n`;\n}\n","import { useEffect } from 'react';\nimport { WidgetsProps } from '../../types/components';\nimport { WidgetRenderer } from './WidgetRenderer';\nimport { cn } from '../../utils';\n\nexport function Widgets({\n widgets,\n onAction,\n onWidgetMount,\n layout = 'stack',\n spacing = 'normal',\n columns = 3,\n className,\n}: WidgetsProps) {\n useEffect(() => {\n widgets.forEach((widget) => {\n onWidgetMount?.(widget.id);\n });\n }, [widgets, onWidgetMount]);\n\n const layoutClasses = {\n stack: 'flex flex-col',\n grid: `grid grid-cols-1 md:grid-cols-${columns}`,\n masonry: 'columns-1 md:columns-2 lg:columns-3',\n };\n\n const spacingClasses = {\n tight: 'gap-2',\n normal: 'gap-4',\n loose: 'gap-6',\n };\n\n return (\n <div className={cn(layoutClasses[layout], spacingClasses[spacing], className)}>\n {widgets.map((widget) => (\n <WidgetRenderer key={widget.id} widget={widget} onAction={onAction} />\n ))}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { CardWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\n\ninterface CardProps {\n widget: CardWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Card({ widget, onAction }: CardProps) {\n const { title, description, image, footer } = widget.props;\n\n return (\n <div className=\"border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden\">\n {image && <img src={image} alt={title} className=\"w-full h-48 object-cover\" />}\n\n <div className=\"p-4\">\n <h3 className=\"!text-lg font-semibold !text-neutral-900 dark:!text-white\">{title}</h3>\n {description && <p className=\"!text-neutral-600 dark:!text-neutral-400 mt-2\">{description}</p>}\n </div>\n\n {(footer || (widget.actions && widget.actions.length > 0)) && (\n <div className=\"border-t border-neutral-200 dark:border-neutral-700 p-4 flex justify-between items-center\">\n {footer && <span className=\"!text-sm !text-neutral-600 dark:!text-neutral-400\">{footer}</span>}\n\n {widget.actions && widget.actions.length > 0 && (\n <div className=\"flex gap-2\">\n {widget.actions.map((action, idx) => (\n <button\n key={idx}\n onClick={() =>\n onAction?.({\n type: action.type,\n payload: action.payload,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n className=\"px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600\"\n >\n {action.label}\n </button>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { ListWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\n\ninterface ListProps {\n widget: ListWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function List({ widget, onAction }: ListProps) {\n const { items } = widget.props;\n\n return (\n <div className=\"border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden\">\n {items.map((item, index) => (\n <div\n key={item.id}\n className={`flex items-center p-4 transition-colors ${\n index !== items.length - 1 ? 'border-b border-neutral-200 dark:border-neutral-700' : ''\n } ${!item.backgroundColor ? 'hover:bg-neutral-50 dark:hover:bg-neutral-800' : ''}`}\n style={item.backgroundColor ? { backgroundColor: item.backgroundColor } : undefined}\n >\n {item.image && <img src={item.image} alt={item.title} className=\"w-16 h-16 rounded object-cover\" />}\n\n <div className={`flex-1 ${item.image ? 'ml-4' : ''}`}>\n <h4 className=\"font-semibold !text-neutral-900 dark:!text-white\">{item.title}</h4>\n {item.subtitle && <p className=\"!text-sm !text-neutral-600 dark:!text-neutral-400\">{item.subtitle}</p>}\n {item.description && (\n <p className=\"!text-xs !text-neutral-500 dark:!text-neutral-500 mt-1\">{item.description}</p>\n )}\n </div>\n\n {widget.actions && widget.actions.length > 0 && (\n <div className=\"flex gap-2\">\n {widget.actions.map((action, idx) => (\n <button\n key={idx}\n onClick={() =>\n onAction?.({\n type: action.type,\n payload: item.metadata || item,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n className=\"px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600\"\n >\n {action.label}\n </button>\n ))}\n </div>\n )}\n </div>\n ))}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { ButtonWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\nimport { cn } from '../../../utils';\n\ninterface ButtonProps {\n widget: ButtonWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Button({ widget, onAction }: ButtonProps) {\n const { label, variant = 'primary', disabled = false } = widget.props;\n\n const variantClasses = {\n primary: 'bg-blue-500 !text-white hover:bg-blue-600',\n secondary: 'bg-neutral-500 !text-white hover:bg-neutral-600',\n outline: 'border-2 border-blue-500 !text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900',\n ghost: '!text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900',\n };\n\n return (\n <button\n onClick={() =>\n widget.actions?.[0] &&\n onAction?.({\n type: widget.actions[0].type,\n payload: widget.actions[0].payload,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n disabled={disabled}\n className={cn('px-4 py-2 rounded-lg font-medium transition-colors', variantClasses[variant], {\n 'opacity-50 cursor-not-allowed': disabled,\n })}\n >\n {label}\n </button>\n );\n}\n","import { ButtonGroupWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\nimport { cn } from '../../../utils';\n\ninterface ButtonGroupProps {\n widget: ButtonGroupWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function ButtonGroup({ widget, onAction }: ButtonGroupProps) {\n const { layout = 'horizontal', buttons } = widget.props;\n\n const variantClasses = {\n primary: 'bg-blue-500 !text-white hover:bg-blue-600',\n secondary: 'bg-neutral-200 dark:bg-neutral-700 !text-neutral-800 dark:!text-neutral-200 hover:bg-neutral-300 dark:hover:bg-neutral-600',\n outline: 'border border-neutral-300 dark:border-neutral-600 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800',\n };\n\n // Find action for a specific button by id\n const getActionForButton = (buttonId: string) => {\n return widget.actions?.find(action => action.payload?.buttonId === buttonId) || widget.actions?.[0];\n };\n\n return (\n <div\n className={cn(\n 'flex gap-2',\n layout === 'vertical' ? 'flex-col' : 'flex-row flex-wrap'\n )}\n >\n {buttons.map((button) => {\n const action = getActionForButton(button.id);\n return (\n <button\n key={button.id}\n onClick={() => {\n if (action) {\n onAction?.({\n type: action.type,\n payload: { ...action.payload, buttonId: button.id },\n widgetId: widget.id,\n timestamp: new Date(),\n });\n }\n }}\n className={cn(\n 'px-4 py-2 rounded-lg font-medium transition-colors text-sm',\n variantClasses[button.variant || 'secondary']\n )}\n >\n {button.label}\n </button>\n );\n })}\n </div>\n );\n}\n","import { TableWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\nimport { cn } from '../../../utils/cn';\n\ninterface TableProps {\n widget: TableWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Table({ widget, onAction }: TableProps) {\n const { columns, rows, caption, compact = false, striped = false } = widget.props;\n\n const getAlignment = (align?: 'left' | 'center' | 'right') => {\n switch (align) {\n case 'center': return 'text-center';\n case 'right': return 'text-right';\n default: return 'text-left';\n }\n };\n\n return (\n <div className=\"border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden\">\n <div className=\"overflow-x-auto\">\n <table className=\"w-full\">\n {caption && (\n <caption className=\"px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400 text-left bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700\">\n {caption}\n </caption>\n )}\n <thead>\n <tr className=\"bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700\">\n {columns.map((column) => (\n <th\n key={column.key}\n className={cn(\n 'font-semibold text-neutral-900 dark:text-white',\n compact ? 'px-3 py-2 text-xs' : 'px-4 py-3 text-sm',\n getAlignment(column.align)\n )}\n style={column.width ? { width: column.width } : undefined}\n >\n {column.label}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map((row, rowIndex) => (\n <tr\n key={row.id || rowIndex}\n className={cn(\n 'border-b border-neutral-200 dark:border-neutral-700 last:border-b-0',\n 'transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800',\n striped && rowIndex % 2 === 1 && 'bg-neutral-50/50 dark:bg-neutral-800/50'\n )}\n onClick={() => {\n if (widget.actions && widget.actions.length > 0) {\n onAction?.({\n type: widget.actions[0].type,\n payload: row,\n widgetId: widget.id,\n timestamp: new Date(),\n });\n }\n }}\n style={{ cursor: widget.actions?.length ? 'pointer' : 'default' }}\n >\n {columns.map((column) => (\n <td\n key={column.key}\n className={cn(\n 'text-neutral-700 dark:text-neutral-300',\n compact ? 'px-3 py-2 text-xs' : 'px-4 py-3 text-sm',\n getAlignment(column.align)\n )}\n >\n {row[column.key] ?? '—'}\n </td>\n ))}\n </tr>\n ))}\n {rows.length === 0 && (\n <tr>\n <td\n colSpan={columns.length}\n className=\"px-4 py-8 text-center text-sm text-neutral-500 dark:text-neutral-400\"\n >\n No data available\n </td>\n </tr>\n )}\n </tbody>\n </table>\n </div>\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { Widget } from '../../types/widgets';\nimport { ActionEvent } from '../../types/actions';\nimport { Card, List, Button, ButtonGroup, Table } from './widget-library';\n\ninterface WidgetRendererProps {\n widget: Widget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function WidgetRenderer({ widget, onAction }: WidgetRendererProps) {\n switch (widget.type) {\n case 'card':\n return <Card widget={widget as any} onAction={onAction} />;\n case 'list':\n return <List widget={widget as any} onAction={onAction} />;\n case 'button':\n return <Button widget={widget as any} onAction={onAction} />;\n case 'button_group':\n return <ButtonGroup widget={widget as any} onAction={onAction} />;\n case 'table':\n return <Table widget={widget as any} onAction={onAction} />;\n default:\n return (\n <div className=\"p-4 border border-yellow-300 bg-yellow-50 rounded-lg\">\n <p className=\"text-sm text-yellow-800\">Unknown widget type: {widget.type}</p>\n <pre className=\"text-xs mt-2 overflow-auto\">{JSON.stringify(widget, null, 2)}</pre>\n </div>\n );\n }\n}\n","import { cn } from '../../utils/cn';\n\ninterface WidgetSkeletonProps {\n type: string;\n className?: string;\n}\n\nexport function WidgetSkeleton({ type, className }: WidgetSkeletonProps) {\n // Render different skeletons based on widget type\n // Using neutral colors for true black/white theme\n switch (type) {\n case 'card':\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden', className)}>\n <div className=\"p-4 space-y-3\">\n <div className=\"h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4\"></div>\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full\"></div>\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6\"></div>\n </div>\n </div>\n );\n\n case 'list':\n return (\n <div className={cn('animate-pulse space-y-2', className)}>\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"flex items-center gap-3 p-3 rounded-lg border border-neutral-200 dark:border-neutral-800\">\n <div className=\"w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0\"></div>\n <div className=\"flex-1 space-y-2\">\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2\"></div>\n <div className=\"h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4\"></div>\n </div>\n </div>\n ))}\n </div>\n );\n\n case 'button_group':\n return (\n <div className={cn('animate-pulse flex gap-2', className)}>\n <div className=\"h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20\"></div>\n <div className=\"h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20\"></div>\n <div className=\"h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20\"></div>\n </div>\n );\n\n case 'form':\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-4', className)}>\n <div className=\"h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3\"></div>\n <div className=\"space-y-3\">\n <div className=\"h-10 bg-neutral-200 dark:bg-neutral-700 rounded\"></div>\n <div className=\"h-10 bg-neutral-200 dark:bg-neutral-700 rounded\"></div>\n </div>\n <div className=\"h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24\"></div>\n </div>\n );\n\n case 'chart':\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4', className)}>\n <div className=\"h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4\"></div>\n <div className=\"flex items-end gap-2 h-32\">\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2\"></div>\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4\"></div>\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3\"></div>\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full\"></div>\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3\"></div>\n </div>\n </div>\n );\n\n case 'image':\n return (\n <div className={cn('animate-pulse', className)}>\n <div className=\"aspect-video bg-neutral-200 dark:bg-neutral-700 rounded-lg\"></div>\n </div>\n );\n\n case 'gallery':\n return (\n <div className={cn('animate-pulse grid grid-cols-3 gap-2', className)}>\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg\"></div>\n ))}\n </div>\n );\n\n case 'map':\n return (\n <div className={cn('animate-pulse', className)}>\n <div className=\"h-48 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex items-center justify-center\">\n <svg className=\"w-8 h-8 text-neutral-400 dark:text-neutral-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n </svg>\n </div>\n </div>\n );\n\n case 'table':\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden', className)}>\n {/* Header */}\n <div className=\"flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700\">\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-16\"></div>\n </div>\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-20\"></div>\n </div>\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-14\"></div>\n </div>\n </div>\n {/* Rows */}\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0\">\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-24\"></div>\n </div>\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-16\"></div>\n </div>\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-20\"></div>\n </div>\n </div>\n ))}\n </div>\n );\n\n default:\n // Generic skeleton for unknown widget types\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4', className)}>\n <div className=\"h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2\"></div>\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full\"></div>\n </div>\n );\n }\n}\n","import React from 'react';\n\ninterface MarkdownContentProps {\n content: string;\n className?: string;\n}\n\n// Check if URL points to an image\nfunction isImageUrl(url: string): boolean {\n const imageExtensions = /\\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\\?.*)?$/i;\n return imageExtensions.test(url);\n}\n\nfunction parseInlineMarkdown(text: string, keyPrefix: string = ''): React.ReactNode[] {\n const result: React.ReactNode[] = [];\n // Combined regex for inline elements:\n // 1. Images: ![alt](url)\n // 2. Links: [text](url)\n // 3. Bold: **text** or __text__\n // 4. Inline code: `code`\n const inlineRegex = /!\\[([^\\]]*)\\]\\(([^)]+)\\)|\\[([^\\]]+)\\]\\(([^)]+)\\)|(\\*\\*|__)(.+?)\\5|`([^`]+)`/g;\n\n let lastIndex = 0;\n let match;\n let key = 0;\n\n while ((match = inlineRegex.exec(text)) !== null) {\n // Add text before the match\n if (match.index > lastIndex) {\n result.push(text.slice(lastIndex, match.index));\n }\n\n if (match[1] !== undefined || match[2] !== undefined) {\n // Image: ![alt](url)\n const alt = match[1] || '';\n const src = match[2];\n result.push(\n <img\n key={`${keyPrefix}img${key++}`}\n src={src}\n alt={alt}\n className=\"apteva-md-img\"\n />\n );\n } else if (match[3] !== undefined || match[4] !== undefined) {\n // Link: [text](url)\n const linkText = match[3];\n const href = match[4];\n\n // Check if link URL is an image - render as image instead\n if (isImageUrl(href)) {\n result.push(\n <img\n key={`${keyPrefix}img${key++}`}\n src={href}\n alt={linkText}\n className=\"apteva-md-img\"\n />\n );\n } else {\n result.push(\n <a\n key={`${keyPrefix}a${key++}`}\n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"apteva-md-link\"\n >\n {linkText}\n </a>\n );\n }\n } else if (match[5] !== undefined) {\n // Bold: **text** or __text__\n result.push(<strong key={`${keyPrefix}b${key++}`}>{match[6]}</strong>);\n } else if (match[7] !== undefined) {\n // Inline code: `code`\n result.push(\n <code key={`${keyPrefix}code${key++}`} className=\"apteva-md-inline-code\">\n {match[7]}\n </code>\n );\n }\n\n lastIndex = match.index + match[0].length;\n }\n\n // Add remaining text\n if (lastIndex < text.length) {\n result.push(text.slice(lastIndex));\n }\n\n return result.length > 0 ? result : [text];\n}\n\nfunction parseMarkdown(content: string): React.ReactNode[] {\n const lines = content.split('\\n');\n const result: React.ReactNode[] = [];\n let key = 0;\n let i = 0;\n\n while (i < lines.length) {\n const line = lines[i];\n\n // Check for headings (## or ###)\n const h2Match = line.match(/^##\\s+(.*)$/);\n if (h2Match) {\n result.push(\n <h2 key={`h2${key++}`} className=\"apteva-md-h2\">\n {parseInlineMarkdown(h2Match[1], `${key}`)}\n </h2>\n );\n i++;\n continue;\n }\n\n const h3Match = line.match(/^###\\s+(.*)$/);\n if (h3Match) {\n result.push(\n <h3 key={`h3${key++}`} className=\"apteva-md-h3\">\n {parseInlineMarkdown(h3Match[1], `${key}`)}\n </h3>\n );\n i++;\n continue;\n }\n\n // Check for unordered list item (-, *, +)\n const ulMatch = line.match(/^(\\s*)([-*+])\\s+(.*)$/);\n if (ulMatch) {\n const listItems: React.ReactNode[] = [];\n const indent = ulMatch[1].length;\n\n while (i < lines.length) {\n const itemMatch = lines[i].match(/^(\\s*)([-*+])\\s+(.*)$/);\n if (itemMatch && itemMatch[1].length === indent) {\n listItems.push(\n <li key={`li${key++}`} className=\"apteva-md-li\">{parseInlineMarkdown(itemMatch[3], `${key}`)}</li>\n );\n i++;\n } else {\n break;\n }\n }\n\n result.push(\n <ul key={`ul${key++}`} className=\"apteva-md-ul\">\n {listItems}\n </ul>\n );\n continue;\n }\n\n // Check for ordered list item (1., 2., etc.)\n const olMatch = line.match(/^(\\s*)(\\d+)\\.\\s+(.*)$/);\n if (olMatch) {\n const listItems: React.ReactNode[] = [];\n const indent = olMatch[1].length;\n\n while (i < lines.length) {\n const itemMatch = lines[i].match(/^(\\s*)(\\d+)\\.\\s+(.*)$/);\n if (itemMatch && itemMatch[1].length === indent) {\n listItems.push(\n <li key={`li${key++}`} className=\"apteva-md-li\">{parseInlineMarkdown(itemMatch[3], `${key}`)}</li>\n );\n i++;\n } else {\n break;\n }\n }\n\n result.push(\n <ol key={`ol${key++}`} className=\"apteva-md-ol\">\n {listItems}\n </ol>\n );\n continue;\n }\n\n // Check for markdown table\n const tableMatch = line.match(/^\\|(.+)\\|$/);\n if (tableMatch && i + 1 < lines.length) {\n // Check if next line is separator (|---|---|)\n const separatorLine = lines[i + 1];\n const separatorMatch = separatorLine.match(/^\\|([\\s:-]+\\|)+$/);\n\n if (separatorMatch) {\n // Parse header\n const headerCells = line.split('|').filter(cell => cell.trim() !== '').map(cell => cell.trim());\n\n // Skip header and separator lines\n i += 2;\n\n // Parse body rows\n const bodyRows: string[][] = [];\n while (i < lines.length) {\n const rowMatch = lines[i].match(/^\\|(.+)\\|$/);\n if (rowMatch) {\n const cells = lines[i].split('|').filter(cell => cell.trim() !== '').map(cell => cell.trim());\n bodyRows.push(cells);\n i++;\n } else {\n break;\n }\n }\n\n result.push(\n <div key={`table-wrapper${key++}`} className=\"apteva-md-table-wrapper\">\n <table className=\"apteva-md-table\">\n <thead>\n <tr>\n {headerCells.map((cell, idx) => (\n <th key={`th${idx}`} className=\"apteva-md-th\">{parseInlineMarkdown(cell, `th${key}${idx}`)}</th>\n ))}\n </tr>\n </thead>\n <tbody>\n {bodyRows.map((row, rowIdx) => (\n <tr key={`tr${rowIdx}`}>\n {row.map((cell, cellIdx) => (\n <td key={`td${cellIdx}`} className=\"apteva-md-td\">{parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`)}</td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n continue;\n }\n }\n\n // Regular line - parse inline markdown and preserve line breaks\n if (line === '') {\n result.push(<br key={`br${key++}`} />);\n } else {\n result.push(\n <span key={`p${key++}`}>\n {parseInlineMarkdown(line, `${key}`)}\n {i < lines.length - 1 ? '\\n' : ''}\n </span>\n );\n }\n i++;\n }\n\n return result;\n}\n\nexport function MarkdownContent({ content, className = '' }: MarkdownContentProps) {\n return (\n <div className={`apteva-md ${className}`}>\n {parseMarkdown(content)}\n </div>\n );\n}\n","interface ToolCallProps {\n name: string;\n status: 'running' | 'completed' | 'error';\n}\n\nexport function ToolCall({ name, status }: ToolCallProps) {\n if (status === 'running') {\n return (\n <div className=\"apteva-tool-card apteva-tool-card-running\">\n <svg className=\"apteva-tool-icon apteva-tool-icon-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"apteva-tool-spinner-track\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n <path className=\"apteva-tool-spinner-fill\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"></path>\n </svg>\n <span className=\"apteva-tool-label\">{name}</span>\n </div>\n );\n }\n\n if (status === 'completed') {\n return (\n <div className=\"apteva-tool-card apteva-tool-card-completed\">\n <svg className=\"apteva-tool-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\"></path>\n </svg>\n <span className=\"apteva-tool-label\">{name}</span>\n </div>\n );\n }\n\n // Error state\n return (\n <div className=\"apteva-tool-card apteva-tool-card-error\">\n <svg className=\"apteva-tool-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\"></path>\n </svg>\n <span className=\"apteva-tool-label\">{name} failed</span>\n </div>\n );\n}\n","import { SuggestedPrompt } from '../../types/components';\nimport { cn } from '../../utils';\n\ninterface WelcomeScreenProps {\n title?: string;\n subtitle?: string;\n icon?: React.ReactNode;\n prompts?: (string | SuggestedPrompt)[];\n variant?: 'centered' | 'minimal';\n onPromptClick: (prompt: string) => void;\n}\n\n// Default icon - chat bubble\nconst DefaultIcon = () => (\n <svg className=\"w-12 h-12 sm:w-16 sm:h-16\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"\n />\n </svg>\n);\n\n// Default prompt icons\nconst ArrowIcon = () => (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 7l5 5m0 0l-5 5m5-5H6\" />\n </svg>\n);\n\nexport function WelcomeScreen({\n title,\n subtitle,\n icon,\n prompts,\n variant = 'centered',\n onPromptClick,\n}: WelcomeScreenProps) {\n // Normalize prompts to SuggestedPrompt format\n const normalizedPrompts: SuggestedPrompt[] = (prompts || []).map((p) =>\n typeof p === 'string' ? { text: p } : p\n );\n\n const hasPrompts = normalizedPrompts.length > 0;\n const hasHeader = title || subtitle || icon;\n\n // If nothing to show, render default empty state\n if (!hasHeader && !hasPrompts) {\n return (\n <div className=\"flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400\">\n <div className=\"text-center space-y-2\">\n <div className=\"flex justify-center\">\n <DefaultIcon />\n </div>\n <p className=\"text-sm\">No messages yet. Start a conversation!</p>\n </div>\n </div>\n );\n }\n\n // Minimal variant - just prompts as a list (good for mobile/embedded)\n if (variant === 'minimal') {\n return (\n <div className=\"flex flex-col h-full px-4 py-4\">\n {hasHeader && (\n <div className=\"mb-4\">\n {title && (\n <h2 className=\"text-lg font-semibold !text-neutral-900 dark:!text-white\">{title}</h2>\n )}\n {subtitle && (\n <p className=\"text-sm !text-neutral-500 dark:!text-neutral-400 mt-1\">{subtitle}</p>\n )}\n </div>\n )}\n {hasPrompts && (\n <div className=\"flex-1 space-y-2\">\n {normalizedPrompts.map((prompt, index) => (\n <button\n key={index}\n onClick={() => onPromptClick(prompt.text)}\n className={cn(\n 'w-full text-left px-4 py-3 rounded-xl',\n 'bg-neutral-50 dark:bg-neutral-800/50',\n 'border border-neutral-200 dark:border-neutral-700',\n 'hover:bg-neutral-100 dark:hover:bg-neutral-800',\n 'hover:border-neutral-300 dark:hover:border-neutral-600',\n 'transition-all duration-200',\n 'group'\n )}\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors\">\n {prompt.icon || <ArrowIcon />}\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium !text-neutral-900 dark:!text-white truncate\">\n {prompt.text}\n </p>\n {prompt.description && (\n <p className=\"text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate\">\n {prompt.description}\n </p>\n )}\n </div>\n </div>\n </button>\n ))}\n </div>\n )}\n </div>\n );\n }\n\n // Centered variant - hero style with grid of prompts (default)\n return (\n <div className=\"flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8\">\n {/* Header Section */}\n <div className=\"text-center mb-6 sm:mb-8 max-w-md\">\n {/* Icon */}\n <div className=\"mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center\">\n {icon || <DefaultIcon />}\n </div>\n\n {/* Title */}\n {title && (\n <h1 className=\"text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2\">\n {title}\n </h1>\n )}\n\n {/* Subtitle */}\n {subtitle && (\n <p className=\"text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400\">{subtitle}</p>\n )}\n </div>\n\n {/* Prompts Section */}\n {hasPrompts && (\n <div className=\"w-full max-w-2xl\">\n {/* Mobile: Vertical list */}\n <div className=\"sm:hidden space-y-2\">\n {normalizedPrompts.map((prompt, index) => (\n <button\n key={index}\n onClick={() => onPromptClick(prompt.text)}\n className={cn(\n 'w-full text-left px-4 py-3 rounded-xl',\n 'bg-white dark:bg-neutral-800',\n 'border border-neutral-200 dark:border-neutral-700',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n 'hover:border-blue-300 dark:hover:border-blue-600',\n 'active:scale-[0.98]',\n 'transition-all duration-200',\n 'shadow-sm hover:shadow',\n 'group'\n )}\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors\">\n {prompt.icon || <ArrowIcon />}\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium !text-neutral-900 dark:!text-white\">\n {prompt.text}\n </p>\n {prompt.description && (\n <p className=\"text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1\">\n {prompt.description}\n </p>\n )}\n </div>\n <svg\n className=\"w-4 h-4 !text-neutral-400 group-hover:!text-blue-500 transition-colors flex-shrink-0\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M9 5l7 7-7 7\"\n />\n </svg>\n </div>\n </button>\n ))}\n </div>\n\n {/* Desktop: Grid layout */}\n <div className=\"hidden sm:grid sm:grid-cols-2 gap-3\">\n {normalizedPrompts.map((prompt, index) => (\n <button\n key={index}\n onClick={() => onPromptClick(prompt.text)}\n className={cn(\n 'text-left p-4 rounded-xl',\n 'bg-white dark:bg-neutral-800',\n 'border border-neutral-200 dark:border-neutral-700',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n 'hover:border-blue-300 dark:hover:border-blue-600',\n 'hover:shadow-md',\n 'active:scale-[0.98]',\n 'transition-all duration-200',\n 'group'\n )}\n >\n <div className=\"flex items-start gap-3\">\n <div className=\"flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors\">\n {prompt.icon || <ArrowIcon />}\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium !text-neutral-900 dark:!text-white leading-snug\">\n {prompt.text}\n </p>\n {prompt.description && (\n <p className=\"text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2\">\n {prompt.description}\n </p>\n )}\n </div>\n </div>\n </button>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n}\n","import { useState, KeyboardEvent, useRef } from 'react';\nimport { validateFile, formatFileSize } from '../../utils';\n\ninterface ComposerProps {\n onSendMessage: (text: string, files?: File[]) => void;\n placeholder?: string;\n disabled?: boolean;\n isLoading?: boolean;\n onStop?: () => void;\n onFileUpload?: (files: FileList) => void;\n onSwitchMode?: () => void;\n}\n\ninterface PendingFile {\n file: File;\n preview?: string;\n}\n\nexport function Composer({ onSendMessage, placeholder = 'Type a message...', disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }: ComposerProps) {\n const [text, setText] = useState('');\n const [showMenu, setShowMenu] = useState(false);\n const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);\n const [fileError, setFileError] = useState<string | null>(null);\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const menuButtonRef = useRef<HTMLButtonElement>(null);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n };\n\n const handleSend = () => {\n const hasText = text.trim();\n const hasFiles = pendingFiles.length > 0;\n\n if ((hasText || hasFiles) && !disabled) {\n const filesToSend = pendingFiles.map(pf => pf.file);\n onSendMessage(text.trim(), filesToSend.length > 0 ? filesToSend : undefined);\n setText('');\n setPendingFiles([]);\n setFileError(null);\n // Reset textarea height\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n }\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setText(e.target.value);\n // Auto-resize textarea\n e.target.style.height = 'auto';\n e.target.style.height = `${e.target.scrollHeight}px`;\n };\n\n const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n const files = Array.from(e.target.files);\n const validFiles: PendingFile[] = [];\n const errors: string[] = [];\n\n files.forEach(file => {\n const validation = validateFile(file);\n if (validation.valid) {\n const pending: PendingFile = { file };\n // Create preview for images\n if (file.type.startsWith('image/')) {\n pending.preview = URL.createObjectURL(file);\n }\n validFiles.push(pending);\n } else {\n errors.push(validation.error || 'Invalid file');\n }\n });\n\n if (validFiles.length > 0) {\n setPendingFiles(prev => [...prev, ...validFiles]);\n }\n\n if (errors.length > 0) {\n setFileError(errors.join(', '));\n setTimeout(() => setFileError(null), 5000);\n }\n\n // Also call the legacy callback if provided\n onFileUpload?.(e.target.files);\n setShowMenu(false);\n\n // Reset input so same file can be selected again\n e.target.value = '';\n }\n };\n\n const removeFile = (index: number) => {\n setPendingFiles(prev => {\n const file = prev[index];\n // Revoke object URL to prevent memory leak\n if (file.preview) {\n URL.revokeObjectURL(file.preview);\n }\n return prev.filter((_, i) => i !== index);\n });\n };\n\n const getFileIcon = (mimeType: string) => {\n if (mimeType.startsWith('image/')) {\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n );\n }\n if (mimeType === 'application/pdf') {\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n );\n }\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n );\n };\n\n return (\n <div className=\"px-4 py-3 relative\">\n {/* File Error Toast */}\n {fileError && (\n <div className=\"absolute bottom-full left-4 right-4 mb-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-20\">\n <div className=\"flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm\">\n <svg className=\"w-4 h-4 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <span>{fileError}</span>\n </div>\n </div>\n )}\n\n {/* Pending Files Preview */}\n {pendingFiles.length > 0 && (\n <div className=\"mb-2 flex flex-wrap gap-2\">\n {pendingFiles.map((pf, index) => (\n <div\n key={index}\n className=\"relative group flex items-center gap-2 px-3 py-2 bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg\"\n >\n {pf.preview ? (\n <img src={pf.preview} alt={pf.file.name} className=\"w-8 h-8 object-cover rounded\" />\n ) : (\n <div className=\"w-8 h-8 flex items-center justify-center bg-neutral-200 dark:bg-neutral-700 rounded !text-neutral-500 dark:!text-neutral-400\">\n {getFileIcon(pf.file.type)}\n </div>\n )}\n <div className=\"flex flex-col min-w-0\">\n <span className=\"text-xs font-medium !text-neutral-700 dark:!text-neutral-300 truncate max-w-[120px]\">\n {pf.file.name}\n </span>\n <span className=\"text-xs !text-neutral-500 dark:!text-neutral-400\">\n {formatFileSize(pf.file.size)}\n </span>\n </div>\n <button\n onClick={() => removeFile(index)}\n className=\"absolute -top-1.5 -right-1.5 w-5 h-5 bg-neutral-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\"\n title=\"Remove file\"\n >\n <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n ))}\n </div>\n )}\n\n <div className=\"apteva-composer relative border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 transition-all duration-300 flex items-center px-3 py-2 gap-3\">\n <div className=\"relative flex-shrink-0\">\n <button\n ref={menuButtonRef}\n onClick={() => setShowMenu(!showMenu)}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n title=\"More options\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 5v10M5 10h10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n\n {/* Menu Popup - fixed positioning to escape overflow:hidden */}\n {showMenu && (\n <>\n <div className=\"fixed inset-0 z-[9998]\" onClick={() => setShowMenu(false)} />\n <div\n className=\"fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]\"\n style={{\n left: menuButtonRef.current?.getBoundingClientRect().left ?? 0,\n top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8,\n }}\n >\n <button\n onClick={() => {\n fileInputRef.current?.click();\n setShowMenu(false);\n }}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2, 3)\"/>\n </svg>\n <span className=\"!text-sm font-medium\">Add photos & files</span>\n </button>\n {onSwitchMode && (\n <button\n onClick={() => {\n onSwitchMode();\n setShowMenu(false);\n }}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700\"\n >\n <svg className=\"w-4.5 h-4.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n </svg>\n <span className=\"!text-sm font-medium\">Switch to command mode</span>\n </button>\n )}\n </div>\n </>\n )}\n </div>\n\n <textarea\n ref={textareaRef}\n value={text}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n className=\"flex-1 resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1 disabled:opacity-50 disabled:cursor-not-allowed\"\n rows={1}\n style={{ maxHeight: '120px' }}\n />\n\n {isLoading && onStop ? (\n <button\n onClick={onStop}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-900/30 !text-red-600 dark:!text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50\"\n title=\"Stop generation\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"2\" width=\"10\" height=\"10\" rx=\"1\" fill=\"currentColor\"/>\n </svg>\n </button>\n ) : (\n <button\n onClick={handleSend}\n disabled={(!text.trim() && pendingFiles.length === 0) || disabled}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg\"\n title=\"Send message\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n )}\n </div>\n\n {/* Hidden file input */}\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n onChange={handleFileSelect}\n className=\"hidden\"\n accept=\"image/*,application/pdf,.doc,.docx,.txt\"\n />\n </div>\n );\n}\n","import { useState, useRef, KeyboardEvent } from 'react';\nimport { cn, validateFile, formatFileSize } from '../../utils';\n\ntype CommandState = 'idle' | 'loading' | 'success' | 'error' | 'plan-pending';\n\ninterface PendingFile {\n file: File;\n preview?: string;\n}\n\ninterface CommandComposerProps {\n onExecute: (command: string, files?: File[]) => void;\n state: CommandState;\n response?: string;\n error?: string;\n plan?: string;\n streamedContent?: string;\n toolName?: string | null;\n onApprove?: () => void;\n onReject?: () => void;\n onReset?: () => void;\n onStop?: () => void;\n onExpand?: () => void;\n placeholder?: string;\n disabled?: boolean;\n}\n\nexport function CommandComposer({\n onExecute,\n state,\n response,\n error,\n plan,\n streamedContent,\n toolName,\n onApprove,\n onReject,\n onReset,\n onStop,\n onExpand,\n placeholder = 'Enter your command...',\n disabled = false,\n}: CommandComposerProps) {\n const [input, setInput] = useState('');\n const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);\n const [fileError, setFileError] = useState<string | null>(null);\n const [showMenu, setShowMenu] = useState(false);\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const menuButtonRef = useRef<HTMLButtonElement>(null);\n\n const handleSubmit = () => {\n const hasText = input.trim();\n const hasFiles = pendingFiles.length > 0;\n\n if ((hasText || hasFiles) && !disabled && state === 'idle') {\n const filesToSend = pendingFiles.map(pf => pf.file);\n onExecute(input.trim(), filesToSend.length > 0 ? filesToSend : undefined);\n setInput('');\n setPendingFiles([]);\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n const handleNewCommand = () => {\n onReset?.();\n inputRef.current?.focus();\n };\n\n const handleInputChange = (value: string) => {\n setInput(value);\n if (inputRef.current) {\n inputRef.current.style.height = 'auto';\n inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`;\n }\n };\n\n const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n const files = Array.from(e.target.files);\n const validFiles: PendingFile[] = [];\n const errors: string[] = [];\n\n files.forEach(file => {\n const validation = validateFile(file);\n if (validation.valid) {\n const pending: PendingFile = { file };\n if (file.type.startsWith('image/')) {\n pending.preview = URL.createObjectURL(file);\n }\n validFiles.push(pending);\n } else {\n errors.push(validation.error || 'Invalid file');\n }\n });\n\n if (validFiles.length > 0) {\n setPendingFiles(prev => [...prev, ...validFiles]);\n }\n\n if (errors.length > 0) {\n setFileError(errors.join(', '));\n setTimeout(() => setFileError(null), 5000);\n }\n\n setShowMenu(false);\n e.target.value = '';\n }\n };\n\n const removeFile = (index: number) => {\n setPendingFiles(prev => {\n const file = prev[index];\n if (file.preview) {\n URL.revokeObjectURL(file.preview);\n }\n return prev.filter((_, i) => i !== index);\n });\n };\n\n const getFileIcon = (mimeType: string) => {\n if (mimeType.startsWith('image/')) {\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n );\n }\n if (mimeType === 'application/pdf') {\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n );\n }\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n );\n };\n\n // Get display content based on state - show ONE thing at a time, replacing previous\n const getDisplayContent = (): { text: string; isToolCall: boolean } => {\n if (state === 'loading') {\n // Priority: tool call > streamed content > processing message\n if (toolName) {\n return { text: toolName, isToolCall: true };\n }\n // Only show streamed content if we have it (and no active tool)\n if (streamedContent) {\n return { text: streamedContent, isToolCall: false };\n }\n return { text: 'Processing...', isToolCall: false };\n }\n if (state === 'success' && response) {\n return { text: response, isToolCall: false };\n }\n if (state === 'error' && error) {\n return { text: error, isToolCall: false };\n }\n if (state === 'plan-pending' && plan) {\n return { text: plan, isToolCall: false };\n }\n return { text: '', isToolCall: false };\n };\n\n const isShowingResult = state !== 'idle';\n const { text: displayContent, isToolCall } = getDisplayContent();\n\n return (\n <div className=\"w-full relative\">\n {/* File Error Toast */}\n {fileError && (\n <div className=\"absolute -top-12 left-0 right-0 mx-3 p-2 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-30\">\n <div className=\"flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs\">\n <svg className=\"w-3 h-3 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <span>{fileError}</span>\n </div>\n </div>\n )}\n\n {/* Single input/output box */}\n <div\n className={cn(\n 'apteva-composer flex items-center gap-2 px-3 py-2 border-2 bg-white dark:bg-neutral-900 transition-all duration-200',\n state === 'idle' && 'border-neutral-200 dark:border-neutral-700',\n state === 'loading' && 'border-blue-400 dark:border-blue-500',\n state === 'plan-pending' && 'border-amber-400 dark:border-amber-500',\n state === 'success' && 'border-green-400 dark:border-green-500',\n state === 'error' && 'border-red-400 dark:border-red-500'\n )}\n >\n {/* Left side indicator area - fixed width to prevent layout shift */}\n <div className=\"w-8 h-8 flex items-center justify-center flex-shrink-0\">\n {/* Add file button - only in idle state */}\n {state === 'idle' && (\n <div className=\"relative\">\n <button\n ref={menuButtonRef}\n onClick={() => setShowMenu(!showMenu)}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-500 dark:!text-neutral-400 hover:!text-neutral-700 dark:hover:!text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n title=\"More options\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 5v10M5 10h10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n\n {/* Menu Popup - fixed positioning to escape overflow:hidden */}\n {showMenu && (\n <>\n <div className=\"fixed inset-0 z-[9998]\" onClick={() => setShowMenu(false)} />\n <div\n className=\"fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]\"\n style={{\n left: menuButtonRef.current?.getBoundingClientRect().left ?? 0,\n top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8,\n }}\n >\n <button\n onClick={() => {\n fileInputRef.current?.click();\n setShowMenu(false);\n }}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2, 3)\"/>\n </svg>\n <span className=\"!text-sm font-medium\">Add photos & files</span>\n </button>\n {onExpand && (\n <button\n onClick={() => {\n onExpand();\n setShowMenu(false);\n }}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700\"\n >\n <svg className=\"w-4.5 h-4.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\" />\n </svg>\n <span className=\"!text-sm font-medium\">Expand to chat</span>\n </button>\n )}\n </div>\n </>\n )}\n </div>\n )}\n\n {/* Loading spinner - show when loading without tool */}\n {state === 'loading' && !toolName && (\n <div className=\"w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin\" />\n )}\n\n {/* Tool indicator - blinking dot like in chat mode */}\n {state === 'loading' && toolName && (\n <div className=\"w-2 h-2 rounded-full bg-blue-500 animate-pulse\" />\n )}\n </div>\n\n {/* Inline file badges - compact display */}\n {pendingFiles.length > 0 && state === 'idle' && (\n <div className=\"flex items-center gap-1 flex-shrink-0\">\n {pendingFiles.map((pf, index) => (\n <div\n key={index}\n className=\"relative group flex items-center justify-center w-6 h-6 bg-neutral-100 dark:bg-neutral-800 rounded overflow-hidden\"\n title={pf.file.name}\n >\n {pf.preview ? (\n <img src={pf.preview} alt={pf.file.name} className=\"w-6 h-6 object-cover\" />\n ) : (\n <span className=\"text-xs !text-neutral-500 dark:!text-neutral-400\">\n {getFileIcon(pf.file.type)}\n </span>\n )}\n <button\n onClick={() => removeFile(index)}\n className=\"absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity\"\n title=\"Remove\"\n >\n <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n ))}\n </div>\n )}\n\n {/* Content area - input OR result */}\n {state === 'idle' ? (\n <textarea\n ref={inputRef}\n value={input}\n onChange={(e) => handleInputChange(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={pendingFiles.length > 0 ? 'Add a message...' : placeholder}\n disabled={disabled}\n rows={1}\n className={cn(\n 'flex-1 resize-none bg-transparent border-none focus:outline-none',\n '!text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500',\n 'text-sm leading-relaxed py-1',\n 'disabled:opacity-50'\n )}\n style={{ minHeight: '24px', maxHeight: '120px' }}\n />\n ) : (\n <div\n className={cn(\n 'flex-1 text-sm py-1 truncate flex items-center gap-2',\n state === 'loading' && !isToolCall && '!text-neutral-600 dark:!text-neutral-400',\n state === 'loading' && isToolCall && '!text-blue-600 dark:!text-blue-400',\n state === 'success' && '!text-neutral-900 dark:!text-neutral-100',\n state === 'error' && '!text-red-600 dark:!text-red-400',\n state === 'plan-pending' && '!text-amber-700 dark:!text-amber-300'\n )}\n >\n {isToolCall ? (\n <>\n <span className=\"font-mono\">{displayContent}</span>\n <span className=\"text-neutral-400 dark:text-neutral-500\">Running...</span>\n </>\n ) : (\n displayContent\n )}\n </div>\n )}\n\n {/* Action buttons - fixed width container to prevent layout shift */}\n <div className=\"w-8 h-8 flex items-center justify-center flex-shrink-0\">\n {/* Plan mode buttons - these expand, so handle separately */}\n {state === 'plan-pending' ? (\n <div className=\"flex items-center gap-1\">\n <button\n onClick={onApprove}\n className=\"px-2 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors text-xs font-medium\"\n >\n Approve\n </button>\n <button\n onClick={onReject}\n className=\"px-2 py-1 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-xs font-medium\"\n >\n Modify\n </button>\n </div>\n ) : (\n <>\n {/* Stop button - during loading */}\n {state === 'loading' && onStop && (\n <button\n onClick={onStop}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all border border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-900/30 !text-red-600 dark:!text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50\"\n title=\"Stop generation\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"2\" width=\"10\" height=\"10\" rx=\"1\" fill=\"currentColor\"/>\n </svg>\n </button>\n )}\n\n {/* Clear/New command button - after result */}\n {(state === 'success' || state === 'error') && (\n <button\n onClick={handleNewCommand}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center !text-neutral-400 hover:!text-neutral-600 dark:hover:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors\"\n title=\"New command\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n )}\n\n {/* Send button - only in idle state */}\n {state === 'idle' && (\n <button\n onClick={handleSubmit}\n disabled={(!input.trim() && pendingFiles.length === 0) || disabled}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center transition-all',\n 'border border-neutral-200 dark:border-neutral-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n (input.trim() || pendingFiles.length > 0)\n ? 'bg-neutral-900 dark:bg-white !text-white dark:!text-neutral-900 border-neutral-900 dark:border-white'\n : 'bg-white dark:bg-neutral-800 !text-neutral-400'\n )}\n title=\"Execute command\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 12h14M12 5l7 7-7 7\" />\n </svg>\n </button>\n )}\n </>\n )}\n </div>\n </div>\n\n {/* Hidden file input */}\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n onChange={handleFileSelect}\n className=\"hidden\"\n accept=\"image/*,application/pdf,.doc,.docx,.txt\"\n />\n </div>\n );\n}\n","export interface AptevaClientConfig {\n apiUrl?: string;\n apiKey?: string;\n}\n\nexport interface ChatMessage {\n role: 'user' | 'assistant' | 'system';\n content: string;\n}\n\nexport interface ChatRequest {\n agent_id: string;\n message: string | Array<{\n type: 'text' | 'image' | 'document';\n text?: string;\n source?: {\n type: 'base64';\n media_type: string;\n data: string;\n };\n }>;\n thread_id?: string;\n stream?: boolean;\n system?: string;\n}\n\nexport interface ChatResponse {\n message: string;\n thread_id: string;\n widgets?: any[];\n}\n\nexport interface StreamChunk {\n type: 'start' | 'thread_id' | 'request_id' | 'content' | 'token' | 'tool_call' | 'tool_input_delta' | 'tool_use' | 'tool_result' | 'stop' | 'widget' | 'complete' | 'done' | 'error';\n content?: string;\n widget?: any;\n thread_id?: string;\n request_id?: string;\n tool_id?: string;\n tool_name?: string;\n error?: string;\n message?: string;\n}\n\n// Default configuration\nconst DEFAULT_API_URL = 'http://91.99.200.48:3000/agents';\nconst DEFAULT_API_KEY = 'agt_894abd5966bc9f1e9f8f17f2a6f6b5e0';\n\nclass AptevaClient {\n private config: Required<AptevaClientConfig>;\n\n constructor() {\n this.config = {\n apiUrl: DEFAULT_API_URL,\n apiKey: DEFAULT_API_KEY,\n };\n }\n\n /**\n * Update client configuration (optional - users can override defaults)\n */\n configure(config: AptevaClientConfig) {\n if (config.apiUrl) this.config.apiUrl = config.apiUrl;\n if (config.apiKey) this.config.apiKey = config.apiKey;\n }\n\n /**\n * Get current configuration\n */\n getConfig(): AptevaClientConfig {\n return { ...this.config };\n }\n\n /**\n * Send a chat message to an agent\n */\n async chat(request: ChatRequest): Promise<ChatResponse> {\n try {\n console.log('[AptevaClient] Chat request:', {\n agent_id: request.agent_id,\n message: typeof request.message === 'string' ? request.message.substring(0, 100) + '...' : '[multi-part message]',\n system: request.system,\n stream: request.stream,\n });\n\n const response = await fetch(`${this.config.apiUrl}/chat`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': this.config.apiKey,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Request failed' }));\n throw new Error(error.error || `Request failed with status ${response.status}`);\n }\n\n const data = await response.json();\n\n // Map API response format to expected format\n // API returns: { response, thread_id, success, model, trace_id }\n // We expect: { message, thread_id, widgets }\n return {\n message: data.response || data.message || '',\n thread_id: data.thread_id,\n widgets: data.widgets,\n };\n } catch (error) {\n console.error('Chat API error:', error);\n throw error;\n }\n }\n\n /**\n * Send a chat message with streaming response\n */\n async chatStream(\n request: ChatRequest,\n onChunk: (chunk: StreamChunk) => void,\n onComplete?: (threadId: string) => void,\n onError?: (error: Error) => void\n ): Promise<void> {\n try {\n console.log('[AptevaClient] Chat stream request:', {\n agent_id: request.agent_id,\n message: typeof request.message === 'string' ? request.message.substring(0, 100) + '...' : '[multi-part message]',\n system: request.system,\n stream: request.stream,\n });\n\n const response = await fetch(`${this.config.apiUrl}/chat`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': this.config.apiKey,\n 'Accept': 'text/event-stream',\n },\n body: JSON.stringify({\n ...request,\n stream: true,\n }),\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Request failed' }));\n throw new Error(error.error || `Request failed with status ${response.status}`);\n }\n\n const reader = response.body?.getReader();\n if (!reader) {\n throw new Error('Response body is not readable');\n }\n\n const decoder = new TextDecoder();\n let buffer = '';\n let threadId = '';\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split('\\n');\n buffer = lines.pop() || '';\n\n for (const line of lines) {\n if (!line.trim() || line.startsWith(':')) continue;\n\n if (line.startsWith('data: ')) {\n const data = line.slice(6);\n\n if (data === '[DONE]') {\n onComplete?.(threadId);\n return;\n }\n\n try {\n const chunk = JSON.parse(data);\n\n // Store thread_id if present in chunk\n if (chunk.thread_id) {\n threadId = chunk.thread_id;\n }\n\n // Pass through ALL chunk types to the handler\n onChunk(chunk);\n\n } catch (e) {\n console.warn('[AptevaClient] Failed to parse SSE data:', data);\n }\n }\n }\n }\n\n onComplete?.(threadId);\n } catch (error) {\n const err = error instanceof Error ? error : new Error('Unknown error');\n onError?.(err);\n throw err;\n }\n }\n\n /**\n * Create a new thread\n */\n async createThread(agentId: string, metadata?: Record<string, any>): Promise<string> {\n const response = await fetch(`${this.config.apiUrl}/agents/${agentId}/threads`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': this.config.apiKey,\n },\n body: JSON.stringify({ metadata }),\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Request failed' }));\n throw new Error(error.error || `Request failed with status ${response.status}`);\n }\n\n const data = await response.json();\n return data.thread_id;\n }\n\n /**\n * Get thread messages\n */\n async getThreadMessages(threadId: string): Promise<ChatMessage[]> {\n const response = await fetch(`${this.config.apiUrl}/threads/${threadId}/messages`, {\n method: 'GET',\n headers: {\n 'X-API-Key': this.config.apiKey,\n },\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Request failed' }));\n throw new Error(error.error || `Request failed with status ${response.status}`);\n }\n\n const data = await response.json();\n return data.messages;\n }\n\n /**\n * Cancel an in-progress request\n */\n async cancelRequest(agentId: string, requestId: string): Promise<void> {\n try {\n const response = await fetch(`${this.config.apiUrl}/agents/${agentId}/requests/${requestId}/cancel`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': this.config.apiKey,\n },\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Cancel request failed' }));\n throw new Error(error.error || `Cancel request failed with status ${response.status}`);\n }\n } catch (error) {\n console.error('[AptevaClient] Cancel request error:', error);\n throw error;\n }\n }\n}\n\n// Export singleton instance\nexport const aptevaClient = new AptevaClient();\n\n// Export class for custom instances\nexport { AptevaClient };\n","import { useState } from 'react';\nimport { cn } from '../../utils';\nimport { Widget } from '../../types/widgets';\nimport { WidgetRenderer } from '../Widgets/WidgetRenderer';\nimport { MarkdownContent } from './MarkdownContent';\nimport { ActionEvent } from '../../types/actions';\n\ninterface CommandOutputProps {\n state: 'idle' | 'loading' | 'success' | 'error' | 'plan-pending';\n streamedContent?: string;\n loadingText?: string;\n progress?: number;\n showProgress?: boolean;\n plan?: string;\n error?: Error | null;\n result?: {\n success: boolean;\n data: any;\n widgets?: Widget[];\n message?: string;\n } | null;\n onApprove?: () => void;\n onReject?: () => void;\n onReset?: () => void;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function CommandOutput({\n state,\n streamedContent,\n loadingText = 'Processing...',\n progress = 0,\n showProgress = true,\n plan,\n error,\n result,\n onApprove,\n onReject,\n onReset,\n onAction,\n}: CommandOutputProps) {\n const [isExpanded, setIsExpanded] = useState(false);\n\n // Don't render anything in idle state\n if (state === 'idle') {\n return null;\n }\n\n // Loading state - compact inline indicator\n if (state === 'loading') {\n return (\n <div className=\"mx-4 mb-3\">\n <div className=\"flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl\">\n <div className=\"w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin flex-shrink-0\" />\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm text-blue-700 dark:text-blue-300 truncate\">\n {streamedContent || loadingText}\n </p>\n {showProgress && progress > 0 && (\n <div className=\"mt-2 w-full bg-blue-200 dark:bg-blue-800 rounded-full h-1\">\n <div\n className=\"bg-blue-600 h-1 rounded-full transition-all duration-300\"\n style={{ width: `${progress}%` }}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n );\n }\n\n // Plan pending state\n if (state === 'plan-pending' && plan) {\n return (\n <div className=\"mx-4 mb-3\">\n <div className=\"p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl\">\n <div className=\"flex items-start gap-3 mb-3\">\n <svg className=\"w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-blue-800 dark:text-blue-300 mb-2\">Proposed Plan</h3>\n <div className=\"text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed\">\n {plan}\n </div>\n </div>\n </div>\n <div className=\"flex gap-2\">\n <button\n onClick={onApprove}\n className=\"flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium\"\n >\n Approve & Execute\n </button>\n <button\n onClick={onReject}\n className=\"flex-1 px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-sm font-medium\"\n >\n Modify\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n // Error state\n if (state === 'error' && error) {\n return (\n <div className=\"mx-4 mb-3\">\n <div className=\"p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl\">\n <div className=\"flex items-start gap-3\">\n <svg className=\"w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-red-800 dark:text-red-400\">Error</h3>\n <p className=\"text-red-700 dark:text-red-300 text-sm mt-1\">{error.message}</p>\n </div>\n <button\n onClick={onReset}\n className=\"p-1.5 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg transition-colors\"\n title=\"Dismiss\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n // Success state - collapsible\n if (state === 'success' && result) {\n const hasDetailedContent = result.data?.summary || (result.widgets && result.widgets.length > 0);\n\n return (\n <div className=\"mx-4 mb-3\">\n <div className={cn(\n \"border border-green-200 dark:border-green-800 rounded-xl overflow-hidden transition-all duration-200\",\n isExpanded ? \"bg-white dark:bg-neutral-900\" : \"bg-green-50 dark:bg-green-900/20\"\n )}>\n {/* Collapsed header - always visible */}\n <div\n className={cn(\n \"flex items-center gap-3 p-3 cursor-pointer\",\n isExpanded && \"border-b border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20\"\n )}\n onClick={() => hasDetailedContent && setIsExpanded(!isExpanded)}\n >\n <svg className=\"w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm text-green-700 dark:text-green-300 truncate\">\n {result.message || 'Command executed successfully'}\n </p>\n </div>\n <div className=\"flex items-center gap-2 flex-shrink-0\">\n {hasDetailedContent && (\n <button\n className=\"p-1.5 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-lg transition-colors\"\n title={isExpanded ? \"Collapse\" : \"Expand\"}\n >\n <svg\n className={cn(\"w-4 h-4 transition-transform duration-200\", isExpanded && \"rotate-180\")}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n )}\n <button\n onClick={(e) => {\n e.stopPropagation();\n onReset?.();\n }}\n className=\"p-1.5 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-lg transition-colors\"\n title=\"New command\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n </svg>\n </button>\n </div>\n </div>\n\n {/* Expanded content */}\n {isExpanded && hasDetailedContent && (\n <div className=\"p-4 space-y-4\">\n {result.data?.summary && (\n <div className=\"text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed\">\n <MarkdownContent content={result.data.summary} />\n </div>\n )}\n {result.widgets && result.widgets.length > 0 && (\n <div className=\"space-y-3\">\n {result.widgets.map((widget) => (\n <WidgetRenderer key={widget.id} widget={widget} onAction={onAction} />\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n }\n\n return null;\n}\n","import React, { useState, useEffect } from 'react';\nimport { CommandProps, CommandResult } from '../../types/components';\nimport { cn, generateMockCommandWithWidgets, generateMockCommandStream, generateMockPlan } from '../../utils';\nimport { aptevaClient } from '../../lib/apteva-client';\nimport { WidgetRenderer } from '../Widgets/WidgetRenderer';\n\nexport function Command({\n agentId,\n command: initialCommand,\n context,\n autoExecute = false,\n allowInput = true,\n placeholder = 'Enter your command...',\n submitButtonText = 'Execute',\n variant = 'default',\n useMock = false,\n planMode = false,\n onPlanModeChange,\n enableFileUpload = true,\n onStart,\n onProgress,\n onChunk,\n onComplete,\n onError,\n onFileUpload,\n onAction,\n loadingText = 'Processing...',\n showProgress = true,\n enableStreaming = false,\n resultRenderer,\n className,\n}: CommandProps) {\n const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error' | 'plan-pending'>('idle');\n const [result, setResult] = useState<CommandResult | null>(null);\n const [error, setError] = useState<Error | null>(null);\n const [progress, setProgress] = useState(0);\n const [command, setCommand] = useState(initialCommand || '');\n const [streamedContent, setStreamedContent] = useState('');\n const [plan, setPlan] = useState<string>('');\n const [pendingCommand, setPendingCommand] = useState<string>('');\n const [showPlanDetails, setShowPlanDetails] = useState(false);\n const [uploadedFiles, setUploadedFiles] = useState<Array<{ type: 'image' | 'document'; data: string; mediaType: string; preview?: string; name: string }>>([]);\n const [showSettingsMenu, setShowSettingsMenu] = useState(false);\n const [internalPlanMode, setInternalPlanMode] = useState(planMode);\n const fileInputRef = React.useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoExecute && state === 'idle' && command) {\n executeCommand();\n }\n }, [autoExecute]);\n\n // Sync internal plan mode with prop when prop changes\n useEffect(() => {\n setInternalPlanMode(planMode);\n }, [planMode]);\n\n // Close settings menu when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (showSettingsMenu && !target.closest('.settings-menu-container')) {\n setShowSettingsMenu(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [showSettingsMenu]);\n\n const executeCommand = async (commandOverride?: string) => {\n const currentCommand = commandOverride || command;\n\n if (!currentCommand.trim()) {\n setError(new Error('Please enter a command'));\n setState('error');\n return;\n }\n\n // Plan mode: show plan first\n if (internalPlanMode && state !== 'plan-pending') {\n setState('loading');\n setError(null);\n setCommand(''); // Clear input\n\n // Generate plan (mock or real)\n if (useMock) {\n setTimeout(() => {\n const mockPlan = generateMockPlan(currentCommand);\n setPlan(mockPlan);\n setPendingCommand(currentCommand);\n setState('plan-pending');\n }, 800);\n } else {\n // Real API plan generation\n try {\n // Build message - multi-part if files are uploaded\n let messageContent: any;\n\n if (uploadedFiles.length > 0) {\n messageContent = [\n {\n type: 'text',\n text: currentCommand,\n },\n ...uploadedFiles.map(file => ({\n type: file.type,\n source: {\n type: 'base64',\n media_type: file.mediaType,\n data: file.data,\n },\n })),\n ];\n } else {\n messageContent = currentCommand;\n }\n\n // System instruction for planning only\n let systemMessage = context || '';\n const planningInstruction = `CRITICAL PLANNING MODE - READ CAREFULLY:\n\nYou are ONLY creating a plan. You are NOT executing anything.\n\nYOUR TASK: Write a numbered list of steps describing what WOULD be done.\nDO NOT: Execute any actions, make API calls, access databases, modify data, or perform any operations.\nDO NOT: Ask questions or clarifications. Make reasonable assumptions.\nDO: Describe the steps as \"Step 1: Would search database...\", \"Step 2: Would analyze results...\", etc.\nDO: Use default values or best practices if details are missing.\n\nFORMAT REQUIRED:\n1. [First action that would be taken]\n2. [Second action that would be taken]\n3. [Third action that would be taken]\n...\n\nIMPORTANT: This is COMMAND MODE - figure things out yourself. Make intelligent assumptions based on context. ONLY ask questions if something is absolutely impossible to proceed without (e.g., missing required credentials). Otherwise, use sensible defaults and proceed with the plan.\n\nREMEMBER: This is ONLY a plan. The user will approve it, THEN it will be executed. Right now you are just describing what would happen - NOT doing it.`;\n\n\n systemMessage = systemMessage\n ? `${systemMessage}\\n\\n${planningInstruction}`\n : planningInstruction;\n\n aptevaClient.chat({\n agent_id: agentId,\n message: messageContent,\n stream: false,\n system: systemMessage,\n }).then((response) => {\n setPlan(response.message);\n setPendingCommand(currentCommand);\n setState('plan-pending');\n }).catch((err) => {\n const error = err instanceof Error ? err : new Error('Failed to generate plan');\n setError(error);\n setState('error');\n onError?.(error);\n });\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Failed to generate plan');\n setError(error);\n setState('error');\n onError?.(error);\n }\n }\n return;\n }\n\n setState('loading');\n setError(null);\n setProgress(0);\n setStreamedContent('');\n setCommand(''); // Clear input for next command\n setUploadedFiles([]); // Clear uploaded files after sending\n onStart?.();\n\n try {\n if (useMock) {\n // MOCK MODE\n if (enableStreaming) {\n // Mock streaming\n let accumulatedContent = '';\n\n generateMockCommandStream(\n currentCommand,\n (chunk) => {\n if (chunk.type === 'token' && chunk.content) {\n accumulatedContent += chunk.content;\n setStreamedContent(accumulatedContent);\n onChunk?.(chunk.content);\n\n // Estimate progress based on content length\n const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);\n setProgress(estimatedProgress);\n onProgress?.(estimatedProgress);\n } else if (chunk.type === 'widget' && chunk.widget) {\n // Handle widgets in streamed response\n const widget = chunk.widget;\n setResult((prev) => ({\n success: true,\n data: prev?.data || {},\n widgets: [...(prev?.widgets || []), widget],\n message: accumulatedContent || 'Command executed successfully',\n }));\n }\n },\n (threadId) => {\n // On complete\n const result: CommandResult = {\n success: true,\n data: {\n summary: accumulatedContent,\n thread_id: threadId,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n message: accumulatedContent || 'Command executed successfully',\n };\n\n setResult(result);\n setState('success');\n setProgress(100);\n onComplete?.(result);\n },\n (error) => {\n // On error\n setError(error);\n setState('error');\n onError?.(error);\n }\n );\n } else {\n // Mock non-streaming\n const progressInterval = setInterval(() => {\n setProgress((prev) => {\n const next = Math.min(prev + 10, 90);\n onProgress?.(next);\n return next;\n });\n }, 200);\n\n // Simulate network delay\n await new Promise(resolve => setTimeout(resolve, 1500));\n\n clearInterval(progressInterval);\n\n const mockResponse = generateMockCommandWithWidgets(currentCommand);\n\n const result: CommandResult = {\n success: true,\n data: {\n summary: mockResponse.message,\n thread_id: `mock_thread_${Date.now()}`,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n action: mockResponse.action, // Include agent action intent\n },\n widgets: mockResponse.widgets,\n message: mockResponse.message,\n };\n\n setResult(result);\n setState('success');\n setProgress(100);\n onComplete?.(result);\n }\n } else {\n // REAL API MODE\n if (enableStreaming) {\n // Real streaming API call\n let accumulatedContent = '';\n\n // Build message - multi-part if files are uploaded\n let messageContent: any;\n\n if (uploadedFiles.length > 0) {\n // Multi-part message with text and images\n messageContent = [\n {\n type: 'text',\n text: currentCommand,\n },\n ...uploadedFiles.map(file => ({\n type: file.type, // 'image' or 'document'\n source: {\n type: 'base64',\n media_type: file.mediaType,\n data: file.data,\n },\n })),\n ];\n } else {\n // Simple text message\n messageContent = currentCommand;\n }\n\n // Build system message - add command execution instruction\n let systemMessage = context || '';\n\n // Always include command mode instruction for brevity\n let commandInstruction: string;\n if (isCompact) {\n // Compact mode - extremely terse\n commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute immediately, make intelligent assumptions, use defaults when needed. NO questions unless absolutely critical (missing required credentials). State action or result ONLY. Examples: \"Searching database for matching records...\" or \"Found 3 user records in database\" or \"Task completed successfully\". NO greetings, NO explanations, NO clarification requests. Just execute and report.';\n } else {\n // Default mode - still very brief\n commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you\\'re doing or the result. Examples: \"Analyzing customer data from last quarter...\" or \"Created 5 new database entries successfully\" or \"Search complete: found 12 matching results\". NO greetings, NO filler words, NO clarification requests. Action/result only.';\n }\n\n systemMessage = systemMessage\n ? `${systemMessage}\\n\\n${commandInstruction}`\n : commandInstruction;\n\n await aptevaClient.chatStream(\n {\n agent_id: agentId,\n message: messageContent,\n stream: true,\n ...(systemMessage && { system: systemMessage }),\n },\n (chunk) => {\n if (chunk.type === 'token' && chunk.content) {\n accumulatedContent += chunk.content;\n setStreamedContent(accumulatedContent);\n onChunk?.(chunk.content);\n\n // Estimate progress based on content length (rough approximation)\n const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);\n setProgress(estimatedProgress);\n onProgress?.(estimatedProgress);\n } else if (chunk.type === 'widget' && chunk.widget) {\n // Handle widgets in streamed response\n const widget = chunk.widget;\n setResult((prev) => ({\n success: true,\n data: prev?.data || {},\n widgets: [...(prev?.widgets || []), widget],\n message: accumulatedContent || 'Command executed successfully',\n }));\n }\n },\n (threadId) => {\n // On complete\n const result: CommandResult = {\n success: true,\n data: {\n summary: accumulatedContent,\n thread_id: threadId,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n message: accumulatedContent || 'Command executed successfully',\n };\n\n setResult(result);\n setState('success');\n setProgress(100);\n onComplete?.(result);\n },\n (error) => {\n // On error\n const err = error instanceof Error ? error : new Error('Unknown error');\n setError(err);\n setState('error');\n onError?.(err);\n }\n );\n } else {\n // Non-streaming API call\n const progressInterval = setInterval(() => {\n setProgress((prev) => {\n const next = Math.min(prev + 10, 90);\n onProgress?.(next);\n return next;\n });\n }, 200);\n\n // Build message - multi-part if files are uploaded\n let messageContent: any;\n\n if (uploadedFiles.length > 0) {\n // Multi-part message with text and images\n messageContent = [\n {\n type: 'text',\n text: currentCommand,\n },\n ...uploadedFiles.map(file => ({\n type: file.type, // 'image' or 'document'\n source: {\n type: 'base64',\n media_type: file.mediaType,\n data: file.data,\n },\n })),\n ];\n } else {\n // Simple text message\n messageContent = currentCommand;\n }\n\n // Build system message - add command execution instruction\n let systemMessage = context || '';\n\n // Always include command mode instruction for brevity\n let commandInstruction: string;\n if (isCompact) {\n // Compact mode - extremely terse\n commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute immediately, make intelligent assumptions, use defaults when needed. NO questions unless absolutely critical (missing required credentials). State action or result ONLY. Examples: \"Searching database for matching records...\" or \"Found 3 user records in database\" or \"Task completed successfully\". NO greetings, NO explanations, NO clarification requests. Just execute and report.';\n } else {\n // Default mode - still very brief\n commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you\\'re doing or the result. Examples: \"Analyzing customer data from last quarter...\" or \"Created 5 new database entries successfully\" or \"Search complete: found 12 matching results\". NO greetings, NO filler words, NO clarification requests. Action/result only.';\n }\n\n systemMessage = systemMessage\n ? `${systemMessage}\\n\\n${commandInstruction}`\n : commandInstruction;\n\n const response = await aptevaClient.chat({\n agent_id: agentId,\n message: messageContent,\n stream: false,\n ...(systemMessage && { system: systemMessage }),\n });\n\n clearInterval(progressInterval);\n\n const result: CommandResult = {\n success: true,\n data: {\n summary: response.message,\n thread_id: response.thread_id,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n widgets: response.widgets,\n message: response.message,\n };\n\n setResult(result);\n setState('success');\n setProgress(100);\n onComplete?.(result);\n }\n }\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Unknown error');\n setError(error);\n setState('error');\n onError?.(error);\n }\n };\n\n const resetCommand = () => {\n setState('idle');\n setResult(null);\n setError(null);\n setProgress(0);\n setCommand('');\n setPlan('');\n setPendingCommand('');\n setShowPlanDetails(false);\n setUploadedFiles([]);\n };\n\n const approvePlan = () => {\n // Execute the plan after approval\n // Send the plan to the agent with \"execute this now\" instruction\n setShowPlanDetails(false);\n const planToExecute = plan;\n setPlan('');\n setPendingCommand('');\n\n // Execute with the plan as the command\n const executionMessage = `Execute this plan now:\\n\\n${planToExecute}`;\n executeCommand(executionMessage);\n };\n\n const rejectPlan = () => {\n // Reset to idle and restore the command for editing\n setCommand(pendingCommand);\n setPlan('');\n setPendingCommand('');\n setShowPlanDetails(false);\n setState('idle');\n };\n\n const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n onFileUpload?.(e.target.files);\n\n // Convert files to base64 for API\n const files: Array<{ type: 'image' | 'document'; data: string; mediaType: string; preview?: string; name: string }> = [];\n\n for (let i = 0; i < e.target.files.length; i++) {\n const file = e.target.files[i];\n\n const reader = new FileReader();\n\n await new Promise<void>((resolve) => {\n reader.onload = (event) => {\n if (event.target?.result) {\n const fullDataUrl = event.target.result as string;\n const base64Data = fullDataUrl.split(',')[1]; // Remove data:...;base64, prefix\n\n if (file.type.startsWith('image/')) {\n // Images with preview\n files.push({\n type: 'image',\n data: base64Data,\n mediaType: file.type,\n preview: fullDataUrl, // Keep full data URL for preview\n name: file.name,\n });\n } else if (file.type === 'application/pdf' || file.type.startsWith('application/')) {\n // Documents (PDF, etc.) without preview\n files.push({\n type: 'document',\n data: base64Data,\n mediaType: file.type,\n name: file.name,\n });\n }\n }\n resolve();\n };\n reader.readAsDataURL(file);\n });\n }\n\n setUploadedFiles(prev => [...prev, ...files]); // Append to existing files\n }\n };\n\n const removeFile = (index: number) => {\n setUploadedFiles(prev => prev.filter((_, i) => i !== index));\n };\n\n const isCompact = variant === 'compact';\n\n return (\n <div\n className={cn(\n 'relative border-2 rounded-xl bg-white dark:bg-neutral-900 transition-all duration-300 flex flex-col',\n state === 'loading' && 'animate-pulse-border',\n state === 'idle' && 'border-neutral-300 dark:border-neutral-700',\n state === 'loading' && 'border-blue-500',\n state === 'plan-pending' && 'border-blue-400',\n state === 'success' && 'border-green-500',\n state === 'error' && 'border-red-500',\n className\n )}\n style={{ minHeight: isCompact ? 'auto' : '180px' }}\n >\n {/* Input/Display Area */}\n <div className={cn('flex-1 flex', isCompact ? 'flex-row items-center p-3 gap-3' : 'flex-col p-4')}>\n {state === 'idle' && allowInput && !isCompact && (\n <>\n <textarea\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 w-full resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500\"\n rows={6}\n />\n {/* File Previews - Non-Compact */}\n {uploadedFiles.length > 0 && (\n <div className=\"flex flex-wrap gap-2 mt-2\">\n {uploadedFiles.map((file, index) => (\n <div key={index} className=\"relative group\">\n {file.type === 'image' ? (\n <img\n src={file.preview}\n alt={file.name}\n className=\"w-20 h-20 object-cover rounded-lg border-2 border-neutral-300 dark:border-neutral-600\"\n />\n ) : (\n <div className=\"w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800\">\n <svg className=\"w-8 h-8 text-neutral-500 dark:text-neutral-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z\" clipRule=\"evenodd\" />\n </svg>\n <span className=\"text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full\">\n {file.name.length > 12 ? file.name.slice(0, 12) + '...' : file.name}\n </span>\n </div>\n )}\n <button\n onClick={() => removeFile(index)}\n className=\"absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\"\n title={`Remove ${file.type}`}\n >\n <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n ))}\n </div>\n )}\n </>\n )}\n\n {state === 'idle' && allowInput && isCompact && (\n <>\n <div className=\"flex items-center gap-0.5 flex-shrink-0\">\n {enableFileUpload && (\n <button\n onClick={() => fileInputRef.current?.click()}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n title=\"Attach file\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1.6, 2.4)\"/>\n </svg>\n </button>\n )}\n {planMode && (\n <div className=\"relative settings-menu-container\">\n <button\n onClick={() => setShowSettingsMenu(!showSettingsMenu)}\n className={cn(\n \"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n internalPlanMode ? \"!text-blue-600 dark:!text-blue-400\" : \"!text-neutral-500 dark:!text-neutral-500\"\n )}\n title=\"Settings\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"></line>\n <line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"></line>\n <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"></line>\n <line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"></line>\n <line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"></line>\n <line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"></line>\n <line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"></line>\n <line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"></line>\n </svg>\n </button>\n {showSettingsMenu && (\n <div className=\"absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container\">\n <label className=\"flex items-center justify-between cursor-pointer group\">\n <div className=\"flex items-center gap-2\">\n <svg className=\"w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <div>\n <div className=\"text-xs font-medium text-neutral-700 dark:text-neutral-300\">Plan Mode</div>\n <div className=\"text-[10px] text-neutral-500 dark:text-neutral-400\">Review first</div>\n </div>\n </div>\n <button\n onClick={(e) => {\n e.stopPropagation();\n setInternalPlanMode(!internalPlanMode);\n }}\n className={cn(\n \"relative inline-flex h-4 w-8 items-center rounded-full transition-colors\",\n internalPlanMode ? \"bg-blue-600\" : \"bg-neutral-300 dark:bg-neutral-600\"\n )}\n type=\"button\"\n >\n <span\n className={cn(\n \"inline-block h-3 w-3 transform rounded-full bg-white transition-transform\",\n internalPlanMode ? \"translate-x-4.5\" : \"translate-x-0.5\"\n )}\n />\n </button>\n </label>\n </div>\n )}\n </div>\n )}\n </div>\n {/* File Previews - Compact */}\n {uploadedFiles.length > 0 && (\n <div className=\"flex gap-1 flex-shrink-0\">\n {uploadedFiles.map((file, index) => (\n <div key={index} className=\"relative group\">\n {file.type === 'image' ? (\n <img\n src={file.preview}\n alt={file.name}\n className=\"w-8 h-8 object-cover rounded border border-neutral-300 dark:border-neutral-600\"\n />\n ) : (\n <div className=\"w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800\" title={file.name}>\n <svg className=\"w-4 h-4 text-neutral-500 dark:text-neutral-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z\" clipRule=\"evenodd\" />\n </svg>\n </div>\n )}\n <button\n onClick={() => removeFile(index)}\n className=\"absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\"\n title=\"Remove\"\n >\n <svg className=\"w-2.5 h-2.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3}>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n ))}\n </div>\n )}\n <input\n type=\"text\"\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1\"\n />\n <button\n onClick={() => executeCommand()}\n disabled={!command.trim()}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-neutral-300 dark:border-neutral-600',\n 'bg-white dark:bg-neutral-800',\n '!text-neutral-700 dark:!text-neutral-300',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n '!text-lg',\n !command.trim() && 'border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600'\n )}\n title=\"Execute\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n\n {state === 'loading' && !isCompact && (\n <div className=\"flex-1 flex flex-col items-center justify-center space-y-4 py-8\">\n <div className=\"w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin\"></div>\n <div className=\"text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md\">\n {enableStreaming && streamedContent ? streamedContent : loadingText}\n </div>\n {showProgress && (\n <div className=\"w-full max-w-sm\">\n <div className=\"w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5\">\n <div\n className=\"bg-blue-500 h-1.5 rounded-full transition-all duration-300\"\n style={{ width: `${progress}%` }}\n />\n </div>\n <p className=\"text-xs text-neutral-500 mt-2 text-center\">{progress}%</p>\n </div>\n )}\n </div>\n )}\n\n {state === 'loading' && isCompact && (\n <>\n <div className=\"flex-1 flex items-center gap-3 py-1\">\n <div className=\"w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin\"></div>\n <div className=\"text-neutral-600 dark:text-neutral-400 text-sm truncate\">\n {enableStreaming && streamedContent ? streamedContent : loadingText}\n </div>\n </div>\n <button\n disabled\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-neutral-200 dark:border-neutral-700',\n 'bg-white dark:bg-neutral-800',\n '!text-neutral-400 dark:!text-neutral-600',\n '!text-lg',\n 'opacity-30 cursor-not-allowed'\n )}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n\n {state === 'plan-pending' && !isCompact && (\n <div className=\"flex-1 flex flex-col\">\n <div className=\"mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg\">\n <div className=\"flex items-start gap-2 mb-3\">\n <svg className=\"w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1\">Proposed Plan</h3>\n <div className=\"text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed\">\n {plan}\n </div>\n </div>\n </div>\n <div className=\"flex gap-2 mt-4\">\n <button\n onClick={approvePlan}\n className=\"flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium\"\n >\n Approve & Execute\n </button>\n <button\n onClick={rejectPlan}\n className=\"flex-1 px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-sm font-medium\"\n >\n Modify\n </button>\n </div>\n </div>\n </div>\n )}\n\n {state === 'plan-pending' && isCompact && (\n <>\n <button\n onClick={() => setShowPlanDetails(true)}\n className=\"flex-1 flex items-center gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 border border-blue-200 dark:border-blue-800 rounded-lg transition-colors\"\n >\n <svg className=\"w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <span className=\"text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1\">View Execution Plan</span>\n </button>\n <div className=\"flex gap-2 flex-shrink-0\">\n <button\n onClick={approvePlan}\n className=\"px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-xs font-medium\"\n >\n Approve\n </button>\n <button\n onClick={rejectPlan}\n className=\"px-3 py-1.5 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-xs font-medium\"\n >\n Modify\n </button>\n </div>\n </>\n )}\n\n {state === 'error' && (\n <div className=\"flex-1 flex flex-col\">\n <div className=\"mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg\">\n <div className=\"flex items-start gap-2\">\n <svg className=\"w-5 h-5 text-red-600 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div>\n <h3 className=\"text-sm font-semibold text-red-800 dark:text-red-400\">Error</h3>\n <p className=\"text-red-700 dark:text-red-300 text-sm mt-1\">{error?.message}</p>\n </div>\n </div>\n </div>\n {allowInput && (\n <textarea\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-neutral-900 dark:text-white placeholder-neutral-400\"\n rows={4}\n />\n )}\n </div>\n )}\n\n {state === 'success' && result && !isCompact && (\n <div className=\"flex-1 overflow-auto\">\n {resultRenderer ? (\n resultRenderer(result.data)\n ) : (\n <div className=\"space-y-4\">\n <div className=\"flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg\">\n <svg className=\"w-5 h-5 text-green-600 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-green-800 dark:text-green-400 mb-1\">Success</h3>\n <p className=\"text-green-700 dark:text-green-300 text-sm\">Command executed successfully</p>\n </div>\n </div>\n {result.data?.summary && (\n <div className=\"text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line\">\n {result.data.summary}\n </div>\n )}\n {result.widgets && result.widgets.length > 0 && (\n <div className=\"space-y-3\">\n {result.widgets.map((widget) => (\n <WidgetRenderer\n key={widget.id}\n widget={widget}\n onAction={onAction}\n />\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n\n {state === 'success' && result && isCompact && (\n <>\n <div\n className=\"flex-1 flex items-center gap-2 py-1 cursor-text min-w-0\"\n onClick={() => {\n setState('idle');\n setResult(null);\n }}\n >\n <svg className=\"w-4 h-4 text-green-600 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0\">\n {resultRenderer ? resultRenderer(result.data) : (result.message || 'Command executed successfully')}\n </div>\n </div>\n <button\n onClick={() => {\n setState('idle');\n setResult(null);\n }}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-neutral-300 dark:border-neutral-600',\n 'bg-white dark:bg-neutral-800',\n '!text-neutral-700 dark:!text-neutral-300',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n '!text-lg'\n )}\n title=\"New command\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n </div>\n\n {/* Bottom Action Bar - Only show for default variant when not in compact mode */}\n {!isCompact && (\n <div className=\"p-3 flex items-center justify-between gap-2\">\n {/* Left side - Attachment and Settings buttons */}\n <div className=\"flex items-center gap-1\">\n {state === 'idle' && allowInput && (\n <>\n {enableFileUpload && (\n <button\n onClick={() => fileInputRef.current?.click()}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n title=\"Attach file\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1.6, 2.4)\"/>\n </svg>\n </button>\n )}\n {planMode && (\n <div className=\"relative settings-menu-container\">\n <button\n onClick={() => setShowSettingsMenu(!showSettingsMenu)}\n className={cn(\n \"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n internalPlanMode ? \"!text-blue-600 dark:!text-blue-400\" : \"!text-neutral-500 dark:!text-neutral-500\"\n )}\n title=\"Settings\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"></line>\n <line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"></line>\n <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"></line>\n <line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"></line>\n <line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"></line>\n <line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"></line>\n <line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"></line>\n <line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"></line>\n </svg>\n </button>\n {showSettingsMenu && (\n <div className=\"absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container\">\n <label className=\"flex items-center justify-between cursor-pointer group\">\n <div className=\"flex items-center gap-2\">\n <svg className=\"w-4 h-4 text-neutral-500 dark:text-neutral-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <div>\n <div className=\"text-sm font-medium text-neutral-700 dark:text-neutral-300\">Plan Mode</div>\n <div className=\"text-xs text-neutral-500 dark:text-neutral-400\">Review before executing</div>\n </div>\n </div>\n <button\n onClick={(e) => {\n e.stopPropagation();\n setInternalPlanMode(!internalPlanMode);\n }}\n className={cn(\n \"relative inline-flex h-5 w-9 items-center rounded-full transition-colors\",\n internalPlanMode ? \"bg-blue-600\" : \"bg-neutral-300 dark:bg-neutral-600\"\n )}\n type=\"button\"\n >\n <span\n className={cn(\n \"inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform\",\n internalPlanMode ? \"translate-x-5\" : \"translate-x-0.5\"\n )}\n />\n </button>\n </label>\n </div>\n )}\n </div>\n )}\n </>\n )}\n </div>\n\n {/* Spacer when no attachment button */}\n {!(state === 'idle' && allowInput) && <div />}\n\n {/* Right side - Action buttons */}\n <div className=\"flex items-center gap-2\">\n {(state === 'success' || state === 'error') && allowInput && (\n <button\n onClick={resetCommand}\n className=\"px-3 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors\"\n >\n Reset\n </button>\n )}\n\n {(state === 'idle' || state === 'error') && (\n <button\n onClick={() => executeCommand()}\n disabled={!command.trim()}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all',\n 'border border-neutral-300 dark:border-neutral-600',\n 'bg-white dark:bg-neutral-800',\n '!text-neutral-700 dark:!text-neutral-300',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n '!text-lg',\n !command.trim() && 'border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600'\n )}\n title={state === 'error' ? 'Retry' : 'Execute'}\n >\n {state === 'error' ? (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n ) : (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n )}\n </button>\n )}\n </div>\n </div>\n )}\n\n {/* Plan Modal - Only for compact mode */}\n {showPlanDetails && isCompact && state === 'plan-pending' && (\n <div className=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4\" onClick={() => setShowPlanDetails(false)}>\n <div className=\"bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden\" onClick={(e) => e.stopPropagation()}>\n {/* Modal Header */}\n <div className=\"flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700\">\n <div className=\"flex items-center gap-3\">\n <svg className=\"w-6 h-6 text-blue-600 dark:text-blue-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <h2 className=\"text-xl font-semibold text-neutral-900 dark:text-white\">Proposed Execution Plan</h2>\n </div>\n <button\n onClick={() => setShowPlanDetails(false)}\n className=\"text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors\"\n >\n <svg className=\"w-6 h-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n {/* Modal Content */}\n <div className=\"p-6 overflow-y-auto max-h-[calc(80vh-180px)]\">\n <div className=\"prose prose-sm dark:prose-invert max-w-none\">\n <div className=\"text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed\">\n {plan}\n </div>\n </div>\n </div>\n\n {/* Modal Footer */}\n <div className=\"flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50\">\n <button\n onClick={rejectPlan}\n className=\"px-6 py-2.5 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors font-medium\"\n >\n Modify Command\n </button>\n <button\n onClick={approvePlan}\n className=\"px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium\"\n >\n Approve & Execute\n </button>\n </div>\n </div>\n </div>\n )}\n\n {/* Hidden file input */}\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n onChange={handleFileSelect}\n className=\"hidden\"\n accept=\"image/*,application/pdf,.doc,.docx,.txt\"\n />\n\n <style dangerouslySetInnerHTML={{\n __html: `\n @keyframes pulse-border {\n 0%, 100% {\n border-color: rgb(59, 130, 246);\n }\n 50% {\n border-color: rgb(147, 197, 253);\n }\n }\n .animate-pulse-border {\n animation: pulse-border 2s ease-in-out infinite;\n }\n `\n }} />\n </div>\n );\n}\n","import { useState, KeyboardEvent } from 'react';\nimport { PromptProps } from '../../types/components';\nimport { cn } from '../../utils';\nimport { aptevaClient } from '../../lib/apteva-client';\n\nexport function Prompt({\n agentId,\n placeholder = 'Enter your prompt...',\n initialValue = '',\n useMock = true,\n submitOn = 'button',\n debounceMs = 0,\n minLength = 0,\n maxLength,\n onSubmit,\n onResult,\n onChange,\n variant = 'inline',\n showSuggestions = false,\n className,\n}: PromptProps) {\n const [value, setValue] = useState(initialValue);\n const [isLoading, setIsLoading] = useState(false);\n const [suggestions] = useState(['Plan a trip', 'Write a description', 'Analyze data']);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!maxLength || newValue.length <= maxLength) {\n setValue(newValue);\n onChange?.(newValue);\n }\n };\n\n const handleSubmit = async () => {\n if (value.length < minLength) return;\n\n onSubmit?.(value);\n setIsLoading(true);\n\n try {\n if (useMock) {\n // MOCK MODE\n await new Promise((resolve) => setTimeout(resolve, 1500));\n const mockResult = `Enhanced version: ${value} [AI-generated content]`;\n onResult?.(mockResult);\n setValue('');\n } else {\n // REAL API MODE\n const response = await aptevaClient.chat({\n agent_id: agentId,\n message: value,\n });\n onResult?.(response.message);\n setValue('');\n }\n } catch (error) {\n console.error('Error processing prompt:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (submitOn === 'enter' && e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n const handleBlur = () => {\n if (submitOn === 'blur' && value.trim()) {\n handleSubmit();\n }\n };\n\n return (\n <div className={cn('space-y-2', className)}>\n <div className=\"flex gap-2\">\n <input\n type=\"text\"\n value={value}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n placeholder={placeholder}\n disabled={isLoading}\n className=\"flex-1 px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white\"\n />\n\n {submitOn === 'button' && (\n <button\n onClick={handleSubmit}\n disabled={isLoading || value.length < minLength}\n className=\"px-6 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n >\n {isLoading ? 'Processing...' : 'Generate'}\n </button>\n )}\n </div>\n\n {maxLength && (\n <p className=\"text-xs text-neutral-500\">\n {value.length} / {maxLength} characters\n </p>\n )}\n\n {showSuggestions && !value && (\n <div className=\"flex flex-wrap gap-2\">\n {suggestions.map((suggestion, idx) => (\n <button\n key={idx}\n onClick={() => setValue(suggestion)}\n className=\"px-3 py-1 text-sm bg-neutral-100 hover:bg-neutral-200 text-neutral-700 rounded-full transition-colors\"\n >\n {suggestion}\n </button>\n ))}\n </div>\n )}\n\n {isLoading && (\n <div className=\"flex items-center gap-2 text-sm text-neutral-500\">\n <div className=\"w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin\" />\n <span>AI is processing your request...</span>\n </div>\n )}\n </div>\n );\n}\n","import { useState, useEffect } from 'react';\nimport { StreamProps } from '../../types/components';\nimport { cn, generateMockStreamingResponse } from '../../utils';\nimport { aptevaClient } from '../../lib/apteva-client';\n\nexport function Stream({\n agentId,\n prompt,\n context,\n autoStart = false,\n useMock = true,\n onStart,\n onChunk,\n onComplete,\n onError,\n variant = 'prose',\n showCursor = true,\n typingSpeed = 30,\n className,\n}: StreamProps) {\n const [text, setText] = useState('');\n const [isStreaming, setIsStreaming] = useState(false);\n const [isComplete, setIsComplete] = useState(false);\n\n useEffect(() => {\n if (autoStart && !isStreaming && !isComplete) {\n startStreaming();\n }\n }, [autoStart]);\n\n const startStreaming = async () => {\n setIsStreaming(true);\n onStart?.();\n\n try {\n if (useMock) {\n // MOCK MODE\n const mockText =\n 'This is a simulated streaming response from the AI agent. ' +\n 'In a real implementation, this would stream data from your backend API. ' +\n 'The text appears word by word to simulate the streaming effect. ' +\n 'You can customize the typing speed and styling based on your needs.';\n\n await generateMockStreamingResponse(\n mockText,\n (chunk) => {\n setText((prev) => prev + chunk);\n onChunk?.(chunk);\n },\n typingSpeed\n );\n\n setIsComplete(true);\n setIsStreaming(false);\n onComplete?.(text + mockText);\n } else {\n // REAL API MODE\n let accumulatedText = '';\n\n await aptevaClient.chatStream(\n {\n agent_id: agentId,\n message: prompt,\n stream: true,\n },\n (chunk) => {\n if (chunk.type === 'token' && chunk.content) {\n accumulatedText += chunk.content;\n setText(accumulatedText);\n onChunk?.(chunk.content);\n }\n },\n () => {\n // On complete\n setIsComplete(true);\n setIsStreaming(false);\n onComplete?.(accumulatedText);\n },\n (error) => {\n // On error\n const err = error instanceof Error ? error : new Error('Streaming error');\n onError?.(err);\n setIsStreaming(false);\n }\n );\n }\n } catch (error) {\n const err = error instanceof Error ? error : new Error('Streaming error');\n onError?.(err);\n setIsStreaming(false);\n }\n };\n\n const variantClasses = {\n prose: 'prose prose-sm max-w-none dark:prose-invert',\n code: 'font-mono text-sm bg-neutral-900 text-green-400 p-4 rounded-lg',\n plain: 'text-neutral-900 dark:text-neutral-100',\n };\n\n if (!isStreaming && !isComplete) {\n return (\n <div className={cn('p-4', className)}>\n <button\n onClick={startStreaming}\n className=\"px-6 py-3 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium\"\n >\n Start Streaming\n </button>\n </div>\n );\n }\n\n return (\n <div className={cn(variantClasses[variant], className)}>\n {text}\n {isStreaming && showCursor && <span className=\"apteva-stream-cursor\" />}\n </div>\n );\n}\n","import { useState } from 'react';\nimport { Thread } from '../../types/messages';\nimport { ThreadItem } from './ThreadItem';\n\ninterface ThreadListProps {\n threads: Thread[];\n currentThreadId?: string;\n onThreadSelect?: (threadId: string) => void;\n onThreadDelete?: (threadId: string) => void;\n showSearch?: boolean;\n groupBy?: 'date' | 'agent' | 'none';\n}\n\nexport function ThreadList({\n threads,\n currentThreadId,\n onThreadSelect,\n onThreadDelete,\n showSearch = false,\n groupBy = 'none',\n}: ThreadListProps) {\n const [searchQuery, setSearchQuery] = useState('');\n\n const filteredThreads = threads.filter(\n (thread) =>\n thread.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n const groupedThreads = groupBy === 'date' ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };\n\n return (\n <div className=\"flex flex-col h-full\">\n {showSearch && (\n <div className=\"p-3 border-b border-neutral-200 dark:border-neutral-700\">\n <input\n type=\"text\"\n placeholder=\"Search conversations...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"w-full px-3 py-2 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white\"\n />\n </div>\n )}\n\n <div className=\"flex-1 overflow-y-auto\">\n {Object.entries(groupedThreads).map(([group, groupThreads]) => (\n <div key={group}>\n {groupBy !== 'none' && (\n <div className=\"px-3 py-2 text-xs font-semibold text-neutral-500 uppercase\">{group}</div>\n )}\n {groupThreads.map((thread) => (\n <ThreadItem\n key={thread.id}\n thread={thread}\n isActive={thread.id === currentThreadId}\n onSelect={() => onThreadSelect?.(thread.id)}\n onDelete={() => onThreadDelete?.(thread.id)}\n />\n ))}\n </div>\n ))}\n\n {filteredThreads.length === 0 && (\n <div className=\"p-8 text-center text-neutral-500\">\n <svg className=\"w-10 h-10 mx-auto mb-2 opacity-50\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\" />\n </svg>\n <p>No conversations found</p>\n </div>\n )}\n </div>\n </div>\n );\n}\n\nfunction groupThreadsByDate(threads: Thread[]): Record<string, Thread[]> {\n const now = new Date();\n const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n const yesterday = new Date(today);\n yesterday.setDate(yesterday.getDate() - 1);\n const lastWeek = new Date(today);\n lastWeek.setDate(lastWeek.getDate() - 7);\n\n return threads.reduce(\n (groups, thread) => {\n const threadDate = new Date(thread.updatedAt);\n let group = 'Older';\n\n if (threadDate >= today) {\n group = 'Today';\n } else if (threadDate >= yesterday) {\n group = 'Yesterday';\n } else if (threadDate >= lastWeek) {\n group = 'Last 7 Days';\n }\n\n if (!groups[group]) groups[group] = [];\n groups[group].push(thread);\n return groups;\n },\n {} as Record<string, Thread[]>\n );\n}\n","// No direct imports needed 'react';\nimport { Thread } from '../../types/messages';\nimport { cn } from '../../utils';\n\ninterface ThreadItemProps {\n thread: Thread;\n isActive?: boolean;\n onSelect?: () => void;\n onDelete?: () => void;\n}\n\nexport function ThreadItem({ thread, isActive = false, onSelect, onDelete }: ThreadItemProps) {\n return (\n <div\n className={cn('apteva-thread-item', {\n 'apteva-thread-item-active': isActive,\n })}\n onClick={onSelect}\n >\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"font-semibold text-neutral-900 dark:text-white truncate\">{thread.title}</h4>\n {thread.preview && <p className=\"text-sm text-neutral-600 dark:text-neutral-400 truncate\">{thread.preview}</p>}\n <div className=\"flex items-center gap-2 mt-1 text-xs text-neutral-500\">\n <span>{thread.messageCount} messages</span>\n <span>•</span>\n <span>{formatRelativeTime(thread.updatedAt)}</span>\n </div>\n </div>\n\n {onDelete && (\n <button\n onClick={(e) => {\n e.stopPropagation();\n onDelete();\n }}\n className=\"p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors\"\n title=\"Delete thread\"\n >\n 🗑️\n </button>\n )}\n </div>\n );\n}\n\nfunction formatRelativeTime(date: Date): string {\n const now = new Date();\n const diff = now.getTime() - date.getTime();\n const minutes = Math.floor(diff / 60000);\n const hours = Math.floor(diff / 3600000);\n const days = Math.floor(diff / 86400000);\n\n if (minutes < 1) return 'Just now';\n if (minutes < 60) return `${minutes}m ago`;\n if (hours < 24) return `${hours}h ago`;\n if (days < 7) return `${days}d ago`;\n return date.toLocaleDateString();\n}\n","// No direct imports needed 'react';\nimport { ThreadsProps } from '../../types/components';\nimport { ThreadList } from './ThreadList';\nimport { cn } from '../../utils';\n\nexport function Threads({\n threads,\n currentThreadId,\n onThreadSelect,\n onThreadDelete,\n onNewThread,\n variant = 'sidebar',\n showSearch = false,\n showNewButton = true,\n groupBy = 'none',\n className,\n}: ThreadsProps) {\n const variantClasses = {\n sidebar: 'h-full border-r border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900',\n dropdown: 'absolute top-full left-0 right-0 mt-2 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 max-h-96 overflow-hidden',\n tabs: 'flex gap-2 border-b border-neutral-200 dark:border-neutral-700 overflow-x-auto',\n };\n\n if (variant === 'tabs') {\n return (\n <div className={cn(variantClasses[variant], className)}>\n {threads.slice(0, 5).map((thread) => (\n <button\n key={thread.id}\n onClick={() => onThreadSelect?.(thread.id)}\n className={cn(\n 'px-4 py-2 whitespace-nowrap font-medium transition-colors',\n thread.id === currentThreadId\n ? 'border-b-2 border-apteva-500 text-apteva-500'\n : 'text-neutral-600 hover:text-neutral-900'\n )}\n >\n {thread.title}\n </button>\n ))}\n {showNewButton && onNewThread && (\n <button\n onClick={onNewThread}\n className=\"px-4 py-2 text-neutral-600 hover:text-apteva-500 transition-colors font-medium\"\n >\n + New\n </button>\n )}\n </div>\n );\n }\n\n return (\n <div className={cn(variantClasses[variant], 'flex flex-col', className)}>\n {showNewButton && onNewThread && (\n <div className=\"p-3 border-b border-neutral-200 dark:border-neutral-700\">\n <button\n onClick={onNewThread}\n className=\"w-full px-4 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium\"\n >\n + New Conversation\n </button>\n </div>\n )}\n\n <ThreadList\n threads={threads}\n currentThreadId={currentThreadId}\n onThreadSelect={onThreadSelect}\n onThreadDelete={onThreadDelete}\n showSearch={showSearch}\n groupBy={groupBy}\n />\n </div>\n );\n}\n","/**\n * Theme initialization script that runs before React hydration\n * This prevents flickering by setting the theme before the page renders\n * Must be inlined in the HTML <head> as a blocking script\n */\n\nexport const themeScript = `\n(function() {\n try {\n // Get system preference\n const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const colorMode = isDark ? 'dark' : 'light';\n\n // Set attributes before render\n document.documentElement.setAttribute('data-color-mode', colorMode);\n\n // Add dark class for Tailwind\n if (isDark) {\n document.documentElement.classList.add('dark');\n }\n } catch (e) {\n console.error('Failed to initialize theme:', e);\n }\n})();\n`;\n\nexport function getThemeScript() {\n return themeScript;\n}\n"]}
1
+ {"version":3,"sources":["/root/code/frontends/apteva/apteva-kit/dist/index.js","../src/components/Chat/Chat.tsx","../src/components/Chat/MessageList.tsx","../src/components/Chat/Message.tsx","../src/utils/cn.ts","../src/utils/mock-data.ts","../src/utils/file-utils.ts","../src/utils/widget-parser.ts","../src/utils/widget-context.ts","../src/components/Widgets/Widgets.tsx","../src/components/Widgets/widget-library/Card.tsx","../src/components/Widgets/widget-library/List.tsx","../src/components/Widgets/widget-library/Button.tsx","../src/components/Widgets/widget-library/ButtonGroup.tsx","../src/components/Widgets/widget-library/Table.tsx","../src/components/Widgets/WidgetRenderer.tsx","../src/components/Widgets/WidgetSkeleton.tsx","../src/components/Chat/MarkdownContent.tsx","../src/components/Chat/ToolCall.tsx","../src/components/Chat/WelcomeScreen.tsx","../src/components/Chat/Composer.tsx","../src/components/Chat/CommandComposer.tsx","../src/lib/apteva-client.ts","../src/components/Chat/CommandOutput.tsx","../src/components/Command/Command.tsx","../src/components/Prompt/Prompt.tsx","../src/components/Stream/Stream.tsx","../src/components/Threads/ThreadList.tsx","../src/components/Threads/ThreadItem.tsx","../src/components/Threads/Threads.tsx","../src/utils/theme-script.ts"],"names":["jsxs","jsx","useRef","useState","Fragment","useMemo","threadId","result","error"],"mappings":"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","file":"/root/code/frontends/apteva/apteva-kit/dist/index.js","sourcesContent":[null,"import { useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';\nimport { ChatProps, CommandResult } from '../../types/components';\nimport { Message as MessageType } from '../../types/messages';\nimport { MessageList } from './MessageList';\nimport { Composer } from './Composer';\nimport { CommandComposer } from './CommandComposer';\nimport { cn, generateMockResponse, generateMockCommandStream, buildMessageWithAttachments, ContentBlock, generateWidgetContext, generateCompactWidgetContext } from '../../utils';\nimport { aptevaClient } from '../../lib/apteva-client';\nimport { Widget } from '../../types/widgets';\nimport { WidgetRenderer } from '../Widgets/WidgetRenderer';\nimport { MarkdownContent } from './MarkdownContent';\n\nexport interface ChatHandle {\n /** Send a message programmatically (as if the user typed it) */\n sendMessage: (text: string) => Promise<void>;\n /** Send a system/background message (not shown as user message, just triggers agent) */\n sendSystemMessage: (text: string) => Promise<void>;\n /** Get current messages */\n getMessages: () => MessageType[];\n /** Clear all messages */\n clearMessages: () => void;\n}\n\nexport const Chat = forwardRef<ChatHandle, ChatProps>(function Chat({\n agentId,\n threadId,\n initialMessages = [],\n context,\n apiUrl,\n apiKey,\n useMock = false,\n // Mode switching\n initialMode = 'chat',\n showModeToggle = false,\n onModeChange,\n // Command mode options\n commandVariant = 'default',\n planMode = false,\n onPlanModeChange,\n enableStreaming = true,\n showProgress = true,\n loadingText = 'Processing...',\n // Welcome screen\n welcomeTitle,\n welcomeSubtitle,\n welcomeIcon,\n suggestedPrompts,\n welcomeVariant,\n // Events\n onThreadChange,\n onMessageSent,\n onAction,\n onFileUpload,\n onComplete,\n onError,\n onToolCall,\n onToolResult,\n // UI\n placeholder,\n showHeader = true,\n headerTitle = 'Chat',\n\n // Widget detection\n enableWidgets = false,\n availableWidgets,\n compactWidgetContext = false,\n onWidgetRender,\n\n className,\n}: ChatProps, ref: React.ForwardedRef<ChatHandle>) {\n const [messages, setMessages] = useState<MessageType[]>(initialMessages);\n const [isLoading, setIsLoading] = useState(false);\n const [currentThreadId, setCurrentThreadId] = useState<string | null>(threadId || null);\n const [mode, setMode] = useState<'chat' | 'command'>(initialMode);\n const [chatToolName, setChatToolName] = useState<string | null>(null); // Track tool name for chat mode header\n\n // Command mode state\n const [commandState, setCommandState] = useState<'idle' | 'loading' | 'success' | 'error' | 'plan-pending'>('idle');\n const [commandResult, setCommandResult] = useState<CommandResult | null>(null);\n const [commandError, setCommandError] = useState<Error | null>(null);\n const [progress, setProgress] = useState(0);\n const [commandInput, setCommandInput] = useState('');\n const [streamedContent, setStreamedContent] = useState('');\n const [currentToolName, setCurrentToolName] = useState<string | null>(null);\n const [currentRequestId, setCurrentRequestId] = useState<string | null>(null);\n const [plan, setPlan] = useState<string>('');\n const [pendingCommand, setPendingCommand] = useState<string>('');\n const [internalPlanMode, setInternalPlanMode] = useState(planMode);\n const [showSettingsMenu, setShowSettingsMenu] = useState(false);\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n // Store handleSendMessage ref so we can call it from useImperativeHandle\n const handleSendMessageRef = useRef<((text: string, files?: File[], isSystem?: boolean) => Promise<void>) | null>(null);\n\n // Expose imperative methods via ref\n useImperativeHandle(ref, () => ({\n sendMessage: async (text: string) => {\n if (handleSendMessageRef.current) {\n await handleSendMessageRef.current(text);\n }\n },\n sendSystemMessage: async (text: string) => {\n if (handleSendMessageRef.current) {\n await handleSendMessageRef.current(text, undefined, true);\n }\n },\n getMessages: () => messages,\n clearMessages: () => setMessages([]),\n }), [messages]);\n\n // Generate effective context with widget definitions if enabled\n const effectiveContext = useMemo(() => {\n if (!enableWidgets) return context;\n const widgetContext = compactWidgetContext\n ? generateCompactWidgetContext(availableWidgets)\n : generateWidgetContext(availableWidgets);\n return context ? `${context}\\n${widgetContext}` : widgetContext;\n }, [context, enableWidgets, availableWidgets, compactWidgetContext]);\n\n // Configure API client if props provided\n useEffect(() => {\n if (apiUrl || apiKey) {\n aptevaClient.configure({\n ...(apiUrl && { apiUrl }),\n ...(apiKey && { apiKey }),\n });\n }\n }, [apiUrl, apiKey]);\n\n useEffect(() => {\n if (threadId) {\n onThreadChange?.(threadId);\n }\n }, [threadId, onThreadChange]);\n\n // Sync internal plan mode with prop\n useEffect(() => {\n setInternalPlanMode(planMode);\n }, [planMode]);\n\n // Close settings menu when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (showSettingsMenu && !target.closest('.settings-menu-container')) {\n setShowSettingsMenu(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [showSettingsMenu]);\n\n const handleModeChange = (newMode: 'chat' | 'command') => {\n setMode(newMode);\n onModeChange?.(newMode);\n // Reset command state when switching modes\n if (newMode === 'command') {\n setCommandState('idle');\n setCommandResult(null);\n setCommandError(null);\n }\n };\n\n const defaultPlaceholder = mode === 'chat' ? 'Type a message...' : 'Enter your command...';\n\n // ==================== CHAT MODE LOGIC ====================\n const handleSendMessage = async (text: string, files?: File[], isSystem?: boolean) => {\n // Build display content for user message\n const hasFiles = files && files.length > 0;\n const fileNames = hasFiles ? files.map(f => f.name) : [];\n const displayContent = hasFiles\n ? `${text}${text ? '\\n' : ''}[Attached: ${fileNames.join(', ')}]`\n : text;\n\n // Only add user message to UI if not a system message\n if (!isSystem) {\n const userMessage: MessageType = {\n id: `msg-${Date.now()}`,\n role: 'user',\n content: displayContent,\n timestamp: new Date(),\n metadata: hasFiles ? { attachments: fileNames } : undefined,\n };\n\n setMessages((prev) => [...prev, userMessage]);\n onMessageSent?.(userMessage);\n }\n setIsLoading(true);\n\n try {\n // Build structured message with attachments\n const messagePayload = await buildMessageWithAttachments(text, files);\n\n if (useMock) {\n const response = await generateMockResponse(1000);\n setMessages((prev) => [...prev, response]);\n } else {\n let contentSegments: Array<{ type: 'text'; content: string } | { type: 'tool'; id: string; name: string; result?: any }> = [];\n let currentTextBuffer = '';\n let accumulatedWidgets: Widget[] = [];\n let responseThreadId = currentThreadId;\n let toolInputBuffer = '';\n const streamingMessageId = `msg-${Date.now()}`; // Stable ID for entire stream\n\n const updateMessage = () => {\n const segments = [...contentSegments];\n if (currentTextBuffer) {\n const lastSegment = segments[segments.length - 1];\n if (lastSegment && lastSegment.type === 'text') {\n lastSegment.content = currentTextBuffer;\n } else {\n segments.push({ type: 'text', content: currentTextBuffer });\n }\n }\n\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage && lastMessage.role === 'assistant') {\n return [\n ...prev.slice(0, -1),\n {\n ...lastMessage,\n content: currentTextBuffer,\n widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : undefined,\n metadata: { ...lastMessage.metadata, content_segments: segments, isStreaming: true },\n }\n ];\n } else {\n return [\n ...prev,\n {\n id: streamingMessageId,\n role: 'assistant' as const,\n content: currentTextBuffer,\n widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : undefined,\n timestamp: new Date(),\n metadata: { content_segments: segments, isStreaming: true },\n }\n ];\n }\n });\n };\n\n await aptevaClient.chatStream(\n {\n agent_id: agentId,\n message: messagePayload,\n stream: true,\n ...(currentThreadId && { thread_id: currentThreadId }),\n ...(effectiveContext && { system: effectiveContext }),\n },\n (chunk) => {\n switch (chunk.type) {\n case 'thread_id':\n if (chunk.thread_id) {\n responseThreadId = chunk.thread_id;\n if (!currentThreadId) {\n setCurrentThreadId(chunk.thread_id);\n onThreadChange?.(chunk.thread_id);\n }\n }\n break;\n case 'request_id':\n if (chunk.request_id) {\n setCurrentRequestId(chunk.request_id);\n }\n break;\n case 'content':\n case 'token':\n if (chunk.content) {\n currentTextBuffer += chunk.content;\n updateMessage();\n }\n break;\n case 'tool_call':\n if (chunk.tool_id && chunk.tool_name) {\n if (currentTextBuffer) {\n contentSegments.push({ type: 'text', content: currentTextBuffer });\n currentTextBuffer = '';\n }\n contentSegments.push({ type: 'tool', id: chunk.tool_id, name: chunk.tool_name });\n toolInputBuffer = '';\n setChatToolName(chunk.tool_name); // Show tool name in header\n onToolCall?.(chunk.tool_name, chunk.tool_id);\n updateMessage();\n }\n break;\n case 'tool_input_delta':\n if (chunk.tool_id && chunk.content) {\n toolInputBuffer += chunk.content;\n }\n break;\n case 'tool_result':\n if (chunk.tool_id) {\n const toolSegment = contentSegments.find((s) => s.type === 'tool' && s.id === chunk.tool_id) as { type: 'tool'; id: string; name: string; result?: any } | undefined;\n if (toolSegment) {\n toolSegment.result = chunk.content;\n onToolResult?.(toolSegment.name, chunk.content);\n }\n setChatToolName(null); // Clear tool name from header\n updateMessage();\n }\n break;\n case 'widget':\n if (chunk.widget) {\n accumulatedWidgets.push(chunk.widget);\n // Widget reporting happens in Message.tsx to avoid duplicates\n updateMessage();\n }\n break;\n case 'error':\n throw new Error(chunk.message || 'Stream error');\n }\n },\n (threadId) => {\n if (currentTextBuffer) {\n const lastSegment = contentSegments[contentSegments.length - 1];\n if (lastSegment && lastSegment.type === 'text') {\n lastSegment.content = currentTextBuffer;\n } else {\n contentSegments.push({ type: 'text', content: currentTextBuffer });\n }\n }\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage && lastMessage.role === 'assistant') {\n return [\n ...prev.slice(0, -1),\n {\n ...lastMessage,\n // Keep the same ID to avoid React remounting the component\n content: currentTextBuffer || 'Response received',\n widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : undefined,\n metadata: { thread_id: threadId, content_segments: contentSegments, isStreaming: false },\n }\n ];\n }\n return prev;\n });\n if (threadId && threadId !== currentThreadId) {\n setCurrentThreadId(threadId);\n onThreadChange?.(threadId);\n }\n setIsLoading(false);\n setCurrentRequestId(null);\n setChatToolName(null);\n },\n (error) => {\n const errorMessage: MessageType = {\n id: `msg-${Date.now()}-error`,\n role: 'assistant',\n content: `Error: ${error.message}`,\n timestamp: new Date(),\n metadata: { error: true },\n };\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage && lastMessage.id.includes('streaming')) {\n return [...prev.slice(0, -1), errorMessage];\n }\n return [...prev, errorMessage];\n });\n setIsLoading(false);\n setCurrentRequestId(null);\n setChatToolName(null);\n onError?.(error);\n }\n );\n }\n } catch (error) {\n const errorMessage: MessageType = {\n id: `msg-${Date.now()}-error`,\n role: 'assistant',\n content: error instanceof Error ? `Error: ${error.message}` : 'An error occurred',\n timestamp: new Date(),\n metadata: { error: true },\n };\n setMessages((prev) => [...prev, errorMessage]);\n onError?.(error instanceof Error ? error : new Error('Unknown error'));\n } finally {\n setIsLoading(false);\n }\n };\n\n // Assign to ref so useImperativeHandle can call it\n handleSendMessageRef.current = handleSendMessage;\n\n // ==================== COMMAND MODE LOGIC ====================\n const executeCommand = async (commandOverride?: string, files?: File[]) => {\n const currentCommand = commandOverride || commandInput;\n if (!currentCommand.trim() && (!files || files.length === 0)) {\n setCommandError(new Error('Please enter a command'));\n setCommandState('error');\n return;\n }\n\n // Plan mode: show plan first\n if (internalPlanMode && commandState !== 'plan-pending') {\n setCommandState('loading');\n setCommandError(null);\n setCommandInput('');\n\n if (useMock) {\n setTimeout(() => {\n const mockPlan = `1. Analyze the request: \"${currentCommand}\"\\n2. Process the data\\n3. Generate response\\n4. Return results`;\n setPlan(mockPlan);\n setPendingCommand(currentCommand);\n setCommandState('plan-pending');\n }, 800);\n } else {\n try {\n const planningInstruction = `CRITICAL PLANNING MODE: You are ONLY creating a plan. Write a numbered list of steps describing what WOULD be done. DO NOT execute anything.`;\n const systemMessage = effectiveContext ? `${effectiveContext}\\n\\n${planningInstruction}` : planningInstruction;\n\n const response = await aptevaClient.chat({\n agent_id: agentId,\n message: currentCommand,\n stream: false,\n system: systemMessage,\n });\n setPlan(response.message);\n setPendingCommand(currentCommand);\n setCommandState('plan-pending');\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Failed to generate plan');\n setCommandError(error);\n setCommandState('error');\n onError?.(error);\n }\n }\n return;\n }\n\n setCommandState('loading');\n setCommandError(null);\n setProgress(0);\n setStreamedContent('');\n setCommandInput('');\n\n try {\n if (useMock) {\n if (enableStreaming) {\n let accumulatedContent = '';\n generateMockCommandStream(\n currentCommand,\n (chunk) => {\n if (chunk.type === 'token' && chunk.content) {\n accumulatedContent += chunk.content;\n setStreamedContent(accumulatedContent);\n const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);\n setProgress(estimatedProgress);\n }\n },\n (threadId) => {\n const result: CommandResult = {\n success: true,\n data: { summary: accumulatedContent, thread_id: threadId },\n message: accumulatedContent || 'Command executed successfully',\n };\n setCommandResult(result);\n setCommandState('success');\n setProgress(100);\n onComplete?.(result);\n },\n (error) => {\n setCommandError(error);\n setCommandState('error');\n onError?.(error);\n }\n );\n } else {\n await new Promise(resolve => setTimeout(resolve, 1500));\n const result: CommandResult = {\n success: true,\n data: { summary: `Executed: ${currentCommand}` },\n message: `Command executed successfully`,\n };\n setCommandResult(result);\n setCommandState('success');\n setProgress(100);\n onComplete?.(result);\n }\n } else {\n // Real API\n const commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you\\'re doing or the result. Examples: \"Analyzing customer data from last quarter...\" or \"Created 5 new database entries successfully\" or \"Search complete: found 12 matching results\". NO greetings, NO filler words, NO clarification requests. Action/result only.';\n const systemMessage = effectiveContext ? `${effectiveContext}\\n\\n${commandInstruction}` : commandInstruction;\n\n // Build message with attachments if files provided\n const messagePayload = files && files.length > 0\n ? await buildMessageWithAttachments(currentCommand, files)\n : currentCommand;\n\n if (enableStreaming) {\n let accumulatedContent = '';\n let lastToolName = '';\n await aptevaClient.chatStream(\n {\n agent_id: agentId,\n message: messagePayload,\n stream: true,\n ...(currentThreadId && { thread_id: currentThreadId }),\n system: systemMessage,\n },\n (chunk) => {\n if ((chunk.type === 'token' || chunk.type === 'content') && chunk.content) {\n accumulatedContent += chunk.content;\n setStreamedContent(accumulatedContent);\n setCurrentToolName(null); // Clear tool name when we get content\n const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);\n setProgress(estimatedProgress);\n } else if (chunk.type === 'tool_call' && chunk.tool_name) {\n lastToolName = chunk.tool_name;\n setCurrentToolName(chunk.tool_name);\n onToolCall?.(chunk.tool_name, chunk.tool_id || '');\n // Reset for display - show only tool, not accumulated text\n accumulatedContent = '';\n setStreamedContent('');\n } else if (chunk.type === 'tool_result') {\n onToolResult?.(lastToolName, chunk.content);\n setCurrentToolName(null); // Tool finished, will show next content\n } else if (chunk.type === 'thread_id' && chunk.thread_id) {\n if (!currentThreadId) {\n setCurrentThreadId(chunk.thread_id);\n onThreadChange?.(chunk.thread_id);\n }\n } else if (chunk.type === 'request_id' && chunk.request_id) {\n setCurrentRequestId(chunk.request_id);\n }\n },\n (threadId) => {\n const result: CommandResult = {\n success: true,\n data: { summary: accumulatedContent, thread_id: threadId },\n message: accumulatedContent || 'Command executed successfully',\n };\n setCommandResult(result);\n setCommandState('success');\n setProgress(100);\n setCurrentRequestId(null);\n onComplete?.(result);\n },\n (error) => {\n setCommandError(error);\n setCommandState('error');\n setCurrentRequestId(null);\n onError?.(error);\n }\n );\n } else {\n const response = await aptevaClient.chat({\n agent_id: agentId,\n message: messagePayload,\n stream: false,\n ...(currentThreadId && { thread_id: currentThreadId }),\n system: systemMessage,\n });\n const result: CommandResult = {\n success: true,\n data: { summary: response.message, thread_id: response.thread_id },\n widgets: response.widgets,\n message: response.message,\n };\n setCommandResult(result);\n setCommandState('success');\n setProgress(100);\n onComplete?.(result);\n }\n }\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Unknown error');\n setCommandError(error);\n setCommandState('error');\n onError?.(error);\n }\n };\n\n const resetCommand = () => {\n setCommandState('idle');\n setCommandResult(null);\n setCommandError(null);\n setProgress(0);\n setCommandInput('');\n setPlan('');\n setPendingCommand('');\n setStreamedContent('');\n setCurrentToolName(null);\n };\n\n const approvePlan = () => {\n const planToExecute = plan;\n setPlan('');\n setPendingCommand('');\n const executionMessage = `Execute this plan now:\\n\\n${planToExecute}`;\n executeCommand(executionMessage);\n };\n\n const rejectPlan = () => {\n setCommandInput(pendingCommand);\n setPlan('');\n setPendingCommand('');\n setCommandState('idle');\n };\n\n // Stop generation handler\n const handleStop = async () => {\n // Call cancel API if we have a request ID\n if (currentRequestId && agentId) {\n try {\n await aptevaClient.cancelRequest(agentId, currentRequestId);\n } catch (error) {\n console.error('Failed to cancel request:', error);\n }\n }\n\n // For chat mode\n setIsLoading(false);\n // For command mode\n if (commandState === 'loading') {\n setCommandState('idle');\n setStreamedContent('');\n setCurrentToolName(null);\n setProgress(0);\n }\n // Clear request ID\n setCurrentRequestId(null);\n };\n\n const isCompact = commandVariant === 'compact';\n\n // ==================== RENDER ====================\n return (\n <div className={cn('apteva-chat flex flex-col h-full', className)}>\n {/* Header - only show in chat mode when showHeader is true */}\n {showHeader && mode === 'chat' && (\n <div className=\"apteva-chat-header px-4 py-3 flex items-center justify-between\">\n <div>\n <div className=\"apteva-chat-title\">{headerTitle}</div>\n <div className={cn(\n \"apteva-chat-status\",\n isLoading\n ? chatToolName\n ? \"apteva-chat-status-tool\"\n : \"apteva-chat-status-thinking\"\n : \"apteva-chat-status-ready\"\n )}>\n {isLoading\n ? chatToolName\n ? `Using ${chatToolName}...`\n : 'Thinking...'\n : 'Ready'}\n </div>\n </div>\n </div>\n )}\n\n {/* CHAT MODE */}\n {mode === 'chat' && (\n <>\n <MessageList\n messages={messages}\n onAction={onAction}\n welcomeTitle={welcomeTitle}\n welcomeSubtitle={welcomeSubtitle}\n welcomeIcon={welcomeIcon}\n suggestedPrompts={suggestedPrompts}\n welcomeVariant={welcomeVariant}\n onPromptClick={(prompt) => handleSendMessage(prompt)}\n enableWidgets={enableWidgets}\n onWidgetRender={onWidgetRender}\n />\n <Composer\n onSendMessage={handleSendMessage}\n placeholder={placeholder || defaultPlaceholder}\n disabled={isLoading}\n isLoading={isLoading}\n onStop={handleStop}\n onFileUpload={onFileUpload}\n onSwitchMode={showModeToggle ? () => handleModeChange('command') : undefined}\n />\n </>\n )}\n\n {/* COMMAND MODE - Self-contained composer with inline response */}\n {mode === 'command' && (\n <div className=\"w-full\">\n <CommandComposer\n onExecute={(text, files) => {\n setCommandInput(text);\n executeCommand(text, files);\n }}\n state={commandState}\n response={commandResult?.data?.summary || commandResult?.message}\n error={commandError?.message}\n plan={plan}\n streamedContent={streamedContent}\n toolName={currentToolName}\n onApprove={approvePlan}\n onReject={rejectPlan}\n onReset={resetCommand}\n onStop={handleStop}\n onExpand={showModeToggle ? () => handleModeChange('chat') : undefined}\n placeholder={placeholder || 'Enter your command...'}\n />\n </div>\n )}\n\n <style dangerouslySetInnerHTML={{\n __html: `\n @keyframes pulse-border {\n 0%, 100% { border-color: rgb(59, 130, 246); }\n 50% { border-color: rgb(147, 197, 253); }\n }\n .animate-pulse-border {\n animation: pulse-border 2s ease-in-out infinite;\n }\n .apteva-composer {\n border-radius: var(--apteva-border-radius, 1rem) !important;\n }\n `\n }} />\n </div>\n );\n});\n","import { useEffect, useRef } from 'react';\nimport { Message as MessageType } from '../../types/messages';\nimport { SuggestedPrompt } from '../../types/components';\nimport { Widget } from '../../types/widgets';\nimport { Message } from './Message';\nimport { WelcomeScreen } from './WelcomeScreen';\nimport { ActionEvent } from '../../types/actions';\n\ninterface MessageListProps {\n messages: MessageType[];\n onAction?: (action: ActionEvent) => void;\n // Welcome screen props\n welcomeTitle?: string;\n welcomeSubtitle?: string;\n welcomeIcon?: React.ReactNode;\n suggestedPrompts?: (string | SuggestedPrompt)[];\n welcomeVariant?: 'centered' | 'minimal';\n onPromptClick?: (prompt: string) => void;\n // Widget detection\n enableWidgets?: boolean;\n onWidgetRender?: (widget: Widget) => void;\n}\n\nexport function MessageList({\n messages,\n onAction,\n welcomeTitle,\n welcomeSubtitle,\n welcomeIcon,\n suggestedPrompts,\n welcomeVariant,\n onPromptClick,\n enableWidgets,\n onWidgetRender,\n}: MessageListProps) {\n const listRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n // Auto-scroll to bottom when new messages arrive\n if (listRef.current) {\n listRef.current.scrollTop = listRef.current.scrollHeight;\n }\n }, [messages]);\n\n return (\n <div ref={listRef} className=\"apteva-message-list apteva-scrollbar-hidden\">\n {messages.length === 0 ? (\n <WelcomeScreen\n title={welcomeTitle}\n subtitle={welcomeSubtitle}\n icon={welcomeIcon}\n prompts={suggestedPrompts}\n variant={welcomeVariant}\n onPromptClick={onPromptClick || (() => {})}\n />\n ) : (\n messages.map((message) => (\n <div key={message.id} className={message.role === 'user' ? 'apteva-message-row-user' : 'apteva-message-row-assistant'}>\n <Message message={message} onAction={onAction} enableWidgets={enableWidgets} onWidgetRender={onWidgetRender} />\n </div>\n ))\n )}\n </div>\n );\n}\n","import { useEffect, useRef, useMemo } from 'react';\nimport { Message as MessageType } from '../../types/messages';\nimport { Widget } from '../../types/widgets';\nimport { cn, parseWidgetsFromText } from '../../utils';\nimport { Widgets } from '../Widgets';\nimport { ActionEvent } from '../../types/actions';\nimport { MarkdownContent } from './MarkdownContent';\nimport { ToolCall } from './ToolCall';\nimport { WidgetRenderer } from '../Widgets/WidgetRenderer';\nimport { WidgetSkeleton } from '../Widgets/WidgetSkeleton';\n\ntype ContentSegment =\n | { type: 'text'; content: string }\n | { type: 'tool'; id: string; name: string; result?: any };\n\ninterface MessageProps {\n message: MessageType;\n onAction?: (action: ActionEvent) => void;\n enableWidgets?: boolean;\n onWidgetRender?: (widget: Widget) => void;\n}\n\nexport function Message({ message, onAction, enableWidgets, onWidgetRender }: MessageProps) {\n const isUser = message.role === 'user';\n const contentSegments = message.metadata?.content_segments as ContentSegment[] | undefined;\n const isStreaming = message.metadata?.isStreaming === true;\n const hasContent = message.content || (contentSegments && contentSegments.length > 0);\n\n // Track which widgets we've already reported to avoid duplicates\n const reportedWidgetsRef = useRef<Set<string>>(new Set());\n\n // Parse widgets from content (memoized to avoid reparsing on every render)\n const parsedWidgets = useMemo(() => {\n if (!enableWidgets || isUser || !message.content) {\n return [];\n }\n const parsed = parseWidgetsFromText(message.content);\n return parsed.segments\n .filter((seg): seg is { type: 'widget'; widget: Widget } => seg.type === 'widget' && !!seg.widget)\n .map(seg => seg.widget);\n }, [enableWidgets, isUser, message.content]);\n\n // Report message.widgets when they change\n useEffect(() => {\n if (onWidgetRender && message.widgets) {\n for (const widget of message.widgets) {\n if (!reportedWidgetsRef.current.has(widget.id)) {\n reportedWidgetsRef.current.add(widget.id);\n onWidgetRender(widget);\n }\n }\n }\n }, [message.widgets, onWidgetRender]);\n\n // Report parsed widgets from text content (after render)\n useEffect(() => {\n if (onWidgetRender && parsedWidgets.length > 0) {\n for (const widget of parsedWidgets) {\n if (!reportedWidgetsRef.current.has(widget.id)) {\n reportedWidgetsRef.current.add(widget.id);\n onWidgetRender(widget);\n }\n }\n }\n }, [parsedWidgets, onWidgetRender]);\n\n // Render text content (markdown only, no widgets - widgets rendered separately)\n const renderTextContent = (text: string) => {\n if (!enableWidgets || isUser) {\n return <MarkdownContent content={text} />;\n }\n\n // Parse to get cleaned text (strips @ui: patterns)\n const parsed = parseWidgetsFromText(text);\n\n // Combine all text segments\n const cleanedText = parsed.segments\n .filter(seg => seg.type === 'text' && seg.content)\n .map(seg => seg.content)\n .join('');\n\n if (!cleanedText.trim()) {\n return null;\n }\n\n return <MarkdownContent content={cleanedText} />;\n };\n\n // Render content with widgets as separate elements (like tool calls)\n const renderContentWithWidgets = () => {\n if (!enableWidgets || isUser || !message.content) {\n return null;\n }\n\n const parsed = parseWidgetsFromText(message.content);\n const elements: React.ReactNode[] = [];\n let textBuffer = '';\n\n parsed.segments.forEach((segment, index) => {\n if (segment.type === 'text' && segment.content) {\n textBuffer += segment.content;\n } else if (segment.type === 'widget' && segment.widget) {\n // Flush text buffer as a bubble\n if (textBuffer.trim()) {\n elements.push(\n <div key={`text-${index}`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n textBuffer = '';\n }\n // Render widget standalone\n elements.push(\n <div key={`widget-${index}`} className=\"apteva-widget-standalone\">\n <WidgetRenderer widget={segment.widget} onAction={onAction} />\n </div>\n );\n } else if (segment.type === 'widget_pending' && segment.pendingType) {\n // Flush text buffer as a bubble\n if (textBuffer.trim()) {\n elements.push(\n <div key={`text-${index}`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n textBuffer = '';\n }\n // Render skeleton standalone\n elements.push(\n <div key={`pending-${index}`} className=\"apteva-widget-standalone\">\n <WidgetSkeleton type={segment.pendingType} />\n </div>\n );\n }\n });\n\n // Flush remaining text\n if (textBuffer.trim()) {\n elements.push(\n <div key=\"text-final\" className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n }\n\n return elements.length > 0 ? elements : null;\n };\n\n // Render content with inline tool calls\n const renderContent = () => {\n if (isUser) {\n return <div className=\"apteva-message-text\">{message.content}</div>;\n }\n\n // Show typing indicator for streaming messages without content\n if (isStreaming && !hasContent) {\n return (\n <div className=\"apteva-typing-indicator\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n );\n }\n\n // If we have content segments, render them in order\n // This is handled differently - returns array of elements for split bubbles\n if (contentSegments && contentSegments.length > 0) {\n return null; // Handled by renderSegmentedContent\n }\n\n // Fallback to just content\n return renderTextContent(message.content);\n };\n\n // Render text segment with widgets separated out\n const renderTextSegmentWithWidgets = (text: string, keyPrefix: string) => {\n if (!enableWidgets) {\n return (\n <div key={keyPrefix} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={text} />\n </div>\n </div>\n );\n }\n\n const parsed = parseWidgetsFromText(text);\n const elements: React.ReactNode[] = [];\n let textBuffer = '';\n\n parsed.segments.forEach((seg, idx) => {\n if (seg.type === 'text' && seg.content) {\n textBuffer += seg.content;\n } else if (seg.type === 'widget' && seg.widget) {\n if (textBuffer.trim()) {\n elements.push(\n <div key={`${keyPrefix}-text-${idx}`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n textBuffer = '';\n }\n elements.push(\n <div key={`${keyPrefix}-widget-${idx}`} className=\"apteva-widget-standalone\">\n <WidgetRenderer widget={seg.widget} onAction={onAction} />\n </div>\n );\n } else if (seg.type === 'widget_pending' && seg.pendingType) {\n if (textBuffer.trim()) {\n elements.push(\n <div key={`${keyPrefix}-text-${idx}`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n textBuffer = '';\n }\n elements.push(\n <div key={`${keyPrefix}-pending-${idx}`} className=\"apteva-widget-standalone\">\n <WidgetSkeleton type={seg.pendingType} />\n </div>\n );\n }\n });\n\n if (textBuffer.trim()) {\n elements.push(\n <div key={`${keyPrefix}-text-final`} className=\"apteva-message-bubble apteva-message-assistant\">\n <div className=\"apteva-message-content-assistant\">\n <MarkdownContent content={textBuffer} />\n </div>\n </div>\n );\n }\n\n return elements;\n };\n\n // Render segmented content with separate bubbles for text and tool calls outside bubbles\n const renderSegmentedContent = () => {\n if (!contentSegments || contentSegments.length === 0) {\n return null;\n }\n\n const elements: React.ReactNode[] = [];\n\n contentSegments.forEach((segment, index) => {\n if (segment.type === 'text' && segment.content) {\n const textElements = renderTextSegmentWithWidgets(segment.content, `seg-${index}`);\n if (Array.isArray(textElements)) {\n elements.push(...textElements);\n } else {\n elements.push(textElements);\n }\n } else if (segment.type === 'tool') {\n elements.push(\n <div key={segment.id} className=\"apteva-tool-call-standalone\">\n <ToolCall\n name={segment.name}\n status={segment.result !== undefined ? 'completed' : 'running'}\n />\n </div>\n );\n }\n });\n\n return elements;\n };\n\n // For assistant messages with content segments (tool calls), render as separate bubbles\n if (!isUser && contentSegments && contentSegments.length > 0) {\n return (\n <div className=\"apteva-message-segmented\">\n {renderSegmentedContent()}\n\n {message.widgets && message.widgets.length > 0 && (\n <div className=\"apteva-widget-standalone\">\n <Widgets widgets={message.widgets} onAction={onAction} layout=\"stack\" />\n </div>\n )}\n\n <div className=\"apteva-message-timestamp apteva-message-timestamp-assistant\" suppressHydrationWarning>\n {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n </div>\n </div>\n );\n }\n\n // For assistant messages with widgets in content, render with separate bubbles\n const widgetContent = renderContentWithWidgets();\n if (!isUser && enableWidgets && widgetContent) {\n return (\n <div className=\"apteva-message-segmented\">\n {widgetContent}\n\n {message.widgets && message.widgets.length > 0 && (\n <div className=\"apteva-widget-standalone\">\n <Widgets widgets={message.widgets} onAction={onAction} layout=\"stack\" />\n </div>\n )}\n\n <div className=\"apteva-message-timestamp apteva-message-timestamp-assistant\" suppressHydrationWarning>\n {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={cn(\n 'apteva-message-bubble',\n isUser ? 'apteva-message-user' : 'apteva-message-assistant'\n )}\n >\n <div className={isUser ? 'apteva-message-content-user' : 'apteva-message-content-assistant'}>\n {renderContent()}\n </div>\n\n {message.widgets && message.widgets.length > 0 && (\n <div className=\"apteva-widget-standalone\">\n <Widgets widgets={message.widgets} onAction={onAction} layout=\"stack\" />\n </div>\n )}\n\n <div className={cn('apteva-message-timestamp', isUser ? 'apteva-message-timestamp-user' : 'apteva-message-timestamp-assistant')} suppressHydrationWarning>\n {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n </div>\n </div>\n );\n}\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { Message, Thread } from '../types/messages';\nimport { Widget } from '../types/widgets';\n\nexport const mockMessages: Message[] = [\n {\n id: 'msg-1',\n role: 'assistant',\n content: 'Hello! I\\'m your AI assistant. How can I help you today?',\n timestamp: new Date(Date.now() - 3600000),\n },\n {\n id: 'msg-2',\n role: 'user',\n content: 'I want to plan a trip to Europe',\n timestamp: new Date(Date.now() - 3500000),\n },\n {\n id: 'msg-3',\n role: 'assistant',\n content: 'Great choice! Europe has amazing destinations. What\\'s your budget and how many days do you have?',\n timestamp: new Date(Date.now() - 3400000),\n },\n {\n id: 'msg-4',\n role: 'user',\n content: 'Around $2000 for 5 days',\n timestamp: new Date(Date.now() - 3300000),\n },\n {\n id: 'msg-5',\n role: 'assistant',\n content: 'Perfect! I found some great destinations that fit your budget:',\n widgets: [\n {\n type: 'list',\n id: 'destinations-1',\n props: {\n items: [\n {\n id: 'paris',\n title: 'Paris, France',\n subtitle: '5 days • $1,850',\n description: 'The City of Light with iconic landmarks',\n metadata: { city: 'Paris', country: 'France', lat: 48.8566, lng: 2.3522, price: 1850, days: 5 },\n },\n {\n id: 'rome',\n title: 'Rome, Italy',\n subtitle: '5 days • $1,650',\n description: 'Ancient history meets modern culture',\n metadata: { city: 'Rome', country: 'Italy', lat: 41.9028, lng: 12.4964, price: 1650, days: 5 },\n },\n {\n id: 'barcelona',\n title: 'Barcelona, Spain',\n subtitle: '5 days • $1,450',\n description: 'Beautiful beaches and Gaudí architecture',\n metadata: { city: 'Barcelona', country: 'Spain', lat: 41.3851, lng: 2.1734, price: 1450, days: 5 },\n },\n ],\n },\n actions: [\n {\n type: 'select_destination',\n label: 'Select',\n handler: 'client',\n payload: {},\n },\n {\n type: 'view_details',\n label: 'Details',\n handler: 'server',\n payload: {},\n },\n ],\n },\n ],\n timestamp: new Date(Date.now() - 3200000),\n },\n];\n\nexport const mockThreads: Thread[] = [\n {\n id: 'thread-1',\n title: 'Trip to Europe',\n preview: 'Planning a 5-day trip...',\n createdAt: new Date(Date.now() - 86400000),\n updatedAt: new Date(Date.now() - 3600000),\n messageCount: 12,\n },\n {\n id: 'thread-2',\n title: 'Restaurant Recommendations',\n preview: 'Looking for good places...',\n createdAt: new Date(Date.now() - 172800000),\n updatedAt: new Date(Date.now() - 86400000),\n messageCount: 8,\n },\n {\n id: 'thread-3',\n title: 'Budget Planning',\n preview: 'Help with monthly budget',\n createdAt: new Date(Date.now() - 259200000),\n updatedAt: new Date(Date.now() - 172800000),\n messageCount: 15,\n },\n];\n\nexport const mockWidgets: Widget[] = [\n {\n type: 'card',\n id: 'card-1',\n props: {\n title: 'Paris, France',\n description: '5-day adventure in the City of Light',\n image: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34',\n footer: 'Total: $1,850',\n },\n actions: [\n {\n type: 'book_trip',\n label: 'Book Now',\n handler: 'client',\n payload: { tripId: 'trip-paris' },\n },\n ],\n },\n {\n type: 'card',\n id: 'card-2',\n props: {\n title: 'Rome, Italy',\n description: 'Explore ancient wonders',\n image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5',\n footer: 'Total: $1,650',\n },\n actions: [\n {\n type: 'book_trip',\n label: 'Book Now',\n handler: 'client',\n payload: { tripId: 'trip-rome' },\n },\n ],\n },\n];\n\nexport function generateMockResponse(delay: number = 1000): Promise<Message> {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n id: `msg-${Date.now()}`,\n role: 'assistant',\n content: 'This is a mock response. In production, this would come from your AI agent API.',\n timestamp: new Date(),\n });\n }, delay);\n });\n}\n\nexport function generateMockStreamingResponse(\n text: string,\n onChunk: (chunk: string) => void,\n typingSpeed: number = 30\n): Promise<void> {\n return new Promise((resolve) => {\n const words = text.split(' ');\n let currentIndex = 0;\n\n const interval = setInterval(() => {\n if (currentIndex < words.length) {\n onChunk(words[currentIndex] + ' ');\n currentIndex++;\n } else {\n clearInterval(interval);\n resolve();\n }\n }, typingSpeed);\n });\n}\n\n// Generate mock plan based on command content\nexport function generateMockPlan(command: string): string {\n const lowerCommand = command.toLowerCase();\n\n if (lowerCommand.includes('analyze') || lowerCommand.includes('analysis')) {\n return `**Plan:**\\n\\n1. Fetch data from the analytics database\\n2. Apply filters and aggregations\\n3. Calculate key metrics and trends\\n4. Generate visualization data\\n5. Compile insights and recommendations`;\n }\n\n if (lowerCommand.includes('sales') || lowerCommand.includes('revenue')) {\n return `**Plan:**\\n\\n1. Query sales records for the specified period\\n2. Calculate total revenue and growth rates\\n3. Break down performance by product category\\n4. Analyze regional distribution\\n5. Present findings in charts and summary`;\n }\n\n if (lowerCommand.includes('report') || lowerCommand.includes('summary')) {\n return `**Plan:**\\n\\n1. Gather data from all relevant sources\\n2. Aggregate metrics across categories\\n3. Identify key trends and anomalies\\n4. Generate executive summary\\n5. Create detailed breakdowns with visualizations`;\n }\n\n if (lowerCommand.includes('customer') || lowerCommand.includes('user')) {\n return `**Plan:**\\n\\n1. Pull customer data from CRM\\n2. Calculate engagement metrics\\n3. Segment users by behavior patterns\\n4. Analyze satisfaction scores\\n5. Generate customer insights report`;\n }\n\n if (lowerCommand.includes('task') || lowerCommand.includes('todo') || lowerCommand.includes('work') || lowerCommand.includes('completed')) {\n return `**Plan:**\\n\\n1. Retrieve task records from the database\\n2. Filter by status and date range\\n3. Organize by priority and category\\n4. Calculate completion metrics\\n5. Display in interactive list format`;\n }\n\n // Default plan\n return `**Plan:**\\n\\n1. Parse and understand the command requirements\\n2. Gather necessary data from available sources\\n3. Process and analyze the information\\n4. Format results for optimal presentation\\n5. Return response with any relevant visualizations`;\n}\n\n// Generate mock command response based on command content\nexport function generateMockCommandResponse(command: string): string {\n const lowerCommand = command.toLowerCase();\n\n if (lowerCommand.includes('analyze') || lowerCommand.includes('analysis')) {\n return `Analysis complete for \"${command}\". Found 247 records with an average value of $1,234. The data shows a 23% increase compared to last quarter. Key insights: Revenue is up, customer satisfaction improved by 15%, and operational costs decreased by 8%.`;\n }\n\n if (lowerCommand.includes('sales') || lowerCommand.includes('revenue')) {\n return `Sales data processed: Q4 2024 revenue reached $2.4M, representing 18% growth year-over-year. Top performing products: Enterprise Plan (+45%), Pro Plan (+32%), Basic Plan (+12%). Regional breakdown: North America (52%), Europe (31%), APAC (17%).`;\n }\n\n if (lowerCommand.includes('report') || lowerCommand.includes('summary')) {\n return `Report generated successfully. Executive Summary: Overall performance exceeded targets by 12%. Marketing ROI improved to 3.2x, customer acquisition cost reduced by 18%, and lifetime value increased by 24%. Detailed breakdown available in attached widgets.`;\n }\n\n if (lowerCommand.includes('data') || lowerCommand.includes('metrics')) {\n return `Data metrics retrieved: 1,847 active users, 12,394 sessions this month, 94.2% uptime, average response time 127ms. Performance is within acceptable parameters. No critical issues detected.`;\n }\n\n if (lowerCommand.includes('customer') || lowerCommand.includes('user')) {\n return `Customer analysis complete: 523 new customers this month, 89% retention rate, average satisfaction score 4.6/5. Top feedback themes: excellent support (87%), easy to use (72%), good value (68%). 3 support tickets pending review.`;\n }\n\n // Default response\n return `This is a mock response showing how your agent would process and respond to commands. The actual response would be generated by your AI agent based on real data and context.`;\n}\n\n// Generate mock command response with widgets\nexport function generateMockCommandWithWidgets(command: string): { message: string; widgets: Widget[]; action?: { type: string; payload: any } } {\n const message = generateMockCommandResponse(command);\n const lowerCommand = command.toLowerCase();\n\n let widgets: Widget[] = [];\n let action: { type: string; payload: any } | undefined;\n\n // Add relevant widgets based on command type\n if (lowerCommand.includes('sales') || lowerCommand.includes('revenue') || lowerCommand.includes('analyze')) {\n widgets.push({\n type: 'card',\n id: `widget-${Date.now()}-1`,\n props: {\n title: 'Q4 2024 Performance',\n description: 'Revenue: $2.4M (+18% YoY)',\n footer: 'Updated: ' + new Date().toLocaleDateString(),\n },\n actions: [\n {\n type: 'view_details',\n label: 'View Details',\n handler: 'client',\n payload: { reportId: 'q4-2024' },\n },\n ],\n });\n }\n\n if (lowerCommand.includes('customer') || lowerCommand.includes('user')) {\n widgets.push({\n type: 'list',\n id: `widget-${Date.now()}-2`,\n props: {\n items: [\n {\n id: 'metric-1',\n title: 'Active Users',\n subtitle: '1,847 users',\n description: '+12% from last month',\n },\n {\n id: 'metric-2',\n title: 'Retention Rate',\n subtitle: '89%',\n description: 'Above industry average',\n },\n {\n id: 'metric-3',\n title: 'Satisfaction Score',\n subtitle: '4.6/5',\n description: 'Based on 234 reviews',\n },\n ],\n },\n });\n }\n\n // Add task widget for task-related commands\n if (lowerCommand.includes('task') || lowerCommand.includes('todo') || lowerCommand.includes('work') || lowerCommand.includes('completed')) {\n widgets.push({\n type: 'list',\n id: `widget-${Date.now()}-tasks`,\n props: {\n items: [\n {\n id: 'task-1',\n title: 'Implement user authentication',\n subtitle: 'Created just now',\n description: 'Added OAuth 2.0 support with Google and GitHub providers',\n backgroundColor: 'rgba(59, 130, 246, 0.15)',\n metadata: {\n status: 'created',\n priority: 'high',\n tags: ['backend', 'security']\n }\n },\n {\n id: 'task-2',\n title: 'Update API documentation',\n subtitle: 'Modified 2 minutes ago',\n description: 'Changed endpoint descriptions and added new examples',\n backgroundColor: 'rgba(234, 179, 8, 0.15)',\n metadata: {\n status: 'modified',\n priority: 'medium',\n tags: ['docs']\n }\n },\n {\n id: 'task-3',\n title: 'Fix login redirect bug',\n subtitle: 'Completed 5 minutes ago',\n description: 'Users now properly redirected after successful login',\n backgroundColor: 'rgba(34, 197, 94, 0.15)',\n metadata: {\n status: 'completed',\n priority: 'urgent',\n tags: ['bugfix', 'auth']\n }\n }\n ],\n },\n actions: [\n {\n type: 'view_task',\n label: 'View',\n handler: 'client',\n payload: {}\n },\n {\n type: 'undo',\n label: 'Undo',\n handler: 'server',\n payload: {}\n }\n ]\n });\n\n // Agent also wants to update the database after showing tasks\n action = {\n type: 'update_database',\n payload: {\n table: 'tasks',\n operation: 'mark_as_viewed',\n taskIds: ['task-1', 'task-2', 'task-3'],\n timestamp: new Date().toISOString()\n }\n };\n }\n\n // Add agent action for analysis commands\n if (lowerCommand.includes('analyze') || lowerCommand.includes('analysis')) {\n action = {\n type: 'send_notification',\n payload: {\n recipient: 'team@company.com',\n subject: 'Analysis Complete',\n message: 'Your requested analysis has been completed and is ready for review.'\n }\n };\n }\n\n return { message, widgets, action };\n}\n\n// Simulate streaming command response\nexport function generateMockCommandStream(\n command: string,\n onChunk: (chunk: { type: 'token' | 'widget' | 'complete'; content?: string; widget?: Widget }) => void,\n onComplete: (threadId: string) => void,\n onError: (error: Error) => void,\n typingSpeed: number = 30\n): void {\n const { message, widgets } = generateMockCommandWithWidgets(command);\n const words = message.split(' ');\n let currentIndex = 0;\n\n const interval = setInterval(() => {\n try {\n if (currentIndex < words.length) {\n onChunk({ type: 'token', content: words[currentIndex] + ' ' });\n currentIndex++;\n } else {\n clearInterval(interval);\n\n // Send widgets after text is complete\n widgets.forEach(widget => {\n onChunk({ type: 'widget', widget });\n });\n\n // Signal completion\n const threadId = `mock_thread_${Date.now()}`;\n onChunk({ type: 'complete' });\n onComplete(threadId);\n }\n } catch (error) {\n clearInterval(interval);\n onError(error instanceof Error ? error : new Error('Mock streaming error'));\n }\n }, typingSpeed);\n}\n","/**\n * File utilities for converting files to base64 and creating content blocks\n */\n\nexport interface ContentBlock {\n type: 'text' | 'image' | 'document';\n text?: string;\n source?: {\n type: 'base64';\n media_type: string;\n data: string;\n };\n}\n\n/**\n * Convert a File to base64 string\n */\nexport function fileToBase64(file: File): Promise<string> {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n // Remove data URL prefix (e.g., \"data:image/png;base64,\")\n const base64 = result.split(',')[1];\n resolve(base64);\n };\n reader.onerror = () => reject(new Error('Failed to read file'));\n reader.readAsDataURL(file);\n });\n}\n\n/**\n * Determine the content block type based on file MIME type\n */\nexport function getContentBlockType(mimeType: string): 'image' | 'document' {\n if (mimeType.startsWith('image/')) {\n return 'image';\n }\n return 'document';\n}\n\n/**\n * Check if a file type is supported for upload\n */\nexport function isSupportedFileType(file: File): boolean {\n const supportedTypes = [\n // Images\n 'image/jpeg',\n 'image/png',\n 'image/gif',\n 'image/webp',\n // Documents\n 'application/pdf',\n 'text/plain',\n 'application/msword',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n ];\n return supportedTypes.includes(file.type);\n}\n\n/**\n * Convert a File to a content block for the agent API\n */\nexport async function fileToContentBlock(file: File): Promise<ContentBlock> {\n const base64 = await fileToBase64(file);\n const blockType = getContentBlockType(file.type);\n\n return {\n type: blockType,\n source: {\n type: 'base64',\n media_type: file.type,\n data: base64,\n },\n };\n}\n\n/**\n * Convert multiple files to content blocks\n */\nexport async function filesToContentBlocks(files: FileList | File[]): Promise<ContentBlock[]> {\n const fileArray = Array.from(files);\n const blocks = await Promise.all(\n fileArray.map(file => fileToContentBlock(file))\n );\n return blocks;\n}\n\n/**\n * Build a structured message with text and file attachments\n */\nexport async function buildMessageWithAttachments(\n text: string,\n files?: FileList | File[]\n): Promise<string | ContentBlock[]> {\n // If no files, return simple text\n if (!files || files.length === 0) {\n return text;\n }\n\n // Build content blocks array\n const blocks: ContentBlock[] = [];\n\n // Add text block first if there's text\n if (text.trim()) {\n blocks.push({ type: 'text', text: text.trim() });\n }\n\n // Convert files to content blocks\n const fileBlocks = await filesToContentBlocks(files);\n blocks.push(...fileBlocks);\n\n return blocks;\n}\n\n/**\n * Get a human-readable file size string\n */\nexport function formatFileSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\n/**\n * Maximum file size (10MB)\n */\nexport const MAX_FILE_SIZE = 10 * 1024 * 1024;\n\n/**\n * Validate file for upload\n */\nexport function validateFile(file: File): { valid: boolean; error?: string } {\n if (!isSupportedFileType(file)) {\n return { valid: false, error: `Unsupported file type: ${file.type}` };\n }\n if (file.size > MAX_FILE_SIZE) {\n return { valid: false, error: `File too large: ${formatFileSize(file.size)} (max ${formatFileSize(MAX_FILE_SIZE)})` };\n }\n return { valid: true };\n}\n","import { Widget } from '../types/widgets';\n\nexport interface ParsedSegment {\n type: 'text' | 'widget' | 'widget_pending';\n content?: string;\n widget?: Widget;\n pendingType?: string; // Widget type being streamed\n}\n\nexport interface ParsedContent {\n segments: ParsedSegment[];\n hasWidgets: boolean;\n hasPendingWidget: boolean;\n}\n\n/**\n * Simple hash function to generate stable IDs from content\n */\nfunction simpleHash(str: string): string {\n let hash = 0;\n for (let i = 0; i < str.length; i++) {\n const char = str.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n return Math.abs(hash).toString(36);\n}\n\n/**\n * Find the matching closing bracket, handling nested brackets\n */\nfunction findMatchingBracket(text: string, startIndex: number): number {\n let depth = 0;\n let inString = false;\n let escapeNext = false;\n\n for (let i = startIndex; i < text.length; i++) {\n const char = text[i];\n\n if (escapeNext) {\n escapeNext = false;\n continue;\n }\n\n if (char === '\\\\' && inString) {\n escapeNext = true;\n continue;\n }\n\n if (char === '\"') {\n inString = !inString;\n continue;\n }\n\n if (inString) continue;\n\n if (char === '[' || char === '{') {\n depth++;\n } else if (char === ']' || char === '}') {\n depth--;\n if (depth === 0) {\n return i;\n }\n }\n }\n\n return -1; // No match found\n}\n\n/**\n * Parse text content and extract widgets from @ui:type[{props}] syntax\n */\nexport function parseWidgetsFromText(text: string): ParsedContent {\n const segments: ParsedSegment[] = [];\n let hasWidgets = false;\n let hasPendingWidget = false;\n let currentIndex = 0;\n let pendingWidgetType: string | null = null;\n\n // First, check if there's an incomplete widget at the end\n let processText = text;\n const lastWidgetStart = text.lastIndexOf('@ui:');\n\n if (lastWidgetStart !== -1) {\n // Check if this last @ui: pattern is complete\n const afterStart = text.slice(lastWidgetStart);\n const typeMatch = afterStart.match(/^@ui:(\\w+)/);\n\n if (typeMatch) {\n const widgetType = typeMatch[1];\n const bracketOpenIndex = afterStart.indexOf('[');\n\n if (bracketOpenIndex === -1) {\n // No opening bracket yet - incomplete, show skeleton\n processText = text.slice(0, lastWidgetStart);\n pendingWidgetType = widgetType;\n hasPendingWidget = true;\n } else {\n // Has opening bracket, check if it's closed\n const fullBracketStart = lastWidgetStart + bracketOpenIndex;\n const bracketEnd = findMatchingBracket(text, fullBracketStart);\n\n if (bracketEnd === -1) {\n // Bracket not closed - incomplete widget, show skeleton\n processText = text.slice(0, lastWidgetStart);\n pendingWidgetType = widgetType;\n hasPendingWidget = true;\n }\n }\n }\n }\n\n // Clean up trailing whitespace before pending widget\n if (hasPendingWidget) {\n processText = processText.replace(/[\\s:;\\-–—\\.]+$/g, '');\n }\n\n // Pattern to find @ui:type[ starts\n const startPattern = /@ui:(\\w+)\\[/g;\n\n let match;\n while ((match = startPattern.exec(processText)) !== null) {\n const widgetType = match[1];\n const bracketStart = match.index + match[0].length - 1; // Position of '['\n\n // Find the matching ']'\n const bracketEnd = findMatchingBracket(processText, bracketStart);\n\n if (bracketEnd === -1) {\n // No matching bracket - shouldn't happen after pre-processing, but skip just in case\n continue;\n }\n\n // Extract the JSON content (everything between [ and ])\n const jsonContent = processText.slice(bracketStart + 1, bracketEnd);\n\n // Add text before the widget\n if (match.index > currentIndex) {\n const textContent = processText.slice(currentIndex, match.index).trim();\n if (textContent) {\n segments.push({\n type: 'text',\n content: textContent\n });\n }\n }\n\n // Parse and add the widget\n try {\n // Trim and normalize JSON content\n const trimmedJson = jsonContent.trim();\n const parsed = JSON.parse(trimmedJson);\n // Generate stable ID based on widget type and content\n const widgetId = `widget-${widgetType}-${simpleHash(trimmedJson)}`;\n\n // Extract meta field if present, rest goes to props\n const { meta, ...props } = parsed;\n\n segments.push({\n type: 'widget',\n widget: {\n type: widgetType,\n id: widgetId,\n props,\n ...(meta && { meta })\n }\n });\n hasWidgets = true;\n } catch (e) {\n // JSON parsing failed - hide the raw syntax entirely\n }\n\n currentIndex = bracketEnd + 1;\n startPattern.lastIndex = currentIndex;\n }\n\n // Add remaining text (already cleaned of incomplete widgets)\n if (currentIndex < processText.length) {\n const remainingText = processText.slice(currentIndex).trim();\n if (remainingText) {\n segments.push({\n type: 'text',\n content: remainingText\n });\n }\n }\n\n // If no segments were created, use the processed text\n if (segments.length === 0 && processText.trim()) {\n segments.push({\n type: 'text',\n content: processText.trim()\n });\n }\n\n // Add pending widget skeleton at the end if we detected one\n if (pendingWidgetType) {\n segments.push({\n type: 'widget_pending',\n pendingType: pendingWidgetType\n });\n }\n\n return { segments, hasWidgets, hasPendingWidget };\n}\n\n/**\n * Check if text contains any widget syntax\n */\nexport function containsWidgets(text: string): boolean {\n return /@ui:\\w+\\[/.test(text);\n}\n\n/**\n * Strip widget syntax from text, returning only plain text content\n */\nexport function stripWidgets(text: string): string {\n const parsed = parseWidgetsFromText(text);\n return parsed.segments\n .filter(s => s.type === 'text' && s.content)\n .map(s => s.content)\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n}\n","/**\n * Widget definitions for context injection\n */\nexport const WIDGET_DEFINITIONS = {\n card: {\n schema: 'title, description?, image?, footer?',\n example: '@ui:card[{\"title\": \"Summary\", \"description\": \"Details here\"}]'\n },\n list: {\n schema: 'items: [{id, title, subtitle?, description?}]',\n example: '@ui:list[{\"items\": [{\"id\": \"1\", \"title\": \"Item\", \"subtitle\": \"Info\"}]}]'\n },\n button_group: {\n schema: 'buttons: [{id, label, variant?}]',\n example: '@ui:button_group[{\"buttons\": [{\"id\": \"ok\", \"label\": \"OK\"}]}]'\n },\n form: {\n schema: 'fields: [{name, type, label, required?}]',\n example: '@ui:form[{\"fields\": [{\"name\": \"email\", \"type\": \"text\", \"label\": \"Email\"}]}]'\n },\n table: {\n schema: 'columns: [{key, label}], rows: [...]',\n example: '@ui:table[{\"columns\": [{\"key\": \"name\", \"label\": \"Name\"}], \"rows\": [{\"name\": \"A\"}]}]'\n },\n image: {\n schema: 'src, alt, caption?',\n example: '@ui:image[{\"src\": \"url\", \"alt\": \"desc\"}]'\n },\n chart: {\n schema: 'chartType: line|bar|pie, data: {labels, datasets}',\n example: '@ui:chart[{\"chartType\": \"bar\", \"data\": {\"labels\": [\"A\"], \"datasets\": [{\"label\": \"X\", \"data\": [10]}]}}]'\n }\n} as const;\n\nexport type WidgetType = keyof typeof WIDGET_DEFINITIONS;\n\nexport const ALL_WIDGET_TYPES: WidgetType[] = Object.keys(WIDGET_DEFINITIONS) as WidgetType[];\n\n/**\n * Generate system prompt context describing available widgets\n */\nexport function generateWidgetContext(enabledWidgets?: WidgetType[]): string {\n const widgets = enabledWidgets || ALL_WIDGET_TYPES;\n\n let context = `\\n## UI Widgets\\nRender widgets: @ui:type[{props}]. \"meta\" field (at root level, NOT inside items) holds extended data captured by UI.\\n\\n`;\n\n for (const type of widgets) {\n const def = WIDGET_DEFINITIONS[type];\n if (!def) continue;\n context += `${type}: ${def.schema} | ${def.example}\\n`;\n }\n\n context += `\\nMeta: @ui:list[{\"items\": [{\"id\": \"1\", \"title\": \"X\"}], \"meta\": {\"items\": [{\"id\": \"1\", \"title\": \"X\", \"extra\": \"...\"}]}}]\\n`;\n\n return context;\n}\n\n/**\n * Generate a compact version of widget context\n */\nexport function generateCompactWidgetContext(enabledWidgets?: WidgetType[]): string {\n const widgets = enabledWidgets || ALL_WIDGET_TYPES;\n return `\\nWidgets: @ui:type[{props}]. Types: ${widgets.join(', ')}. Add \"meta\" at root (not inside items) for extended data.\\n`;\n}\n","import { useEffect } from 'react';\nimport { WidgetsProps } from '../../types/components';\nimport { WidgetRenderer } from './WidgetRenderer';\nimport { cn } from '../../utils';\n\nexport function Widgets({\n widgets,\n onAction,\n onWidgetMount,\n layout = 'stack',\n spacing = 'normal',\n columns = 3,\n className,\n}: WidgetsProps) {\n useEffect(() => {\n widgets.forEach((widget) => {\n onWidgetMount?.(widget.id);\n });\n }, [widgets, onWidgetMount]);\n\n const layoutClasses = {\n stack: 'flex flex-col',\n grid: `grid grid-cols-1 md:grid-cols-${columns}`,\n masonry: 'columns-1 md:columns-2 lg:columns-3',\n };\n\n const spacingClasses = {\n tight: 'gap-2',\n normal: 'gap-4',\n loose: 'gap-6',\n };\n\n return (\n <div className={cn(layoutClasses[layout], spacingClasses[spacing], className)}>\n {widgets.map((widget) => (\n <WidgetRenderer key={widget.id} widget={widget} onAction={onAction} />\n ))}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { CardWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\n\ninterface CardProps {\n widget: CardWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Card({ widget, onAction }: CardProps) {\n const { title, description, image, footer } = widget.props;\n\n return (\n <div className=\"border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden\">\n {image && <img src={image} alt={title} className=\"w-full h-48 object-cover\" />}\n\n <div className=\"p-4\">\n <h3 className=\"!text-lg font-semibold !text-neutral-900 dark:!text-white\">{title}</h3>\n {description && <p className=\"!text-neutral-600 dark:!text-neutral-400 mt-2\">{description}</p>}\n </div>\n\n {(footer || (widget.actions && widget.actions.length > 0)) && (\n <div className=\"border-t border-neutral-200 dark:border-neutral-700 p-4 flex justify-between items-center\">\n {footer && <span className=\"!text-sm !text-neutral-600 dark:!text-neutral-400\">{footer}</span>}\n\n {widget.actions && widget.actions.length > 0 && (\n <div className=\"flex gap-2\">\n {widget.actions.map((action, idx) => (\n <button\n key={idx}\n onClick={() =>\n onAction?.({\n type: action.type,\n payload: action.payload,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n className=\"px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600\"\n >\n {action.label}\n </button>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { ListWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\n\ninterface ListProps {\n widget: ListWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function List({ widget, onAction }: ListProps) {\n const { items } = widget.props;\n\n return (\n <div className=\"border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden\">\n {items.map((item, index) => (\n <div\n key={item.id}\n className={`flex items-center p-4 transition-colors ${\n index !== items.length - 1 ? 'border-b border-neutral-200 dark:border-neutral-700' : ''\n } ${!item.backgroundColor ? 'hover:bg-neutral-50 dark:hover:bg-neutral-800' : ''}`}\n style={item.backgroundColor ? { backgroundColor: item.backgroundColor } : undefined}\n >\n {item.image && <img src={item.image} alt={item.title} className=\"w-16 h-16 rounded object-cover\" />}\n\n <div className={`flex-1 ${item.image ? 'ml-4' : ''}`}>\n <h4 className=\"font-semibold !text-neutral-900 dark:!text-white\">{item.title}</h4>\n {item.subtitle && <p className=\"!text-sm !text-neutral-600 dark:!text-neutral-400\">{item.subtitle}</p>}\n {item.description && (\n <p className=\"!text-xs !text-neutral-500 dark:!text-neutral-500 mt-1\">{item.description}</p>\n )}\n </div>\n\n {widget.actions && widget.actions.length > 0 && (\n <div className=\"flex gap-2\">\n {widget.actions.map((action, idx) => (\n <button\n key={idx}\n onClick={() =>\n onAction?.({\n type: action.type,\n payload: item.metadata || item,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n className=\"px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600\"\n >\n {action.label}\n </button>\n ))}\n </div>\n )}\n </div>\n ))}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { ButtonWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\nimport { cn } from '../../../utils';\n\ninterface ButtonProps {\n widget: ButtonWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Button({ widget, onAction }: ButtonProps) {\n const { label, variant = 'primary', disabled = false } = widget.props;\n\n const variantClasses = {\n primary: 'bg-blue-500 !text-white hover:bg-blue-600',\n secondary: 'bg-neutral-500 !text-white hover:bg-neutral-600',\n outline: 'border-2 border-blue-500 !text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900',\n ghost: '!text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900',\n };\n\n return (\n <button\n onClick={() =>\n widget.actions?.[0] &&\n onAction?.({\n type: widget.actions[0].type,\n payload: widget.actions[0].payload,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n disabled={disabled}\n className={cn('px-4 py-2 rounded-lg font-medium transition-colors', variantClasses[variant], {\n 'opacity-50 cursor-not-allowed': disabled,\n })}\n >\n {label}\n </button>\n );\n}\n","import { ButtonGroupWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\nimport { cn } from '../../../utils';\n\ninterface ButtonGroupProps {\n widget: ButtonGroupWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function ButtonGroup({ widget, onAction }: ButtonGroupProps) {\n const { layout = 'horizontal', buttons } = widget.props;\n\n const variantClasses = {\n primary: 'bg-blue-500 !text-white hover:bg-blue-600',\n secondary: 'bg-neutral-200 dark:bg-neutral-700 !text-neutral-800 dark:!text-neutral-200 hover:bg-neutral-300 dark:hover:bg-neutral-600',\n outline: 'border border-neutral-300 dark:border-neutral-600 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800',\n };\n\n // Find action for a specific button by id\n const getActionForButton = (buttonId: string) => {\n return widget.actions?.find(action => action.payload?.buttonId === buttonId) || widget.actions?.[0];\n };\n\n return (\n <div\n className={cn(\n 'flex gap-2',\n layout === 'vertical' ? 'flex-col' : 'flex-row flex-wrap'\n )}\n >\n {buttons.map((button) => {\n const action = getActionForButton(button.id);\n return (\n <button\n key={button.id}\n onClick={() => {\n if (action) {\n onAction?.({\n type: action.type,\n payload: { ...action.payload, buttonId: button.id },\n widgetId: widget.id,\n timestamp: new Date(),\n });\n }\n }}\n className={cn(\n 'px-4 py-2 rounded-lg font-medium transition-colors text-sm',\n variantClasses[button.variant || 'secondary']\n )}\n >\n {button.label}\n </button>\n );\n })}\n </div>\n );\n}\n","import { TableWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\nimport { cn } from '../../../utils/cn';\n\ninterface TableProps {\n widget: TableWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Table({ widget, onAction }: TableProps) {\n const { columns, rows, caption, compact = false, striped = false } = widget.props;\n\n const getAlignment = (align?: 'left' | 'center' | 'right') => {\n switch (align) {\n case 'center': return 'text-center';\n case 'right': return 'text-right';\n default: return 'text-left';\n }\n };\n\n return (\n <div className=\"border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden\">\n <div className=\"overflow-x-auto\">\n <table className=\"w-full\">\n {caption && (\n <caption className=\"px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400 text-left bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700\">\n {caption}\n </caption>\n )}\n <thead>\n <tr className=\"bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700\">\n {columns.map((column) => (\n <th\n key={column.key}\n className={cn(\n 'font-semibold text-neutral-900 dark:text-white',\n compact ? 'px-3 py-2 text-xs' : 'px-4 py-3 text-sm',\n getAlignment(column.align)\n )}\n style={column.width ? { width: column.width } : undefined}\n >\n {column.label}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map((row, rowIndex) => (\n <tr\n key={row.id || rowIndex}\n className={cn(\n 'border-b border-neutral-200 dark:border-neutral-700 last:border-b-0',\n 'transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800',\n striped && rowIndex % 2 === 1 && 'bg-neutral-50/50 dark:bg-neutral-800/50'\n )}\n onClick={() => {\n if (widget.actions && widget.actions.length > 0) {\n onAction?.({\n type: widget.actions[0].type,\n payload: row,\n widgetId: widget.id,\n timestamp: new Date(),\n });\n }\n }}\n style={{ cursor: widget.actions?.length ? 'pointer' : 'default' }}\n >\n {columns.map((column) => (\n <td\n key={column.key}\n className={cn(\n 'text-neutral-700 dark:text-neutral-300',\n compact ? 'px-3 py-2 text-xs' : 'px-4 py-3 text-sm',\n getAlignment(column.align)\n )}\n >\n {row[column.key] ?? '—'}\n </td>\n ))}\n </tr>\n ))}\n {rows.length === 0 && (\n <tr>\n <td\n colSpan={columns.length}\n className=\"px-4 py-8 text-center text-sm text-neutral-500 dark:text-neutral-400\"\n >\n No data available\n </td>\n </tr>\n )}\n </tbody>\n </table>\n </div>\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { Widget } from '../../types/widgets';\nimport { ActionEvent } from '../../types/actions';\nimport { Card, List, Button, ButtonGroup, Table } from './widget-library';\n\ninterface WidgetRendererProps {\n widget: Widget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function WidgetRenderer({ widget, onAction }: WidgetRendererProps) {\n switch (widget.type) {\n case 'card':\n return <Card widget={widget as any} onAction={onAction} />;\n case 'list':\n return <List widget={widget as any} onAction={onAction} />;\n case 'button':\n return <Button widget={widget as any} onAction={onAction} />;\n case 'button_group':\n return <ButtonGroup widget={widget as any} onAction={onAction} />;\n case 'table':\n return <Table widget={widget as any} onAction={onAction} />;\n default:\n return (\n <div className=\"p-4 border border-yellow-300 bg-yellow-50 rounded-lg\">\n <p className=\"text-sm text-yellow-800\">Unknown widget type: {widget.type}</p>\n <pre className=\"text-xs mt-2 overflow-auto\">{JSON.stringify(widget, null, 2)}</pre>\n </div>\n );\n }\n}\n","import { cn } from '../../utils/cn';\n\ninterface WidgetSkeletonProps {\n type: string;\n className?: string;\n}\n\nexport function WidgetSkeleton({ type, className }: WidgetSkeletonProps) {\n // Render different skeletons based on widget type\n // Using neutral colors for true black/white theme\n switch (type) {\n case 'card':\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden', className)}>\n <div className=\"p-4 space-y-3\">\n <div className=\"h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4\"></div>\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full\"></div>\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6\"></div>\n </div>\n </div>\n );\n\n case 'list':\n return (\n <div className={cn('animate-pulse space-y-2', className)}>\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"flex items-center gap-3 p-3 rounded-lg border border-neutral-200 dark:border-neutral-800\">\n <div className=\"w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0\"></div>\n <div className=\"flex-1 space-y-2\">\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2\"></div>\n <div className=\"h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4\"></div>\n </div>\n </div>\n ))}\n </div>\n );\n\n case 'button_group':\n return (\n <div className={cn('animate-pulse flex gap-2', className)}>\n <div className=\"h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20\"></div>\n <div className=\"h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20\"></div>\n <div className=\"h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20\"></div>\n </div>\n );\n\n case 'form':\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-4', className)}>\n <div className=\"h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3\"></div>\n <div className=\"space-y-3\">\n <div className=\"h-10 bg-neutral-200 dark:bg-neutral-700 rounded\"></div>\n <div className=\"h-10 bg-neutral-200 dark:bg-neutral-700 rounded\"></div>\n </div>\n <div className=\"h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24\"></div>\n </div>\n );\n\n case 'chart':\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4', className)}>\n <div className=\"h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4\"></div>\n <div className=\"flex items-end gap-2 h-32\">\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2\"></div>\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4\"></div>\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3\"></div>\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full\"></div>\n <div className=\"flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3\"></div>\n </div>\n </div>\n );\n\n case 'image':\n return (\n <div className={cn('animate-pulse', className)}>\n <div className=\"aspect-video bg-neutral-200 dark:bg-neutral-700 rounded-lg\"></div>\n </div>\n );\n\n case 'gallery':\n return (\n <div className={cn('animate-pulse grid grid-cols-3 gap-2', className)}>\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg\"></div>\n ))}\n </div>\n );\n\n case 'map':\n return (\n <div className={cn('animate-pulse', className)}>\n <div className=\"h-48 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex items-center justify-center\">\n <svg className=\"w-8 h-8 text-neutral-400 dark:text-neutral-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n </svg>\n </div>\n </div>\n );\n\n case 'table':\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden', className)}>\n {/* Header */}\n <div className=\"flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700\">\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-16\"></div>\n </div>\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-20\"></div>\n </div>\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-14\"></div>\n </div>\n </div>\n {/* Rows */}\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0\">\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-24\"></div>\n </div>\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-16\"></div>\n </div>\n <div className=\"flex-1 px-4 py-3\">\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-20\"></div>\n </div>\n </div>\n ))}\n </div>\n );\n\n default:\n // Generic skeleton for unknown widget types\n return (\n <div className={cn('animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4', className)}>\n <div className=\"h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2\"></div>\n <div className=\"h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full\"></div>\n </div>\n );\n }\n}\n","import React from 'react';\n\ninterface MarkdownContentProps {\n content: string;\n className?: string;\n}\n\n// Check if URL points to an image\nfunction isImageUrl(url: string): boolean {\n const imageExtensions = /\\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\\?.*)?$/i;\n return imageExtensions.test(url);\n}\n\nfunction parseInlineMarkdown(text: string, keyPrefix: string = ''): React.ReactNode[] {\n const result: React.ReactNode[] = [];\n // Combined regex for inline elements:\n // 1. Images: ![alt](url)\n // 2. Links: [text](url)\n // 3. Bold: **text** or __text__\n // 4. Inline code: `code`\n const inlineRegex = /!\\[([^\\]]*)\\]\\(([^)]+)\\)|\\[([^\\]]+)\\]\\(([^)]+)\\)|(\\*\\*|__)(.+?)\\5|`([^`]+)`/g;\n\n let lastIndex = 0;\n let match;\n let key = 0;\n\n while ((match = inlineRegex.exec(text)) !== null) {\n // Add text before the match\n if (match.index > lastIndex) {\n result.push(text.slice(lastIndex, match.index));\n }\n\n if (match[1] !== undefined || match[2] !== undefined) {\n // Image: ![alt](url)\n const alt = match[1] || '';\n const src = match[2];\n result.push(\n <img\n key={`${keyPrefix}img${key++}`}\n src={src}\n alt={alt}\n className=\"apteva-md-img\"\n />\n );\n } else if (match[3] !== undefined || match[4] !== undefined) {\n // Link: [text](url)\n const linkText = match[3];\n const href = match[4];\n\n // Check if link URL is an image - render as image instead\n if (isImageUrl(href)) {\n result.push(\n <img\n key={`${keyPrefix}img${key++}`}\n src={href}\n alt={linkText}\n className=\"apteva-md-img\"\n />\n );\n } else {\n result.push(\n <a\n key={`${keyPrefix}a${key++}`}\n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"apteva-md-link\"\n >\n {linkText}\n </a>\n );\n }\n } else if (match[5] !== undefined) {\n // Bold: **text** or __text__\n result.push(<strong key={`${keyPrefix}b${key++}`}>{match[6]}</strong>);\n } else if (match[7] !== undefined) {\n // Inline code: `code`\n result.push(\n <code key={`${keyPrefix}code${key++}`} className=\"apteva-md-inline-code\">\n {match[7]}\n </code>\n );\n }\n\n lastIndex = match.index + match[0].length;\n }\n\n // Add remaining text\n if (lastIndex < text.length) {\n result.push(text.slice(lastIndex));\n }\n\n return result.length > 0 ? result : [text];\n}\n\nfunction parseMarkdown(content: string): React.ReactNode[] {\n const lines = content.split('\\n');\n const result: React.ReactNode[] = [];\n let key = 0;\n let i = 0;\n\n while (i < lines.length) {\n const line = lines[i];\n\n // Check for headings (## or ###)\n const h2Match = line.match(/^##\\s+(.*)$/);\n if (h2Match) {\n result.push(\n <h2 key={`h2${key++}`} className=\"apteva-md-h2\">\n {parseInlineMarkdown(h2Match[1], `${key}`)}\n </h2>\n );\n i++;\n continue;\n }\n\n const h3Match = line.match(/^###\\s+(.*)$/);\n if (h3Match) {\n result.push(\n <h3 key={`h3${key++}`} className=\"apteva-md-h3\">\n {parseInlineMarkdown(h3Match[1], `${key}`)}\n </h3>\n );\n i++;\n continue;\n }\n\n // Check for unordered list item (-, *, +)\n const ulMatch = line.match(/^(\\s*)([-*+])\\s+(.*)$/);\n if (ulMatch) {\n const listItems: React.ReactNode[] = [];\n const indent = ulMatch[1].length;\n\n while (i < lines.length) {\n const itemMatch = lines[i].match(/^(\\s*)([-*+])\\s+(.*)$/);\n if (itemMatch && itemMatch[1].length === indent) {\n listItems.push(\n <li key={`li${key++}`} className=\"apteva-md-li\">{parseInlineMarkdown(itemMatch[3], `${key}`)}</li>\n );\n i++;\n } else {\n break;\n }\n }\n\n result.push(\n <ul key={`ul${key++}`} className=\"apteva-md-ul\">\n {listItems}\n </ul>\n );\n continue;\n }\n\n // Check for ordered list item (1., 2., etc.)\n const olMatch = line.match(/^(\\s*)(\\d+)\\.\\s+(.*)$/);\n if (olMatch) {\n const listItems: React.ReactNode[] = [];\n const indent = olMatch[1].length;\n\n while (i < lines.length) {\n const itemMatch = lines[i].match(/^(\\s*)(\\d+)\\.\\s+(.*)$/);\n if (itemMatch && itemMatch[1].length === indent) {\n listItems.push(\n <li key={`li${key++}`} className=\"apteva-md-li\">{parseInlineMarkdown(itemMatch[3], `${key}`)}</li>\n );\n i++;\n } else {\n break;\n }\n }\n\n result.push(\n <ol key={`ol${key++}`} className=\"apteva-md-ol\">\n {listItems}\n </ol>\n );\n continue;\n }\n\n // Check for markdown table\n const tableMatch = line.match(/^\\|(.+)\\|$/);\n if (tableMatch && i + 1 < lines.length) {\n // Check if next line is separator (|---|---|)\n const separatorLine = lines[i + 1];\n const separatorMatch = separatorLine.match(/^\\|([\\s:-]+\\|)+$/);\n\n if (separatorMatch) {\n // Parse header\n const headerCells = line.split('|').filter(cell => cell.trim() !== '').map(cell => cell.trim());\n\n // Skip header and separator lines\n i += 2;\n\n // Parse body rows\n const bodyRows: string[][] = [];\n while (i < lines.length) {\n const rowMatch = lines[i].match(/^\\|(.+)\\|$/);\n if (rowMatch) {\n const cells = lines[i].split('|').filter(cell => cell.trim() !== '').map(cell => cell.trim());\n bodyRows.push(cells);\n i++;\n } else {\n break;\n }\n }\n\n result.push(\n <div key={`table-wrapper${key++}`} className=\"apteva-md-table-wrapper\">\n <table className=\"apteva-md-table\">\n <thead>\n <tr>\n {headerCells.map((cell, idx) => (\n <th key={`th${idx}`} className=\"apteva-md-th\">{parseInlineMarkdown(cell, `th${key}${idx}`)}</th>\n ))}\n </tr>\n </thead>\n <tbody>\n {bodyRows.map((row, rowIdx) => (\n <tr key={`tr${rowIdx}`}>\n {row.map((cell, cellIdx) => (\n <td key={`td${cellIdx}`} className=\"apteva-md-td\">{parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`)}</td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n continue;\n }\n }\n\n // Regular line - parse inline markdown and preserve line breaks\n if (line === '') {\n result.push(<br key={`br${key++}`} />);\n } else {\n result.push(\n <span key={`p${key++}`}>\n {parseInlineMarkdown(line, `${key}`)}\n {i < lines.length - 1 ? '\\n' : ''}\n </span>\n );\n }\n i++;\n }\n\n return result;\n}\n\nexport function MarkdownContent({ content, className = '' }: MarkdownContentProps) {\n return (\n <div className={`apteva-md ${className}`}>\n {parseMarkdown(content)}\n </div>\n );\n}\n","interface ToolCallProps {\n name: string;\n status: 'running' | 'completed' | 'error';\n}\n\nexport function ToolCall({ name, status }: ToolCallProps) {\n if (status === 'running') {\n return (\n <div className=\"apteva-tool-card apteva-tool-card-running\">\n <svg className=\"apteva-tool-icon apteva-tool-icon-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"apteva-tool-spinner-track\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n <path className=\"apteva-tool-spinner-fill\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"></path>\n </svg>\n <span className=\"apteva-tool-label\">{name}</span>\n </div>\n );\n }\n\n if (status === 'completed') {\n return (\n <div className=\"apteva-tool-card apteva-tool-card-completed\">\n <svg className=\"apteva-tool-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\"></path>\n </svg>\n <span className=\"apteva-tool-label\">{name}</span>\n </div>\n );\n }\n\n // Error state\n return (\n <div className=\"apteva-tool-card apteva-tool-card-error\">\n <svg className=\"apteva-tool-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\"></path>\n </svg>\n <span className=\"apteva-tool-label\">{name} failed</span>\n </div>\n );\n}\n","import { SuggestedPrompt } from '../../types/components';\nimport { cn } from '../../utils';\n\ninterface WelcomeScreenProps {\n title?: string;\n subtitle?: string;\n icon?: React.ReactNode;\n prompts?: (string | SuggestedPrompt)[];\n variant?: 'centered' | 'minimal';\n onPromptClick: (prompt: string) => void;\n}\n\n// Default icon - chat bubble\nconst DefaultIcon = () => (\n <svg className=\"w-12 h-12 sm:w-16 sm:h-16\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"\n />\n </svg>\n);\n\n// Default prompt icons\nconst ArrowIcon = () => (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 7l5 5m0 0l-5 5m5-5H6\" />\n </svg>\n);\n\nexport function WelcomeScreen({\n title,\n subtitle,\n icon,\n prompts,\n variant = 'centered',\n onPromptClick,\n}: WelcomeScreenProps) {\n // Normalize prompts to SuggestedPrompt format\n const normalizedPrompts: SuggestedPrompt[] = (prompts || []).map((p) =>\n typeof p === 'string' ? { text: p } : p\n );\n\n const hasPrompts = normalizedPrompts.length > 0;\n const hasHeader = title || subtitle || icon;\n\n // If nothing to show, render default empty state\n if (!hasHeader && !hasPrompts) {\n return (\n <div className=\"flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400\">\n <div className=\"text-center space-y-2\">\n <div className=\"flex justify-center\">\n <DefaultIcon />\n </div>\n <p className=\"text-sm\">No messages yet. Start a conversation!</p>\n </div>\n </div>\n );\n }\n\n // Minimal variant - just prompts as a list (good for mobile/embedded)\n if (variant === 'minimal') {\n return (\n <div className=\"flex flex-col h-full px-4 py-4\">\n {hasHeader && (\n <div className=\"mb-4\">\n {title && (\n <h2 className=\"text-lg font-semibold !text-neutral-900 dark:!text-white\">{title}</h2>\n )}\n {subtitle && (\n <p className=\"text-sm !text-neutral-500 dark:!text-neutral-400 mt-1\">{subtitle}</p>\n )}\n </div>\n )}\n {hasPrompts && (\n <div className=\"flex-1 space-y-2\">\n {normalizedPrompts.map((prompt, index) => (\n <button\n key={index}\n onClick={() => onPromptClick(prompt.text)}\n className={cn(\n 'w-full text-left px-4 py-3 rounded-xl',\n 'bg-neutral-50 dark:bg-neutral-800/50',\n 'border border-neutral-200 dark:border-neutral-700',\n 'hover:bg-neutral-100 dark:hover:bg-neutral-800',\n 'hover:border-neutral-300 dark:hover:border-neutral-600',\n 'transition-all duration-200',\n 'group'\n )}\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors\">\n {prompt.icon || <ArrowIcon />}\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium !text-neutral-900 dark:!text-white truncate\">\n {prompt.text}\n </p>\n {prompt.description && (\n <p className=\"text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate\">\n {prompt.description}\n </p>\n )}\n </div>\n </div>\n </button>\n ))}\n </div>\n )}\n </div>\n );\n }\n\n // Centered variant - hero style with grid of prompts (default)\n return (\n <div className=\"flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8\">\n {/* Header Section */}\n <div className=\"text-center mb-6 sm:mb-8 max-w-md\">\n {/* Icon */}\n <div className=\"mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center\">\n {icon || <DefaultIcon />}\n </div>\n\n {/* Title */}\n {title && (\n <h1 className=\"text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2\">\n {title}\n </h1>\n )}\n\n {/* Subtitle */}\n {subtitle && (\n <p className=\"text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400\">{subtitle}</p>\n )}\n </div>\n\n {/* Prompts Section */}\n {hasPrompts && (\n <div className=\"w-full max-w-2xl\">\n {/* Mobile: Vertical list */}\n <div className=\"sm:hidden space-y-2\">\n {normalizedPrompts.map((prompt, index) => (\n <button\n key={index}\n onClick={() => onPromptClick(prompt.text)}\n className={cn(\n 'w-full text-left px-4 py-3 rounded-xl',\n 'bg-white dark:bg-neutral-800',\n 'border border-neutral-200 dark:border-neutral-700',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n 'hover:border-blue-300 dark:hover:border-blue-600',\n 'active:scale-[0.98]',\n 'transition-all duration-200',\n 'shadow-sm hover:shadow',\n 'group'\n )}\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors\">\n {prompt.icon || <ArrowIcon />}\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium !text-neutral-900 dark:!text-white\">\n {prompt.text}\n </p>\n {prompt.description && (\n <p className=\"text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1\">\n {prompt.description}\n </p>\n )}\n </div>\n <svg\n className=\"w-4 h-4 !text-neutral-400 group-hover:!text-blue-500 transition-colors flex-shrink-0\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M9 5l7 7-7 7\"\n />\n </svg>\n </div>\n </button>\n ))}\n </div>\n\n {/* Desktop: Grid layout */}\n <div className=\"hidden sm:grid sm:grid-cols-2 gap-3\">\n {normalizedPrompts.map((prompt, index) => (\n <button\n key={index}\n onClick={() => onPromptClick(prompt.text)}\n className={cn(\n 'text-left p-4 rounded-xl',\n 'bg-white dark:bg-neutral-800',\n 'border border-neutral-200 dark:border-neutral-700',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n 'hover:border-blue-300 dark:hover:border-blue-600',\n 'hover:shadow-md',\n 'active:scale-[0.98]',\n 'transition-all duration-200',\n 'group'\n )}\n >\n <div className=\"flex items-start gap-3\">\n <div className=\"flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors\">\n {prompt.icon || <ArrowIcon />}\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium !text-neutral-900 dark:!text-white leading-snug\">\n {prompt.text}\n </p>\n {prompt.description && (\n <p className=\"text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2\">\n {prompt.description}\n </p>\n )}\n </div>\n </div>\n </button>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n}\n","import { useState, KeyboardEvent, useRef } from 'react';\nimport { validateFile, formatFileSize } from '../../utils';\n\ninterface ComposerProps {\n onSendMessage: (text: string, files?: File[]) => void;\n placeholder?: string;\n disabled?: boolean;\n isLoading?: boolean;\n onStop?: () => void;\n onFileUpload?: (files: FileList) => void;\n onSwitchMode?: () => void;\n}\n\ninterface PendingFile {\n file: File;\n preview?: string;\n}\n\nexport function Composer({ onSendMessage, placeholder = 'Type a message...', disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }: ComposerProps) {\n const [text, setText] = useState('');\n const [showMenu, setShowMenu] = useState(false);\n const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);\n const [fileError, setFileError] = useState<string | null>(null);\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const menuButtonRef = useRef<HTMLButtonElement>(null);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n };\n\n const handleSend = () => {\n const hasText = text.trim();\n const hasFiles = pendingFiles.length > 0;\n\n if ((hasText || hasFiles) && !disabled) {\n const filesToSend = pendingFiles.map(pf => pf.file);\n onSendMessage(text.trim(), filesToSend.length > 0 ? filesToSend : undefined);\n setText('');\n setPendingFiles([]);\n setFileError(null);\n // Reset textarea height\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n }\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setText(e.target.value);\n // Auto-resize textarea\n e.target.style.height = 'auto';\n e.target.style.height = `${e.target.scrollHeight}px`;\n };\n\n const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n const files = Array.from(e.target.files);\n const validFiles: PendingFile[] = [];\n const errors: string[] = [];\n\n files.forEach(file => {\n const validation = validateFile(file);\n if (validation.valid) {\n const pending: PendingFile = { file };\n // Create preview for images\n if (file.type.startsWith('image/')) {\n pending.preview = URL.createObjectURL(file);\n }\n validFiles.push(pending);\n } else {\n errors.push(validation.error || 'Invalid file');\n }\n });\n\n if (validFiles.length > 0) {\n setPendingFiles(prev => [...prev, ...validFiles]);\n }\n\n if (errors.length > 0) {\n setFileError(errors.join(', '));\n setTimeout(() => setFileError(null), 5000);\n }\n\n // Also call the legacy callback if provided\n onFileUpload?.(e.target.files);\n setShowMenu(false);\n\n // Reset input so same file can be selected again\n e.target.value = '';\n }\n };\n\n const removeFile = (index: number) => {\n setPendingFiles(prev => {\n const file = prev[index];\n // Revoke object URL to prevent memory leak\n if (file.preview) {\n URL.revokeObjectURL(file.preview);\n }\n return prev.filter((_, i) => i !== index);\n });\n };\n\n const getFileIcon = (mimeType: string) => {\n if (mimeType.startsWith('image/')) {\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n );\n }\n if (mimeType === 'application/pdf') {\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n );\n }\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n );\n };\n\n return (\n <div className=\"px-4 py-3 relative\">\n {/* File Error Toast */}\n {fileError && (\n <div className=\"absolute bottom-full left-4 right-4 mb-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-20\">\n <div className=\"flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm\">\n <svg className=\"w-4 h-4 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <span>{fileError}</span>\n </div>\n </div>\n )}\n\n {/* Pending Files Preview */}\n {pendingFiles.length > 0 && (\n <div className=\"mb-2 flex flex-wrap gap-2\">\n {pendingFiles.map((pf, index) => (\n <div\n key={index}\n className=\"relative group flex items-center gap-2 px-3 py-2 bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg\"\n >\n {pf.preview ? (\n <img src={pf.preview} alt={pf.file.name} className=\"w-8 h-8 object-cover rounded\" />\n ) : (\n <div className=\"w-8 h-8 flex items-center justify-center bg-neutral-200 dark:bg-neutral-700 rounded !text-neutral-500 dark:!text-neutral-400\">\n {getFileIcon(pf.file.type)}\n </div>\n )}\n <div className=\"flex flex-col min-w-0\">\n <span className=\"text-xs font-medium !text-neutral-700 dark:!text-neutral-300 truncate max-w-[120px]\">\n {pf.file.name}\n </span>\n <span className=\"text-xs !text-neutral-500 dark:!text-neutral-400\">\n {formatFileSize(pf.file.size)}\n </span>\n </div>\n <button\n onClick={() => removeFile(index)}\n className=\"absolute -top-1.5 -right-1.5 w-5 h-5 bg-neutral-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\"\n title=\"Remove file\"\n >\n <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n ))}\n </div>\n )}\n\n <div className=\"apteva-composer relative border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 transition-all duration-300 flex items-center px-3 py-2 gap-3\">\n <div className=\"relative flex-shrink-0\">\n <button\n ref={menuButtonRef}\n onClick={() => setShowMenu(!showMenu)}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n title=\"More options\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 5v10M5 10h10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n\n {/* Menu Popup - fixed positioning to escape overflow:hidden */}\n {showMenu && (\n <>\n <div className=\"fixed inset-0 z-[9998]\" onClick={() => setShowMenu(false)} />\n <div\n className=\"fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]\"\n style={{\n left: menuButtonRef.current?.getBoundingClientRect().left ?? 0,\n top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8,\n }}\n >\n <button\n onClick={() => {\n fileInputRef.current?.click();\n setShowMenu(false);\n }}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2, 3)\"/>\n </svg>\n <span className=\"!text-sm font-medium\">Add photos & files</span>\n </button>\n {onSwitchMode && (\n <button\n onClick={() => {\n onSwitchMode();\n setShowMenu(false);\n }}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700\"\n >\n <svg className=\"w-4.5 h-4.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n </svg>\n <span className=\"!text-sm font-medium\">Switch to command mode</span>\n </button>\n )}\n </div>\n </>\n )}\n </div>\n\n <textarea\n ref={textareaRef}\n value={text}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n className=\"flex-1 resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1 disabled:opacity-50 disabled:cursor-not-allowed\"\n rows={1}\n style={{ maxHeight: '120px' }}\n />\n\n {isLoading && onStop ? (\n <button\n onClick={onStop}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-900/30 !text-red-600 dark:!text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50\"\n title=\"Stop generation\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"2\" width=\"10\" height=\"10\" rx=\"1\" fill=\"currentColor\"/>\n </svg>\n </button>\n ) : (\n <button\n onClick={handleSend}\n disabled={(!text.trim() && pendingFiles.length === 0) || disabled}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg\"\n title=\"Send message\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n )}\n </div>\n\n {/* Hidden file input */}\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n onChange={handleFileSelect}\n className=\"hidden\"\n accept=\"image/*,application/pdf,.doc,.docx,.txt\"\n />\n </div>\n );\n}\n","import { useState, useRef, KeyboardEvent } from 'react';\nimport { cn, validateFile, formatFileSize } from '../../utils';\n\ntype CommandState = 'idle' | 'loading' | 'success' | 'error' | 'plan-pending';\n\ninterface PendingFile {\n file: File;\n preview?: string;\n}\n\ninterface CommandComposerProps {\n onExecute: (command: string, files?: File[]) => void;\n state: CommandState;\n response?: string;\n error?: string;\n plan?: string;\n streamedContent?: string;\n toolName?: string | null;\n onApprove?: () => void;\n onReject?: () => void;\n onReset?: () => void;\n onStop?: () => void;\n onExpand?: () => void;\n placeholder?: string;\n disabled?: boolean;\n}\n\nexport function CommandComposer({\n onExecute,\n state,\n response,\n error,\n plan,\n streamedContent,\n toolName,\n onApprove,\n onReject,\n onReset,\n onStop,\n onExpand,\n placeholder = 'Enter your command...',\n disabled = false,\n}: CommandComposerProps) {\n const [input, setInput] = useState('');\n const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);\n const [fileError, setFileError] = useState<string | null>(null);\n const [showMenu, setShowMenu] = useState(false);\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const menuButtonRef = useRef<HTMLButtonElement>(null);\n\n const handleSubmit = () => {\n const hasText = input.trim();\n const hasFiles = pendingFiles.length > 0;\n\n if ((hasText || hasFiles) && !disabled && state === 'idle') {\n const filesToSend = pendingFiles.map(pf => pf.file);\n onExecute(input.trim(), filesToSend.length > 0 ? filesToSend : undefined);\n setInput('');\n setPendingFiles([]);\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n const handleNewCommand = () => {\n onReset?.();\n inputRef.current?.focus();\n };\n\n const handleInputChange = (value: string) => {\n setInput(value);\n if (inputRef.current) {\n inputRef.current.style.height = 'auto';\n inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`;\n }\n };\n\n const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n const files = Array.from(e.target.files);\n const validFiles: PendingFile[] = [];\n const errors: string[] = [];\n\n files.forEach(file => {\n const validation = validateFile(file);\n if (validation.valid) {\n const pending: PendingFile = { file };\n if (file.type.startsWith('image/')) {\n pending.preview = URL.createObjectURL(file);\n }\n validFiles.push(pending);\n } else {\n errors.push(validation.error || 'Invalid file');\n }\n });\n\n if (validFiles.length > 0) {\n setPendingFiles(prev => [...prev, ...validFiles]);\n }\n\n if (errors.length > 0) {\n setFileError(errors.join(', '));\n setTimeout(() => setFileError(null), 5000);\n }\n\n setShowMenu(false);\n e.target.value = '';\n }\n };\n\n const removeFile = (index: number) => {\n setPendingFiles(prev => {\n const file = prev[index];\n if (file.preview) {\n URL.revokeObjectURL(file.preview);\n }\n return prev.filter((_, i) => i !== index);\n });\n };\n\n const getFileIcon = (mimeType: string) => {\n if (mimeType.startsWith('image/')) {\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n );\n }\n if (mimeType === 'application/pdf') {\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n );\n }\n return (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n );\n };\n\n // Get display content based on state - show ONE thing at a time, replacing previous\n const getDisplayContent = (): { text: string; isToolCall: boolean } => {\n if (state === 'loading') {\n // Priority: tool call > streamed content > processing message\n if (toolName) {\n return { text: toolName, isToolCall: true };\n }\n // Only show streamed content if we have it (and no active tool)\n if (streamedContent) {\n return { text: streamedContent, isToolCall: false };\n }\n return { text: 'Processing...', isToolCall: false };\n }\n if (state === 'success' && response) {\n return { text: response, isToolCall: false };\n }\n if (state === 'error' && error) {\n return { text: error, isToolCall: false };\n }\n if (state === 'plan-pending' && plan) {\n return { text: plan, isToolCall: false };\n }\n return { text: '', isToolCall: false };\n };\n\n const isShowingResult = state !== 'idle';\n const { text: displayContent, isToolCall } = getDisplayContent();\n\n return (\n <div className=\"w-full relative\">\n {/* File Error Toast */}\n {fileError && (\n <div className=\"absolute -top-12 left-0 right-0 mx-3 p-2 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-30\">\n <div className=\"flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs\">\n <svg className=\"w-3 h-3 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <span>{fileError}</span>\n </div>\n </div>\n )}\n\n {/* Single input/output box */}\n <div\n className={cn(\n 'apteva-composer flex items-center gap-2 px-3 py-2 border-2 bg-white dark:bg-neutral-900 transition-all duration-200',\n state === 'idle' && 'border-neutral-200 dark:border-neutral-700',\n state === 'loading' && 'border-blue-400 dark:border-blue-500',\n state === 'plan-pending' && 'border-amber-400 dark:border-amber-500',\n state === 'success' && 'border-green-400 dark:border-green-500',\n state === 'error' && 'border-red-400 dark:border-red-500'\n )}\n >\n {/* Left side indicator area - fixed width to prevent layout shift */}\n <div className=\"w-8 h-8 flex items-center justify-center flex-shrink-0\">\n {/* Add file button - only in idle state */}\n {state === 'idle' && (\n <div className=\"relative\">\n <button\n ref={menuButtonRef}\n onClick={() => setShowMenu(!showMenu)}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-500 dark:!text-neutral-400 hover:!text-neutral-700 dark:hover:!text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n title=\"More options\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 5v10M5 10h10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n\n {/* Menu Popup - fixed positioning to escape overflow:hidden */}\n {showMenu && (\n <>\n <div className=\"fixed inset-0 z-[9998]\" onClick={() => setShowMenu(false)} />\n <div\n className=\"fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]\"\n style={{\n left: menuButtonRef.current?.getBoundingClientRect().left ?? 0,\n top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8,\n }}\n >\n <button\n onClick={() => {\n fileInputRef.current?.click();\n setShowMenu(false);\n }}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2, 3)\"/>\n </svg>\n <span className=\"!text-sm font-medium\">Add photos & files</span>\n </button>\n {onExpand && (\n <button\n onClick={() => {\n onExpand();\n setShowMenu(false);\n }}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700\"\n >\n <svg className=\"w-4.5 h-4.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\" />\n </svg>\n <span className=\"!text-sm font-medium\">Expand to chat</span>\n </button>\n )}\n </div>\n </>\n )}\n </div>\n )}\n\n {/* Loading spinner - show when loading without tool */}\n {state === 'loading' && !toolName && (\n <div className=\"w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin\" />\n )}\n\n {/* Tool indicator - blinking dot like in chat mode */}\n {state === 'loading' && toolName && (\n <div className=\"w-2 h-2 rounded-full bg-blue-500 animate-pulse\" />\n )}\n </div>\n\n {/* Inline file badges - compact display */}\n {pendingFiles.length > 0 && state === 'idle' && (\n <div className=\"flex items-center gap-1 flex-shrink-0\">\n {pendingFiles.map((pf, index) => (\n <div\n key={index}\n className=\"relative group flex items-center justify-center w-6 h-6 bg-neutral-100 dark:bg-neutral-800 rounded overflow-hidden\"\n title={pf.file.name}\n >\n {pf.preview ? (\n <img src={pf.preview} alt={pf.file.name} className=\"w-6 h-6 object-cover\" />\n ) : (\n <span className=\"text-xs !text-neutral-500 dark:!text-neutral-400\">\n {getFileIcon(pf.file.type)}\n </span>\n )}\n <button\n onClick={() => removeFile(index)}\n className=\"absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity\"\n title=\"Remove\"\n >\n <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n ))}\n </div>\n )}\n\n {/* Content area - input OR result */}\n {state === 'idle' ? (\n <textarea\n ref={inputRef}\n value={input}\n onChange={(e) => handleInputChange(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={pendingFiles.length > 0 ? 'Add a message...' : placeholder}\n disabled={disabled}\n rows={1}\n className={cn(\n 'flex-1 resize-none bg-transparent border-none focus:outline-none',\n '!text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500',\n 'text-sm leading-relaxed py-1',\n 'disabled:opacity-50'\n )}\n style={{ minHeight: '24px', maxHeight: '120px' }}\n />\n ) : (\n <div\n className={cn(\n 'flex-1 text-sm py-1 truncate flex items-center gap-2',\n state === 'loading' && !isToolCall && '!text-neutral-600 dark:!text-neutral-400',\n state === 'loading' && isToolCall && '!text-blue-600 dark:!text-blue-400',\n state === 'success' && '!text-neutral-900 dark:!text-neutral-100',\n state === 'error' && '!text-red-600 dark:!text-red-400',\n state === 'plan-pending' && '!text-amber-700 dark:!text-amber-300'\n )}\n >\n {isToolCall ? (\n <>\n <span className=\"font-mono\">{displayContent}</span>\n <span className=\"text-neutral-400 dark:text-neutral-500\">Running...</span>\n </>\n ) : (\n displayContent\n )}\n </div>\n )}\n\n {/* Action buttons - fixed width container to prevent layout shift */}\n <div className=\"w-8 h-8 flex items-center justify-center flex-shrink-0\">\n {/* Plan mode buttons - these expand, so handle separately */}\n {state === 'plan-pending' ? (\n <div className=\"flex items-center gap-1\">\n <button\n onClick={onApprove}\n className=\"px-2 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors text-xs font-medium\"\n >\n Approve\n </button>\n <button\n onClick={onReject}\n className=\"px-2 py-1 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-xs font-medium\"\n >\n Modify\n </button>\n </div>\n ) : (\n <>\n {/* Stop button - during loading */}\n {state === 'loading' && onStop && (\n <button\n onClick={onStop}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all border border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-900/30 !text-red-600 dark:!text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50\"\n title=\"Stop generation\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"2\" width=\"10\" height=\"10\" rx=\"1\" fill=\"currentColor\"/>\n </svg>\n </button>\n )}\n\n {/* Clear/New command button - after result */}\n {(state === 'success' || state === 'error') && (\n <button\n onClick={handleNewCommand}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center !text-neutral-400 hover:!text-neutral-600 dark:hover:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors\"\n title=\"New command\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n )}\n\n {/* Send button - only in idle state */}\n {state === 'idle' && (\n <button\n onClick={handleSubmit}\n disabled={(!input.trim() && pendingFiles.length === 0) || disabled}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center transition-all',\n 'border border-neutral-200 dark:border-neutral-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n (input.trim() || pendingFiles.length > 0)\n ? 'bg-neutral-900 dark:bg-white !text-white dark:!text-neutral-900 border-neutral-900 dark:border-white'\n : 'bg-white dark:bg-neutral-800 !text-neutral-400'\n )}\n title=\"Execute command\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 12h14M12 5l7 7-7 7\" />\n </svg>\n </button>\n )}\n </>\n )}\n </div>\n </div>\n\n {/* Hidden file input */}\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n onChange={handleFileSelect}\n className=\"hidden\"\n accept=\"image/*,application/pdf,.doc,.docx,.txt\"\n />\n </div>\n );\n}\n","export interface AptevaClientConfig {\n apiUrl?: string;\n apiKey?: string;\n}\n\nexport interface ChatMessage {\n role: 'user' | 'assistant' | 'system';\n content: string;\n}\n\nexport interface ChatRequest {\n agent_id: string;\n message: string | Array<{\n type: 'text' | 'image' | 'document';\n text?: string;\n source?: {\n type: 'base64';\n media_type: string;\n data: string;\n };\n }>;\n thread_id?: string;\n stream?: boolean;\n system?: string;\n}\n\nexport interface ChatResponse {\n message: string;\n thread_id: string;\n widgets?: any[];\n}\n\nexport interface StreamChunk {\n type: 'start' | 'thread_id' | 'request_id' | 'content' | 'token' | 'tool_call' | 'tool_input_delta' | 'tool_use' | 'tool_result' | 'stop' | 'widget' | 'complete' | 'done' | 'error';\n content?: string;\n widget?: any;\n thread_id?: string;\n request_id?: string;\n tool_id?: string;\n tool_name?: string;\n error?: string;\n message?: string;\n}\n\n// Default configuration\nconst DEFAULT_API_URL = 'http://91.99.200.48:3000/agents';\nconst DEFAULT_API_KEY = 'agt_894abd5966bc9f1e9f8f17f2a6f6b5e0';\n\nclass AptevaClient {\n private config: Required<AptevaClientConfig>;\n\n constructor() {\n this.config = {\n apiUrl: DEFAULT_API_URL,\n apiKey: DEFAULT_API_KEY,\n };\n }\n\n /**\n * Update client configuration (optional - users can override defaults)\n */\n configure(config: AptevaClientConfig) {\n if (config.apiUrl) this.config.apiUrl = config.apiUrl;\n if (config.apiKey) this.config.apiKey = config.apiKey;\n }\n\n /**\n * Get current configuration\n */\n getConfig(): AptevaClientConfig {\n return { ...this.config };\n }\n\n /**\n * Send a chat message to an agent\n */\n async chat(request: ChatRequest): Promise<ChatResponse> {\n try {\n console.log('[AptevaClient] Chat request:', {\n agent_id: request.agent_id,\n message: typeof request.message === 'string' ? request.message.substring(0, 100) + '...' : '[multi-part message]',\n system: request.system,\n stream: request.stream,\n });\n\n const response = await fetch(`${this.config.apiUrl}/chat`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': this.config.apiKey,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Request failed' }));\n throw new Error(error.error || `Request failed with status ${response.status}`);\n }\n\n const data = await response.json();\n\n // Map API response format to expected format\n // API returns: { response, thread_id, success, model, trace_id }\n // We expect: { message, thread_id, widgets }\n return {\n message: data.response || data.message || '',\n thread_id: data.thread_id,\n widgets: data.widgets,\n };\n } catch (error) {\n console.error('Chat API error:', error);\n throw error;\n }\n }\n\n /**\n * Send a chat message with streaming response\n */\n async chatStream(\n request: ChatRequest,\n onChunk: (chunk: StreamChunk) => void,\n onComplete?: (threadId: string) => void,\n onError?: (error: Error) => void\n ): Promise<void> {\n try {\n console.log('[AptevaClient] Chat stream request:', {\n agent_id: request.agent_id,\n message: typeof request.message === 'string' ? request.message.substring(0, 100) + '...' : '[multi-part message]',\n system: request.system,\n stream: request.stream,\n });\n\n const response = await fetch(`${this.config.apiUrl}/chat`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': this.config.apiKey,\n 'Accept': 'text/event-stream',\n },\n body: JSON.stringify({\n ...request,\n stream: true,\n }),\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Request failed' }));\n throw new Error(error.error || `Request failed with status ${response.status}`);\n }\n\n const reader = response.body?.getReader();\n if (!reader) {\n throw new Error('Response body is not readable');\n }\n\n const decoder = new TextDecoder();\n let buffer = '';\n let threadId = '';\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split('\\n');\n buffer = lines.pop() || '';\n\n for (const line of lines) {\n if (!line.trim() || line.startsWith(':')) continue;\n\n if (line.startsWith('data: ')) {\n const data = line.slice(6);\n\n if (data === '[DONE]') {\n onComplete?.(threadId);\n return;\n }\n\n try {\n const chunk = JSON.parse(data);\n\n // Store thread_id if present in chunk\n if (chunk.thread_id) {\n threadId = chunk.thread_id;\n }\n\n // Pass through ALL chunk types to the handler\n onChunk(chunk);\n\n } catch (e) {\n console.warn('[AptevaClient] Failed to parse SSE data:', data);\n }\n }\n }\n }\n\n onComplete?.(threadId);\n } catch (error) {\n const err = error instanceof Error ? error : new Error('Unknown error');\n onError?.(err);\n throw err;\n }\n }\n\n /**\n * Create a new thread\n */\n async createThread(agentId: string, metadata?: Record<string, any>): Promise<string> {\n const response = await fetch(`${this.config.apiUrl}/agents/${agentId}/threads`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': this.config.apiKey,\n },\n body: JSON.stringify({ metadata }),\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Request failed' }));\n throw new Error(error.error || `Request failed with status ${response.status}`);\n }\n\n const data = await response.json();\n return data.thread_id;\n }\n\n /**\n * Get thread messages\n */\n async getThreadMessages(threadId: string): Promise<ChatMessage[]> {\n const response = await fetch(`${this.config.apiUrl}/threads/${threadId}/messages`, {\n method: 'GET',\n headers: {\n 'X-API-Key': this.config.apiKey,\n },\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Request failed' }));\n throw new Error(error.error || `Request failed with status ${response.status}`);\n }\n\n const data = await response.json();\n return data.messages;\n }\n\n /**\n * Cancel an in-progress request\n */\n async cancelRequest(agentId: string, requestId: string): Promise<void> {\n try {\n const response = await fetch(`${this.config.apiUrl}/agents/${agentId}/requests/${requestId}/cancel`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-API-Key': this.config.apiKey,\n },\n });\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: 'Cancel request failed' }));\n throw new Error(error.error || `Cancel request failed with status ${response.status}`);\n }\n } catch (error) {\n console.error('[AptevaClient] Cancel request error:', error);\n throw error;\n }\n }\n}\n\n// Export singleton instance\nexport const aptevaClient = new AptevaClient();\n\n// Export class for custom instances\nexport { AptevaClient };\n","import { useState } from 'react';\nimport { cn } from '../../utils';\nimport { Widget } from '../../types/widgets';\nimport { WidgetRenderer } from '../Widgets/WidgetRenderer';\nimport { MarkdownContent } from './MarkdownContent';\nimport { ActionEvent } from '../../types/actions';\n\ninterface CommandOutputProps {\n state: 'idle' | 'loading' | 'success' | 'error' | 'plan-pending';\n streamedContent?: string;\n loadingText?: string;\n progress?: number;\n showProgress?: boolean;\n plan?: string;\n error?: Error | null;\n result?: {\n success: boolean;\n data: any;\n widgets?: Widget[];\n message?: string;\n } | null;\n onApprove?: () => void;\n onReject?: () => void;\n onReset?: () => void;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function CommandOutput({\n state,\n streamedContent,\n loadingText = 'Processing...',\n progress = 0,\n showProgress = true,\n plan,\n error,\n result,\n onApprove,\n onReject,\n onReset,\n onAction,\n}: CommandOutputProps) {\n const [isExpanded, setIsExpanded] = useState(false);\n\n // Don't render anything in idle state\n if (state === 'idle') {\n return null;\n }\n\n // Loading state - compact inline indicator\n if (state === 'loading') {\n return (\n <div className=\"mx-4 mb-3\">\n <div className=\"flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl\">\n <div className=\"w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin flex-shrink-0\" />\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm text-blue-700 dark:text-blue-300 truncate\">\n {streamedContent || loadingText}\n </p>\n {showProgress && progress > 0 && (\n <div className=\"mt-2 w-full bg-blue-200 dark:bg-blue-800 rounded-full h-1\">\n <div\n className=\"bg-blue-600 h-1 rounded-full transition-all duration-300\"\n style={{ width: `${progress}%` }}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n );\n }\n\n // Plan pending state\n if (state === 'plan-pending' && plan) {\n return (\n <div className=\"mx-4 mb-3\">\n <div className=\"p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl\">\n <div className=\"flex items-start gap-3 mb-3\">\n <svg className=\"w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-blue-800 dark:text-blue-300 mb-2\">Proposed Plan</h3>\n <div className=\"text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed\">\n {plan}\n </div>\n </div>\n </div>\n <div className=\"flex gap-2\">\n <button\n onClick={onApprove}\n className=\"flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium\"\n >\n Approve & Execute\n </button>\n <button\n onClick={onReject}\n className=\"flex-1 px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-sm font-medium\"\n >\n Modify\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n // Error state\n if (state === 'error' && error) {\n return (\n <div className=\"mx-4 mb-3\">\n <div className=\"p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl\">\n <div className=\"flex items-start gap-3\">\n <svg className=\"w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-red-800 dark:text-red-400\">Error</h3>\n <p className=\"text-red-700 dark:text-red-300 text-sm mt-1\">{error.message}</p>\n </div>\n <button\n onClick={onReset}\n className=\"p-1.5 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg transition-colors\"\n title=\"Dismiss\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n // Success state - collapsible\n if (state === 'success' && result) {\n const hasDetailedContent = result.data?.summary || (result.widgets && result.widgets.length > 0);\n\n return (\n <div className=\"mx-4 mb-3\">\n <div className={cn(\n \"border border-green-200 dark:border-green-800 rounded-xl overflow-hidden transition-all duration-200\",\n isExpanded ? \"bg-white dark:bg-neutral-900\" : \"bg-green-50 dark:bg-green-900/20\"\n )}>\n {/* Collapsed header - always visible */}\n <div\n className={cn(\n \"flex items-center gap-3 p-3 cursor-pointer\",\n isExpanded && \"border-b border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20\"\n )}\n onClick={() => hasDetailedContent && setIsExpanded(!isExpanded)}\n >\n <svg className=\"w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm text-green-700 dark:text-green-300 truncate\">\n {result.message || 'Command executed successfully'}\n </p>\n </div>\n <div className=\"flex items-center gap-2 flex-shrink-0\">\n {hasDetailedContent && (\n <button\n className=\"p-1.5 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-lg transition-colors\"\n title={isExpanded ? \"Collapse\" : \"Expand\"}\n >\n <svg\n className={cn(\"w-4 h-4 transition-transform duration-200\", isExpanded && \"rotate-180\")}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n )}\n <button\n onClick={(e) => {\n e.stopPropagation();\n onReset?.();\n }}\n className=\"p-1.5 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-lg transition-colors\"\n title=\"New command\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n </svg>\n </button>\n </div>\n </div>\n\n {/* Expanded content */}\n {isExpanded && hasDetailedContent && (\n <div className=\"p-4 space-y-4\">\n {result.data?.summary && (\n <div className=\"text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed\">\n <MarkdownContent content={result.data.summary} />\n </div>\n )}\n {result.widgets && result.widgets.length > 0 && (\n <div className=\"space-y-3\">\n {result.widgets.map((widget) => (\n <WidgetRenderer key={widget.id} widget={widget} onAction={onAction} />\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n }\n\n return null;\n}\n","import React, { useState, useEffect } from 'react';\nimport { CommandProps, CommandResult } from '../../types/components';\nimport { cn, generateMockCommandWithWidgets, generateMockCommandStream, generateMockPlan } from '../../utils';\nimport { aptevaClient } from '../../lib/apteva-client';\nimport { WidgetRenderer } from '../Widgets/WidgetRenderer';\n\nexport function Command({\n agentId,\n command: initialCommand,\n context,\n autoExecute = false,\n allowInput = true,\n placeholder = 'Enter your command...',\n submitButtonText = 'Execute',\n variant = 'default',\n useMock = false,\n planMode = false,\n onPlanModeChange,\n enableFileUpload = true,\n onStart,\n onProgress,\n onChunk,\n onComplete,\n onError,\n onFileUpload,\n onAction,\n loadingText = 'Processing...',\n showProgress = true,\n enableStreaming = false,\n resultRenderer,\n className,\n}: CommandProps) {\n const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error' | 'plan-pending'>('idle');\n const [result, setResult] = useState<CommandResult | null>(null);\n const [error, setError] = useState<Error | null>(null);\n const [progress, setProgress] = useState(0);\n const [command, setCommand] = useState(initialCommand || '');\n const [streamedContent, setStreamedContent] = useState('');\n const [plan, setPlan] = useState<string>('');\n const [pendingCommand, setPendingCommand] = useState<string>('');\n const [showPlanDetails, setShowPlanDetails] = useState(false);\n const [uploadedFiles, setUploadedFiles] = useState<Array<{ type: 'image' | 'document'; data: string; mediaType: string; preview?: string; name: string }>>([]);\n const [showSettingsMenu, setShowSettingsMenu] = useState(false);\n const [internalPlanMode, setInternalPlanMode] = useState(planMode);\n const fileInputRef = React.useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoExecute && state === 'idle' && command) {\n executeCommand();\n }\n }, [autoExecute]);\n\n // Sync internal plan mode with prop when prop changes\n useEffect(() => {\n setInternalPlanMode(planMode);\n }, [planMode]);\n\n // Close settings menu when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (showSettingsMenu && !target.closest('.settings-menu-container')) {\n setShowSettingsMenu(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [showSettingsMenu]);\n\n const executeCommand = async (commandOverride?: string) => {\n const currentCommand = commandOverride || command;\n\n if (!currentCommand.trim()) {\n setError(new Error('Please enter a command'));\n setState('error');\n return;\n }\n\n // Plan mode: show plan first\n if (internalPlanMode && state !== 'plan-pending') {\n setState('loading');\n setError(null);\n setCommand(''); // Clear input\n\n // Generate plan (mock or real)\n if (useMock) {\n setTimeout(() => {\n const mockPlan = generateMockPlan(currentCommand);\n setPlan(mockPlan);\n setPendingCommand(currentCommand);\n setState('plan-pending');\n }, 800);\n } else {\n // Real API plan generation\n try {\n // Build message - multi-part if files are uploaded\n let messageContent: any;\n\n if (uploadedFiles.length > 0) {\n messageContent = [\n {\n type: 'text',\n text: currentCommand,\n },\n ...uploadedFiles.map(file => ({\n type: file.type,\n source: {\n type: 'base64',\n media_type: file.mediaType,\n data: file.data,\n },\n })),\n ];\n } else {\n messageContent = currentCommand;\n }\n\n // System instruction for planning only\n let systemMessage = context || '';\n const planningInstruction = `CRITICAL PLANNING MODE - READ CAREFULLY:\n\nYou are ONLY creating a plan. You are NOT executing anything.\n\nYOUR TASK: Write a numbered list of steps describing what WOULD be done.\nDO NOT: Execute any actions, make API calls, access databases, modify data, or perform any operations.\nDO NOT: Ask questions or clarifications. Make reasonable assumptions.\nDO: Describe the steps as \"Step 1: Would search database...\", \"Step 2: Would analyze results...\", etc.\nDO: Use default values or best practices if details are missing.\n\nFORMAT REQUIRED:\n1. [First action that would be taken]\n2. [Second action that would be taken]\n3. [Third action that would be taken]\n...\n\nIMPORTANT: This is COMMAND MODE - figure things out yourself. Make intelligent assumptions based on context. ONLY ask questions if something is absolutely impossible to proceed without (e.g., missing required credentials). Otherwise, use sensible defaults and proceed with the plan.\n\nREMEMBER: This is ONLY a plan. The user will approve it, THEN it will be executed. Right now you are just describing what would happen - NOT doing it.`;\n\n\n systemMessage = systemMessage\n ? `${systemMessage}\\n\\n${planningInstruction}`\n : planningInstruction;\n\n aptevaClient.chat({\n agent_id: agentId,\n message: messageContent,\n stream: false,\n system: systemMessage,\n }).then((response) => {\n setPlan(response.message);\n setPendingCommand(currentCommand);\n setState('plan-pending');\n }).catch((err) => {\n const error = err instanceof Error ? err : new Error('Failed to generate plan');\n setError(error);\n setState('error');\n onError?.(error);\n });\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Failed to generate plan');\n setError(error);\n setState('error');\n onError?.(error);\n }\n }\n return;\n }\n\n setState('loading');\n setError(null);\n setProgress(0);\n setStreamedContent('');\n setCommand(''); // Clear input for next command\n setUploadedFiles([]); // Clear uploaded files after sending\n onStart?.();\n\n try {\n if (useMock) {\n // MOCK MODE\n if (enableStreaming) {\n // Mock streaming\n let accumulatedContent = '';\n\n generateMockCommandStream(\n currentCommand,\n (chunk) => {\n if (chunk.type === 'token' && chunk.content) {\n accumulatedContent += chunk.content;\n setStreamedContent(accumulatedContent);\n onChunk?.(chunk.content);\n\n // Estimate progress based on content length\n const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);\n setProgress(estimatedProgress);\n onProgress?.(estimatedProgress);\n } else if (chunk.type === 'widget' && chunk.widget) {\n // Handle widgets in streamed response\n const widget = chunk.widget;\n setResult((prev) => ({\n success: true,\n data: prev?.data || {},\n widgets: [...(prev?.widgets || []), widget],\n message: accumulatedContent || 'Command executed successfully',\n }));\n }\n },\n (threadId) => {\n // On complete\n const result: CommandResult = {\n success: true,\n data: {\n summary: accumulatedContent,\n thread_id: threadId,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n message: accumulatedContent || 'Command executed successfully',\n };\n\n setResult(result);\n setState('success');\n setProgress(100);\n onComplete?.(result);\n },\n (error) => {\n // On error\n setError(error);\n setState('error');\n onError?.(error);\n }\n );\n } else {\n // Mock non-streaming\n const progressInterval = setInterval(() => {\n setProgress((prev) => {\n const next = Math.min(prev + 10, 90);\n onProgress?.(next);\n return next;\n });\n }, 200);\n\n // Simulate network delay\n await new Promise(resolve => setTimeout(resolve, 1500));\n\n clearInterval(progressInterval);\n\n const mockResponse = generateMockCommandWithWidgets(currentCommand);\n\n const result: CommandResult = {\n success: true,\n data: {\n summary: mockResponse.message,\n thread_id: `mock_thread_${Date.now()}`,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n action: mockResponse.action, // Include agent action intent\n },\n widgets: mockResponse.widgets,\n message: mockResponse.message,\n };\n\n setResult(result);\n setState('success');\n setProgress(100);\n onComplete?.(result);\n }\n } else {\n // REAL API MODE\n if (enableStreaming) {\n // Real streaming API call\n let accumulatedContent = '';\n\n // Build message - multi-part if files are uploaded\n let messageContent: any;\n\n if (uploadedFiles.length > 0) {\n // Multi-part message with text and images\n messageContent = [\n {\n type: 'text',\n text: currentCommand,\n },\n ...uploadedFiles.map(file => ({\n type: file.type, // 'image' or 'document'\n source: {\n type: 'base64',\n media_type: file.mediaType,\n data: file.data,\n },\n })),\n ];\n } else {\n // Simple text message\n messageContent = currentCommand;\n }\n\n // Build system message - add command execution instruction\n let systemMessage = context || '';\n\n // Always include command mode instruction for brevity\n let commandInstruction: string;\n if (isCompact) {\n // Compact mode - extremely terse\n commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute immediately, make intelligent assumptions, use defaults when needed. NO questions unless absolutely critical (missing required credentials). State action or result ONLY. Examples: \"Searching database for matching records...\" or \"Found 3 user records in database\" or \"Task completed successfully\". NO greetings, NO explanations, NO clarification requests. Just execute and report.';\n } else {\n // Default mode - still very brief\n commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you\\'re doing or the result. Examples: \"Analyzing customer data from last quarter...\" or \"Created 5 new database entries successfully\" or \"Search complete: found 12 matching results\". NO greetings, NO filler words, NO clarification requests. Action/result only.';\n }\n\n systemMessage = systemMessage\n ? `${systemMessage}\\n\\n${commandInstruction}`\n : commandInstruction;\n\n await aptevaClient.chatStream(\n {\n agent_id: agentId,\n message: messageContent,\n stream: true,\n ...(systemMessage && { system: systemMessage }),\n },\n (chunk) => {\n if (chunk.type === 'token' && chunk.content) {\n accumulatedContent += chunk.content;\n setStreamedContent(accumulatedContent);\n onChunk?.(chunk.content);\n\n // Estimate progress based on content length (rough approximation)\n const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);\n setProgress(estimatedProgress);\n onProgress?.(estimatedProgress);\n } else if (chunk.type === 'widget' && chunk.widget) {\n // Handle widgets in streamed response\n const widget = chunk.widget;\n setResult((prev) => ({\n success: true,\n data: prev?.data || {},\n widgets: [...(prev?.widgets || []), widget],\n message: accumulatedContent || 'Command executed successfully',\n }));\n }\n },\n (threadId) => {\n // On complete\n const result: CommandResult = {\n success: true,\n data: {\n summary: accumulatedContent,\n thread_id: threadId,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n message: accumulatedContent || 'Command executed successfully',\n };\n\n setResult(result);\n setState('success');\n setProgress(100);\n onComplete?.(result);\n },\n (error) => {\n // On error\n const err = error instanceof Error ? error : new Error('Unknown error');\n setError(err);\n setState('error');\n onError?.(err);\n }\n );\n } else {\n // Non-streaming API call\n const progressInterval = setInterval(() => {\n setProgress((prev) => {\n const next = Math.min(prev + 10, 90);\n onProgress?.(next);\n return next;\n });\n }, 200);\n\n // Build message - multi-part if files are uploaded\n let messageContent: any;\n\n if (uploadedFiles.length > 0) {\n // Multi-part message with text and images\n messageContent = [\n {\n type: 'text',\n text: currentCommand,\n },\n ...uploadedFiles.map(file => ({\n type: file.type, // 'image' or 'document'\n source: {\n type: 'base64',\n media_type: file.mediaType,\n data: file.data,\n },\n })),\n ];\n } else {\n // Simple text message\n messageContent = currentCommand;\n }\n\n // Build system message - add command execution instruction\n let systemMessage = context || '';\n\n // Always include command mode instruction for brevity\n let commandInstruction: string;\n if (isCompact) {\n // Compact mode - extremely terse\n commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute immediately, make intelligent assumptions, use defaults when needed. NO questions unless absolutely critical (missing required credentials). State action or result ONLY. Examples: \"Searching database for matching records...\" or \"Found 3 user records in database\" or \"Task completed successfully\". NO greetings, NO explanations, NO clarification requests. Just execute and report.';\n } else {\n // Default mode - still very brief\n commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you\\'re doing or the result. Examples: \"Analyzing customer data from last quarter...\" or \"Created 5 new database entries successfully\" or \"Search complete: found 12 matching results\". NO greetings, NO filler words, NO clarification requests. Action/result only.';\n }\n\n systemMessage = systemMessage\n ? `${systemMessage}\\n\\n${commandInstruction}`\n : commandInstruction;\n\n const response = await aptevaClient.chat({\n agent_id: agentId,\n message: messageContent,\n stream: false,\n ...(systemMessage && { system: systemMessage }),\n });\n\n clearInterval(progressInterval);\n\n const result: CommandResult = {\n success: true,\n data: {\n summary: response.message,\n thread_id: response.thread_id,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n widgets: response.widgets,\n message: response.message,\n };\n\n setResult(result);\n setState('success');\n setProgress(100);\n onComplete?.(result);\n }\n }\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Unknown error');\n setError(error);\n setState('error');\n onError?.(error);\n }\n };\n\n const resetCommand = () => {\n setState('idle');\n setResult(null);\n setError(null);\n setProgress(0);\n setCommand('');\n setPlan('');\n setPendingCommand('');\n setShowPlanDetails(false);\n setUploadedFiles([]);\n };\n\n const approvePlan = () => {\n // Execute the plan after approval\n // Send the plan to the agent with \"execute this now\" instruction\n setShowPlanDetails(false);\n const planToExecute = plan;\n setPlan('');\n setPendingCommand('');\n\n // Execute with the plan as the command\n const executionMessage = `Execute this plan now:\\n\\n${planToExecute}`;\n executeCommand(executionMessage);\n };\n\n const rejectPlan = () => {\n // Reset to idle and restore the command for editing\n setCommand(pendingCommand);\n setPlan('');\n setPendingCommand('');\n setShowPlanDetails(false);\n setState('idle');\n };\n\n const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n onFileUpload?.(e.target.files);\n\n // Convert files to base64 for API\n const files: Array<{ type: 'image' | 'document'; data: string; mediaType: string; preview?: string; name: string }> = [];\n\n for (let i = 0; i < e.target.files.length; i++) {\n const file = e.target.files[i];\n\n const reader = new FileReader();\n\n await new Promise<void>((resolve) => {\n reader.onload = (event) => {\n if (event.target?.result) {\n const fullDataUrl = event.target.result as string;\n const base64Data = fullDataUrl.split(',')[1]; // Remove data:...;base64, prefix\n\n if (file.type.startsWith('image/')) {\n // Images with preview\n files.push({\n type: 'image',\n data: base64Data,\n mediaType: file.type,\n preview: fullDataUrl, // Keep full data URL for preview\n name: file.name,\n });\n } else if (file.type === 'application/pdf' || file.type.startsWith('application/')) {\n // Documents (PDF, etc.) without preview\n files.push({\n type: 'document',\n data: base64Data,\n mediaType: file.type,\n name: file.name,\n });\n }\n }\n resolve();\n };\n reader.readAsDataURL(file);\n });\n }\n\n setUploadedFiles(prev => [...prev, ...files]); // Append to existing files\n }\n };\n\n const removeFile = (index: number) => {\n setUploadedFiles(prev => prev.filter((_, i) => i !== index));\n };\n\n const isCompact = variant === 'compact';\n\n return (\n <div\n className={cn(\n 'relative border-2 rounded-xl bg-white dark:bg-neutral-900 transition-all duration-300 flex flex-col',\n state === 'loading' && 'animate-pulse-border',\n state === 'idle' && 'border-neutral-300 dark:border-neutral-700',\n state === 'loading' && 'border-blue-500',\n state === 'plan-pending' && 'border-blue-400',\n state === 'success' && 'border-green-500',\n state === 'error' && 'border-red-500',\n className\n )}\n style={{ minHeight: isCompact ? 'auto' : '180px' }}\n >\n {/* Input/Display Area */}\n <div className={cn('flex-1 flex', isCompact ? 'flex-row items-center p-3 gap-3' : 'flex-col p-4')}>\n {state === 'idle' && allowInput && !isCompact && (\n <>\n <textarea\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 w-full resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500\"\n rows={6}\n />\n {/* File Previews - Non-Compact */}\n {uploadedFiles.length > 0 && (\n <div className=\"flex flex-wrap gap-2 mt-2\">\n {uploadedFiles.map((file, index) => (\n <div key={index} className=\"relative group\">\n {file.type === 'image' ? (\n <img\n src={file.preview}\n alt={file.name}\n className=\"w-20 h-20 object-cover rounded-lg border-2 border-neutral-300 dark:border-neutral-600\"\n />\n ) : (\n <div className=\"w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800\">\n <svg className=\"w-8 h-8 text-neutral-500 dark:text-neutral-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z\" clipRule=\"evenodd\" />\n </svg>\n <span className=\"text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full\">\n {file.name.length > 12 ? file.name.slice(0, 12) + '...' : file.name}\n </span>\n </div>\n )}\n <button\n onClick={() => removeFile(index)}\n className=\"absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\"\n title={`Remove ${file.type}`}\n >\n <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n ))}\n </div>\n )}\n </>\n )}\n\n {state === 'idle' && allowInput && isCompact && (\n <>\n <div className=\"flex items-center gap-0.5 flex-shrink-0\">\n {enableFileUpload && (\n <button\n onClick={() => fileInputRef.current?.click()}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n title=\"Attach file\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1.6, 2.4)\"/>\n </svg>\n </button>\n )}\n {planMode && (\n <div className=\"relative settings-menu-container\">\n <button\n onClick={() => setShowSettingsMenu(!showSettingsMenu)}\n className={cn(\n \"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n internalPlanMode ? \"!text-blue-600 dark:!text-blue-400\" : \"!text-neutral-500 dark:!text-neutral-500\"\n )}\n title=\"Settings\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"></line>\n <line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"></line>\n <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"></line>\n <line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"></line>\n <line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"></line>\n <line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"></line>\n <line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"></line>\n <line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"></line>\n </svg>\n </button>\n {showSettingsMenu && (\n <div className=\"absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container\">\n <label className=\"flex items-center justify-between cursor-pointer group\">\n <div className=\"flex items-center gap-2\">\n <svg className=\"w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <div>\n <div className=\"text-xs font-medium text-neutral-700 dark:text-neutral-300\">Plan Mode</div>\n <div className=\"text-[10px] text-neutral-500 dark:text-neutral-400\">Review first</div>\n </div>\n </div>\n <button\n onClick={(e) => {\n e.stopPropagation();\n setInternalPlanMode(!internalPlanMode);\n }}\n className={cn(\n \"relative inline-flex h-4 w-8 items-center rounded-full transition-colors\",\n internalPlanMode ? \"bg-blue-600\" : \"bg-neutral-300 dark:bg-neutral-600\"\n )}\n type=\"button\"\n >\n <span\n className={cn(\n \"inline-block h-3 w-3 transform rounded-full bg-white transition-transform\",\n internalPlanMode ? \"translate-x-4.5\" : \"translate-x-0.5\"\n )}\n />\n </button>\n </label>\n </div>\n )}\n </div>\n )}\n </div>\n {/* File Previews - Compact */}\n {uploadedFiles.length > 0 && (\n <div className=\"flex gap-1 flex-shrink-0\">\n {uploadedFiles.map((file, index) => (\n <div key={index} className=\"relative group\">\n {file.type === 'image' ? (\n <img\n src={file.preview}\n alt={file.name}\n className=\"w-8 h-8 object-cover rounded border border-neutral-300 dark:border-neutral-600\"\n />\n ) : (\n <div className=\"w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800\" title={file.name}>\n <svg className=\"w-4 h-4 text-neutral-500 dark:text-neutral-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z\" clipRule=\"evenodd\" />\n </svg>\n </div>\n )}\n <button\n onClick={() => removeFile(index)}\n className=\"absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\"\n title=\"Remove\"\n >\n <svg className=\"w-2.5 h-2.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3}>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n ))}\n </div>\n )}\n <input\n type=\"text\"\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1\"\n />\n <button\n onClick={() => executeCommand()}\n disabled={!command.trim()}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-neutral-300 dark:border-neutral-600',\n 'bg-white dark:bg-neutral-800',\n '!text-neutral-700 dark:!text-neutral-300',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n '!text-lg',\n !command.trim() && 'border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600'\n )}\n title=\"Execute\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n\n {state === 'loading' && !isCompact && (\n <div className=\"flex-1 flex flex-col items-center justify-center space-y-4 py-8\">\n <div className=\"w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin\"></div>\n <div className=\"text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md\">\n {enableStreaming && streamedContent ? streamedContent : loadingText}\n </div>\n {showProgress && (\n <div className=\"w-full max-w-sm\">\n <div className=\"w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5\">\n <div\n className=\"bg-blue-500 h-1.5 rounded-full transition-all duration-300\"\n style={{ width: `${progress}%` }}\n />\n </div>\n <p className=\"text-xs text-neutral-500 mt-2 text-center\">{progress}%</p>\n </div>\n )}\n </div>\n )}\n\n {state === 'loading' && isCompact && (\n <>\n <div className=\"flex-1 flex items-center gap-3 py-1\">\n <div className=\"w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin\"></div>\n <div className=\"text-neutral-600 dark:text-neutral-400 text-sm truncate\">\n {enableStreaming && streamedContent ? streamedContent : loadingText}\n </div>\n </div>\n <button\n disabled\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-neutral-200 dark:border-neutral-700',\n 'bg-white dark:bg-neutral-800',\n '!text-neutral-400 dark:!text-neutral-600',\n '!text-lg',\n 'opacity-30 cursor-not-allowed'\n )}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n\n {state === 'plan-pending' && !isCompact && (\n <div className=\"flex-1 flex flex-col\">\n <div className=\"mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg\">\n <div className=\"flex items-start gap-2 mb-3\">\n <svg className=\"w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1\">Proposed Plan</h3>\n <div className=\"text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed\">\n {plan}\n </div>\n </div>\n </div>\n <div className=\"flex gap-2 mt-4\">\n <button\n onClick={approvePlan}\n className=\"flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium\"\n >\n Approve & Execute\n </button>\n <button\n onClick={rejectPlan}\n className=\"flex-1 px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-sm font-medium\"\n >\n Modify\n </button>\n </div>\n </div>\n </div>\n )}\n\n {state === 'plan-pending' && isCompact && (\n <>\n <button\n onClick={() => setShowPlanDetails(true)}\n className=\"flex-1 flex items-center gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 border border-blue-200 dark:border-blue-800 rounded-lg transition-colors\"\n >\n <svg className=\"w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <span className=\"text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1\">View Execution Plan</span>\n </button>\n <div className=\"flex gap-2 flex-shrink-0\">\n <button\n onClick={approvePlan}\n className=\"px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-xs font-medium\"\n >\n Approve\n </button>\n <button\n onClick={rejectPlan}\n className=\"px-3 py-1.5 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-xs font-medium\"\n >\n Modify\n </button>\n </div>\n </>\n )}\n\n {state === 'error' && (\n <div className=\"flex-1 flex flex-col\">\n <div className=\"mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg\">\n <div className=\"flex items-start gap-2\">\n <svg className=\"w-5 h-5 text-red-600 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div>\n <h3 className=\"text-sm font-semibold text-red-800 dark:text-red-400\">Error</h3>\n <p className=\"text-red-700 dark:text-red-300 text-sm mt-1\">{error?.message}</p>\n </div>\n </div>\n </div>\n {allowInput && (\n <textarea\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-neutral-900 dark:text-white placeholder-neutral-400\"\n rows={4}\n />\n )}\n </div>\n )}\n\n {state === 'success' && result && !isCompact && (\n <div className=\"flex-1 overflow-auto\">\n {resultRenderer ? (\n resultRenderer(result.data)\n ) : (\n <div className=\"space-y-4\">\n <div className=\"flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg\">\n <svg className=\"w-5 h-5 text-green-600 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-green-800 dark:text-green-400 mb-1\">Success</h3>\n <p className=\"text-green-700 dark:text-green-300 text-sm\">Command executed successfully</p>\n </div>\n </div>\n {result.data?.summary && (\n <div className=\"text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line\">\n {result.data.summary}\n </div>\n )}\n {result.widgets && result.widgets.length > 0 && (\n <div className=\"space-y-3\">\n {result.widgets.map((widget) => (\n <WidgetRenderer\n key={widget.id}\n widget={widget}\n onAction={onAction}\n />\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n\n {state === 'success' && result && isCompact && (\n <>\n <div\n className=\"flex-1 flex items-center gap-2 py-1 cursor-text min-w-0\"\n onClick={() => {\n setState('idle');\n setResult(null);\n }}\n >\n <svg className=\"w-4 h-4 text-green-600 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0\">\n {resultRenderer ? resultRenderer(result.data) : (result.message || 'Command executed successfully')}\n </div>\n </div>\n <button\n onClick={() => {\n setState('idle');\n setResult(null);\n }}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-neutral-300 dark:border-neutral-600',\n 'bg-white dark:bg-neutral-800',\n '!text-neutral-700 dark:!text-neutral-300',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n '!text-lg'\n )}\n title=\"New command\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n </div>\n\n {/* Bottom Action Bar - Only show for default variant when not in compact mode */}\n {!isCompact && (\n <div className=\"p-3 flex items-center justify-between gap-2\">\n {/* Left side - Attachment and Settings buttons */}\n <div className=\"flex items-center gap-1\">\n {state === 'idle' && allowInput && (\n <>\n {enableFileUpload && (\n <button\n onClick={() => fileInputRef.current?.click()}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n title=\"Attach file\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1.6, 2.4)\"/>\n </svg>\n </button>\n )}\n {planMode && (\n <div className=\"relative settings-menu-container\">\n <button\n onClick={() => setShowSettingsMenu(!showSettingsMenu)}\n className={cn(\n \"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n internalPlanMode ? \"!text-blue-600 dark:!text-blue-400\" : \"!text-neutral-500 dark:!text-neutral-500\"\n )}\n title=\"Settings\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"></line>\n <line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"></line>\n <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"></line>\n <line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"></line>\n <line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"></line>\n <line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"></line>\n <line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"></line>\n <line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"></line>\n </svg>\n </button>\n {showSettingsMenu && (\n <div className=\"absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container\">\n <label className=\"flex items-center justify-between cursor-pointer group\">\n <div className=\"flex items-center gap-2\">\n <svg className=\"w-4 h-4 text-neutral-500 dark:text-neutral-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <div>\n <div className=\"text-sm font-medium text-neutral-700 dark:text-neutral-300\">Plan Mode</div>\n <div className=\"text-xs text-neutral-500 dark:text-neutral-400\">Review before executing</div>\n </div>\n </div>\n <button\n onClick={(e) => {\n e.stopPropagation();\n setInternalPlanMode(!internalPlanMode);\n }}\n className={cn(\n \"relative inline-flex h-5 w-9 items-center rounded-full transition-colors\",\n internalPlanMode ? \"bg-blue-600\" : \"bg-neutral-300 dark:bg-neutral-600\"\n )}\n type=\"button\"\n >\n <span\n className={cn(\n \"inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform\",\n internalPlanMode ? \"translate-x-5\" : \"translate-x-0.5\"\n )}\n />\n </button>\n </label>\n </div>\n )}\n </div>\n )}\n </>\n )}\n </div>\n\n {/* Spacer when no attachment button */}\n {!(state === 'idle' && allowInput) && <div />}\n\n {/* Right side - Action buttons */}\n <div className=\"flex items-center gap-2\">\n {(state === 'success' || state === 'error') && allowInput && (\n <button\n onClick={resetCommand}\n className=\"px-3 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors\"\n >\n Reset\n </button>\n )}\n\n {(state === 'idle' || state === 'error') && (\n <button\n onClick={() => executeCommand()}\n disabled={!command.trim()}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all',\n 'border border-neutral-300 dark:border-neutral-600',\n 'bg-white dark:bg-neutral-800',\n '!text-neutral-700 dark:!text-neutral-300',\n 'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n '!text-lg',\n !command.trim() && 'border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600'\n )}\n title={state === 'error' ? 'Retry' : 'Execute'}\n >\n {state === 'error' ? (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n ) : (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n )}\n </button>\n )}\n </div>\n </div>\n )}\n\n {/* Plan Modal - Only for compact mode */}\n {showPlanDetails && isCompact && state === 'plan-pending' && (\n <div className=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4\" onClick={() => setShowPlanDetails(false)}>\n <div className=\"bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden\" onClick={(e) => e.stopPropagation()}>\n {/* Modal Header */}\n <div className=\"flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700\">\n <div className=\"flex items-center gap-3\">\n <svg className=\"w-6 h-6 text-blue-600 dark:text-blue-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\" />\n </svg>\n <h2 className=\"text-xl font-semibold text-neutral-900 dark:text-white\">Proposed Execution Plan</h2>\n </div>\n <button\n onClick={() => setShowPlanDetails(false)}\n className=\"text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors\"\n >\n <svg className=\"w-6 h-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n {/* Modal Content */}\n <div className=\"p-6 overflow-y-auto max-h-[calc(80vh-180px)]\">\n <div className=\"prose prose-sm dark:prose-invert max-w-none\">\n <div className=\"text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed\">\n {plan}\n </div>\n </div>\n </div>\n\n {/* Modal Footer */}\n <div className=\"flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50\">\n <button\n onClick={rejectPlan}\n className=\"px-6 py-2.5 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors font-medium\"\n >\n Modify Command\n </button>\n <button\n onClick={approvePlan}\n className=\"px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium\"\n >\n Approve & Execute\n </button>\n </div>\n </div>\n </div>\n )}\n\n {/* Hidden file input */}\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n onChange={handleFileSelect}\n className=\"hidden\"\n accept=\"image/*,application/pdf,.doc,.docx,.txt\"\n />\n\n <style dangerouslySetInnerHTML={{\n __html: `\n @keyframes pulse-border {\n 0%, 100% {\n border-color: rgb(59, 130, 246);\n }\n 50% {\n border-color: rgb(147, 197, 253);\n }\n }\n .animate-pulse-border {\n animation: pulse-border 2s ease-in-out infinite;\n }\n `\n }} />\n </div>\n );\n}\n","import { useState, KeyboardEvent } from 'react';\nimport { PromptProps } from '../../types/components';\nimport { cn } from '../../utils';\nimport { aptevaClient } from '../../lib/apteva-client';\n\nexport function Prompt({\n agentId,\n placeholder = 'Enter your prompt...',\n initialValue = '',\n useMock = true,\n submitOn = 'button',\n debounceMs = 0,\n minLength = 0,\n maxLength,\n onSubmit,\n onResult,\n onChange,\n variant = 'inline',\n showSuggestions = false,\n className,\n}: PromptProps) {\n const [value, setValue] = useState(initialValue);\n const [isLoading, setIsLoading] = useState(false);\n const [suggestions] = useState(['Plan a trip', 'Write a description', 'Analyze data']);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!maxLength || newValue.length <= maxLength) {\n setValue(newValue);\n onChange?.(newValue);\n }\n };\n\n const handleSubmit = async () => {\n if (value.length < minLength) return;\n\n onSubmit?.(value);\n setIsLoading(true);\n\n try {\n if (useMock) {\n // MOCK MODE\n await new Promise((resolve) => setTimeout(resolve, 1500));\n const mockResult = `Enhanced version: ${value} [AI-generated content]`;\n onResult?.(mockResult);\n setValue('');\n } else {\n // REAL API MODE\n const response = await aptevaClient.chat({\n agent_id: agentId,\n message: value,\n });\n onResult?.(response.message);\n setValue('');\n }\n } catch (error) {\n console.error('Error processing prompt:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (submitOn === 'enter' && e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n const handleBlur = () => {\n if (submitOn === 'blur' && value.trim()) {\n handleSubmit();\n }\n };\n\n return (\n <div className={cn('space-y-2', className)}>\n <div className=\"flex gap-2\">\n <input\n type=\"text\"\n value={value}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n placeholder={placeholder}\n disabled={isLoading}\n className=\"flex-1 px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white\"\n />\n\n {submitOn === 'button' && (\n <button\n onClick={handleSubmit}\n disabled={isLoading || value.length < minLength}\n className=\"px-6 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n >\n {isLoading ? 'Processing...' : 'Generate'}\n </button>\n )}\n </div>\n\n {maxLength && (\n <p className=\"text-xs text-neutral-500\">\n {value.length} / {maxLength} characters\n </p>\n )}\n\n {showSuggestions && !value && (\n <div className=\"flex flex-wrap gap-2\">\n {suggestions.map((suggestion, idx) => (\n <button\n key={idx}\n onClick={() => setValue(suggestion)}\n className=\"px-3 py-1 text-sm bg-neutral-100 hover:bg-neutral-200 text-neutral-700 rounded-full transition-colors\"\n >\n {suggestion}\n </button>\n ))}\n </div>\n )}\n\n {isLoading && (\n <div className=\"flex items-center gap-2 text-sm text-neutral-500\">\n <div className=\"w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin\" />\n <span>AI is processing your request...</span>\n </div>\n )}\n </div>\n );\n}\n","import { useState, useEffect } from 'react';\nimport { StreamProps } from '../../types/components';\nimport { cn, generateMockStreamingResponse } from '../../utils';\nimport { aptevaClient } from '../../lib/apteva-client';\n\nexport function Stream({\n agentId,\n prompt,\n context,\n autoStart = false,\n useMock = true,\n onStart,\n onChunk,\n onComplete,\n onError,\n variant = 'prose',\n showCursor = true,\n typingSpeed = 30,\n className,\n}: StreamProps) {\n const [text, setText] = useState('');\n const [isStreaming, setIsStreaming] = useState(false);\n const [isComplete, setIsComplete] = useState(false);\n\n useEffect(() => {\n if (autoStart && !isStreaming && !isComplete) {\n startStreaming();\n }\n }, [autoStart]);\n\n const startStreaming = async () => {\n setIsStreaming(true);\n onStart?.();\n\n try {\n if (useMock) {\n // MOCK MODE\n const mockText =\n 'This is a simulated streaming response from the AI agent. ' +\n 'In a real implementation, this would stream data from your backend API. ' +\n 'The text appears word by word to simulate the streaming effect. ' +\n 'You can customize the typing speed and styling based on your needs.';\n\n await generateMockStreamingResponse(\n mockText,\n (chunk) => {\n setText((prev) => prev + chunk);\n onChunk?.(chunk);\n },\n typingSpeed\n );\n\n setIsComplete(true);\n setIsStreaming(false);\n onComplete?.(text + mockText);\n } else {\n // REAL API MODE\n let accumulatedText = '';\n\n await aptevaClient.chatStream(\n {\n agent_id: agentId,\n message: prompt,\n stream: true,\n },\n (chunk) => {\n if (chunk.type === 'token' && chunk.content) {\n accumulatedText += chunk.content;\n setText(accumulatedText);\n onChunk?.(chunk.content);\n }\n },\n () => {\n // On complete\n setIsComplete(true);\n setIsStreaming(false);\n onComplete?.(accumulatedText);\n },\n (error) => {\n // On error\n const err = error instanceof Error ? error : new Error('Streaming error');\n onError?.(err);\n setIsStreaming(false);\n }\n );\n }\n } catch (error) {\n const err = error instanceof Error ? error : new Error('Streaming error');\n onError?.(err);\n setIsStreaming(false);\n }\n };\n\n const variantClasses = {\n prose: 'prose prose-sm max-w-none dark:prose-invert',\n code: 'font-mono text-sm bg-neutral-900 text-green-400 p-4 rounded-lg',\n plain: 'text-neutral-900 dark:text-neutral-100',\n };\n\n if (!isStreaming && !isComplete) {\n return (\n <div className={cn('p-4', className)}>\n <button\n onClick={startStreaming}\n className=\"px-6 py-3 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium\"\n >\n Start Streaming\n </button>\n </div>\n );\n }\n\n return (\n <div className={cn(variantClasses[variant], className)}>\n {text}\n {isStreaming && showCursor && <span className=\"apteva-stream-cursor\" />}\n </div>\n );\n}\n","import { useState } from 'react';\nimport { Thread } from '../../types/messages';\nimport { ThreadItem } from './ThreadItem';\n\ninterface ThreadListProps {\n threads: Thread[];\n currentThreadId?: string;\n onThreadSelect?: (threadId: string) => void;\n onThreadDelete?: (threadId: string) => void;\n showSearch?: boolean;\n groupBy?: 'date' | 'agent' | 'none';\n}\n\nexport function ThreadList({\n threads,\n currentThreadId,\n onThreadSelect,\n onThreadDelete,\n showSearch = false,\n groupBy = 'none',\n}: ThreadListProps) {\n const [searchQuery, setSearchQuery] = useState('');\n\n const filteredThreads = threads.filter(\n (thread) =>\n thread.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n const groupedThreads = groupBy === 'date' ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };\n\n return (\n <div className=\"flex flex-col h-full\">\n {showSearch && (\n <div className=\"p-3 border-b border-neutral-200 dark:border-neutral-700\">\n <input\n type=\"text\"\n placeholder=\"Search conversations...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"w-full px-3 py-2 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white\"\n />\n </div>\n )}\n\n <div className=\"flex-1 overflow-y-auto\">\n {Object.entries(groupedThreads).map(([group, groupThreads]) => (\n <div key={group}>\n {groupBy !== 'none' && (\n <div className=\"px-3 py-2 text-xs font-semibold text-neutral-500 uppercase\">{group}</div>\n )}\n {groupThreads.map((thread) => (\n <ThreadItem\n key={thread.id}\n thread={thread}\n isActive={thread.id === currentThreadId}\n onSelect={() => onThreadSelect?.(thread.id)}\n onDelete={() => onThreadDelete?.(thread.id)}\n />\n ))}\n </div>\n ))}\n\n {filteredThreads.length === 0 && (\n <div className=\"p-8 text-center text-neutral-500\">\n <svg className=\"w-10 h-10 mx-auto mb-2 opacity-50\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\" />\n </svg>\n <p>No conversations found</p>\n </div>\n )}\n </div>\n </div>\n );\n}\n\nfunction groupThreadsByDate(threads: Thread[]): Record<string, Thread[]> {\n const now = new Date();\n const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n const yesterday = new Date(today);\n yesterday.setDate(yesterday.getDate() - 1);\n const lastWeek = new Date(today);\n lastWeek.setDate(lastWeek.getDate() - 7);\n\n return threads.reduce(\n (groups, thread) => {\n const threadDate = new Date(thread.updatedAt);\n let group = 'Older';\n\n if (threadDate >= today) {\n group = 'Today';\n } else if (threadDate >= yesterday) {\n group = 'Yesterday';\n } else if (threadDate >= lastWeek) {\n group = 'Last 7 Days';\n }\n\n if (!groups[group]) groups[group] = [];\n groups[group].push(thread);\n return groups;\n },\n {} as Record<string, Thread[]>\n );\n}\n","// No direct imports needed 'react';\nimport { Thread } from '../../types/messages';\nimport { cn } from '../../utils';\n\ninterface ThreadItemProps {\n thread: Thread;\n isActive?: boolean;\n onSelect?: () => void;\n onDelete?: () => void;\n}\n\nexport function ThreadItem({ thread, isActive = false, onSelect, onDelete }: ThreadItemProps) {\n return (\n <div\n className={cn('apteva-thread-item', {\n 'apteva-thread-item-active': isActive,\n })}\n onClick={onSelect}\n >\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"font-semibold text-neutral-900 dark:text-white truncate\">{thread.title}</h4>\n {thread.preview && <p className=\"text-sm text-neutral-600 dark:text-neutral-400 truncate\">{thread.preview}</p>}\n <div className=\"flex items-center gap-2 mt-1 text-xs text-neutral-500\">\n <span>{thread.messageCount} messages</span>\n <span>•</span>\n <span>{formatRelativeTime(thread.updatedAt)}</span>\n </div>\n </div>\n\n {onDelete && (\n <button\n onClick={(e) => {\n e.stopPropagation();\n onDelete();\n }}\n className=\"p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors\"\n title=\"Delete thread\"\n >\n 🗑️\n </button>\n )}\n </div>\n );\n}\n\nfunction formatRelativeTime(date: Date): string {\n const now = new Date();\n const diff = now.getTime() - date.getTime();\n const minutes = Math.floor(diff / 60000);\n const hours = Math.floor(diff / 3600000);\n const days = Math.floor(diff / 86400000);\n\n if (minutes < 1) return 'Just now';\n if (minutes < 60) return `${minutes}m ago`;\n if (hours < 24) return `${hours}h ago`;\n if (days < 7) return `${days}d ago`;\n return date.toLocaleDateString();\n}\n","// No direct imports needed 'react';\nimport { ThreadsProps } from '../../types/components';\nimport { ThreadList } from './ThreadList';\nimport { cn } from '../../utils';\n\nexport function Threads({\n threads,\n currentThreadId,\n onThreadSelect,\n onThreadDelete,\n onNewThread,\n variant = 'sidebar',\n showSearch = false,\n showNewButton = true,\n groupBy = 'none',\n className,\n}: ThreadsProps) {\n const variantClasses = {\n sidebar: 'h-full border-r border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900',\n dropdown: 'absolute top-full left-0 right-0 mt-2 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 max-h-96 overflow-hidden',\n tabs: 'flex gap-2 border-b border-neutral-200 dark:border-neutral-700 overflow-x-auto',\n };\n\n if (variant === 'tabs') {\n return (\n <div className={cn(variantClasses[variant], className)}>\n {threads.slice(0, 5).map((thread) => (\n <button\n key={thread.id}\n onClick={() => onThreadSelect?.(thread.id)}\n className={cn(\n 'px-4 py-2 whitespace-nowrap font-medium transition-colors',\n thread.id === currentThreadId\n ? 'border-b-2 border-apteva-500 text-apteva-500'\n : 'text-neutral-600 hover:text-neutral-900'\n )}\n >\n {thread.title}\n </button>\n ))}\n {showNewButton && onNewThread && (\n <button\n onClick={onNewThread}\n className=\"px-4 py-2 text-neutral-600 hover:text-apteva-500 transition-colors font-medium\"\n >\n + New\n </button>\n )}\n </div>\n );\n }\n\n return (\n <div className={cn(variantClasses[variant], 'flex flex-col', className)}>\n {showNewButton && onNewThread && (\n <div className=\"p-3 border-b border-neutral-200 dark:border-neutral-700\">\n <button\n onClick={onNewThread}\n className=\"w-full px-4 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium\"\n >\n + New Conversation\n </button>\n </div>\n )}\n\n <ThreadList\n threads={threads}\n currentThreadId={currentThreadId}\n onThreadSelect={onThreadSelect}\n onThreadDelete={onThreadDelete}\n showSearch={showSearch}\n groupBy={groupBy}\n />\n </div>\n );\n}\n","/**\n * Theme initialization script that runs before React hydration\n * This prevents flickering by setting the theme before the page renders\n * Must be inlined in the HTML <head> as a blocking script\n */\n\nexport const themeScript = `\n(function() {\n try {\n // Get system preference\n const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const colorMode = isDark ? 'dark' : 'light';\n\n // Set attributes before render\n document.documentElement.setAttribute('data-color-mode', colorMode);\n\n // Add dark class for Tailwind\n if (isDark) {\n document.documentElement.classList.add('dark');\n }\n } catch (e) {\n console.error('Failed to initialize theme:', e);\n }\n})();\n`;\n\nexport function getThemeScript() {\n return themeScript;\n}\n"]}