@admin-layout/tailwind-chat-pro 12.2.4-alpha.102

package/CHANGELOG.md

@@ -0,0 +1,77 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [12.2.4-alpha.102](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.101...v12.2.4-alpha.102) (2026-07-30)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.99](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.98...v12.2.4-alpha.99) (2026-07-24)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.98](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.97...v12.2.4-alpha.98) (2026-07-23)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.97](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.96...v12.2.4-alpha.97) (2026-07-23)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.90](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.89...v12.2.4-alpha.90) (2026-07-15)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.89](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.88...v12.2.4-alpha.89) (2026-07-15)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.88](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.87...v12.2.4-alpha.88) (2026-07-14)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.87](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.86...v12.2.4-alpha.87) (2026-07-13)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.86](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.85...v12.2.4-alpha.86) (2026-07-10)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.85](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.84...v12.2.4-alpha.85) (2026-07-01)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.82](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.81...v12.2.4-alpha.82) (2026-06-30)
+
+### Features
+
+- **tailwind-chat-pro:** bring the rich Modern message renderer in-package ([f30b75b](https://github.com/CDEBase/admin-layout/commit/f30b75b11782d6e63bef333b53e09c74acea51a3)), closes [#1652](https://github.com/CDEBase/admin-layout/issues/1652)
+
+## [12.2.4-alpha.81](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.80...v12.2.4-alpha.81) (2026-06-29)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.80](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.79...v12.2.4-alpha.80) (2026-06-29)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.79](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.78...v12.2.4-alpha.79) (2026-06-29)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.76](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.75...v12.2.4-alpha.76) (2026-06-27)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.75](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.74...v12.2.4-alpha.75) (2026-06-27)
+
+**Note:** Version bump only for package @admin-layout/tailwind-chat-pro
+
+## [12.2.4-alpha.74](https://github.com/CDEBase/admin-layout/compare/v12.2.4-alpha.73...v12.2.4-alpha.74) (2026-06-27)
+
+### Features
+
+- **tailwind-chat-pro:** customizable base MessagesContainerUI ([a4bc1b3](https://github.com/CDEBase/admin-layout/commit/a4bc1b38152d27adbb6ece4a50c70b8a6829b5c9))
+- **tailwind-chat-pro:** default input toolbar to @admin-layout/tailwind-ui InputToolBar ([b9e9ab8](https://github.com/CDEBase/admin-layout/commit/b9e9ab846786d0f370db9ca98c0c16aa1a201d13))

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2017 CDMBase LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './messages-container-ui';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib/components/messages-container-ui/DefaultInputToolBar.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { PlanModeViewInputToolbarProps } from './types';
+export interface DefaultInputToolBarProps extends PlanModeViewInputToolbarProps {
+    placeholder?: string;
+    /** When true, the send button shows a stop affordance (wired to onStop). */
+    isLoading?: boolean;
+    onStop?: () => void;
+    className?: string;
+}
+/**
+ * DefaultInputToolBar — the input composer used when no `renderInputToolbar` is
+ * provided. It wraps `@admin-layout/tailwind-ui`'s `InputToolBar` (the shared
+ * "ai-tool-box") wired to the base's toolbar props: a built-in textarea
+ * (Enter sends, Shift+Enter newlines) plus the mic/send/stop button.
+ *
+ * Consumers that need the richer composer (mode switcher, templates, attachments,
+ * project settings, …) pass their own `renderInputToolbar` instead.
+ */
+export declare const DefaultInputToolBar: React.FC<DefaultInputToolBarProps>;
+export default DefaultInputToolBar;
+//# sourceMappingURL=DefaultInputToolBar.d.ts.map

package/lib/components/messages-container-ui/DefaultInputToolBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultInputToolBar.d.ts","sourceRoot":"","sources":["../../../src/components/messages-container-ui/DefaultInputToolBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,wBAAyB,SAAQ,6BAA6B;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuClE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/messages-container-ui/DefaultInputToolBar.js

@@ -0,0 +1,46 @@
+import {jsx}from'react/jsx-runtime';import {InputToolBar}from'@admin-layout/tailwind-ui';/**
+ * DefaultInputToolBar — the input composer used when no `renderInputToolbar` is
+ * provided. It wraps `@admin-layout/tailwind-ui`'s `InputToolBar` (the shared
+ * "ai-tool-box") wired to the base's toolbar props: a built-in textarea
+ * (Enter sends, Shift+Enter newlines) plus the mic/send/stop button.
+ *
+ * Consumers that need the richer composer (mode switcher, templates, attachments,
+ * project settings, …) pass their own `renderInputToolbar` instead.
+ */
+const DefaultInputToolBar = ({
+  value,
+  onChange,
+  onSend,
+  disabled = false,
+  placeholder = 'Message',
+  isLoading = false,
+  onStop,
+  className
+}) => {
+  const hasContent = value.trim().length > 0;
+  return jsx(InputToolBar, {
+    className: className,
+    inputConfig: {
+      value,
+      onChange: e => onChange(e.target.value),
+      placeholder,
+      disabled,
+      onKeyDown: e => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          if (hasContent && !disabled && !isLoading) onSend();
+        }
+      }
+    },
+    micSendButton: {
+      hasContent,
+      onSend,
+      onMic: () => {
+        /* voice input not wired in the base default */
+      },
+      disabled,
+      isLoading,
+      onStop: isLoading ? onStop : undefined
+    }
+  });
+};export{DefaultInputToolBar};//# sourceMappingURL=DefaultInputToolBar.js.map

package/lib/components/messages-container-ui/DefaultInputToolBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultInputToolBar.js","sources":["../../../src/components/messages-container-ui/DefaultInputToolBar.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"yFAYA;;;;;;;;AAQG;AACI,MAAM,mBAAmB,GAAuC,CAAC;OAUpE;UAEA;;AAKY,EAAA,QAAA,GAAA,KAAA;aACA,GAAA,SAAW;cACX,KAAA;AACA,EAAA,MAAA;;;AAGQ,EAAA,MAAA,UAAA,GAAA,aAAc,MAAK,GAAA,CAAA;AAAwB,EAAA,OAAAA,GAAA,CAAA,YAAA,EAAA;wBAC9C;eACJ,EAAA;AACJ,MAAA,KACD;cACI,EAAA,CAAA,IAAA,QAAU,CAAA,CAAA,CAAA,MAAA,CAAA,KAAA,CAAA;iBACV;cACA;iBACI,CAAA,IAAA;YACJ,CAAC,CAAA,GAAA,KAAA,OAAA,IAAA,CAAA,CAAA,CAAA,QAAA,EAAA;YACD,cAAQ,EAAA;cACR,UAAS,IAAA,CAAA,QAAA,IAAA,CAAA,SAAA,EAAA,MAAA,EAAA;;AAEZ,MAAA;AAGb,KAAE;AAEF,IAAA;;;;;;;;;;;"}

package/lib/components/messages-container-ui/DefaultMessageGroup.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { MessageGroupRenderProps } from './types';
+/**
+ * DefaultMessageGroup — the base renderer used when no `MessageGroupComponent`
+ * is injected. Renders the post's text in a left/right aligned bubble with an
+ * optional author name, avatar and timestamp. Whitespace is preserved so
+ * plain-text replies read naturally.
+ *
+ * Consumers that need rich rendering (markdown, code blocks, media/travel/
+ * workflow widget cards, …) inject their own component via
+ * `MessagesContainerUI`'s `MessageGroupComponent` prop — e.g. messenger-box's
+ * `ModernMessageGroupComponent`.
+ */
+export declare const DefaultMessageGroup: React.FC<MessageGroupRenderProps>;
+export default DefaultMessageGroup;
+//# sourceMappingURL=DefaultMessageGroup.d.ts.map

package/lib/components/messages-container-ui/DefaultMessageGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultMessageGroup.d.ts","sourceRoot":"","sources":["../../../src/components/messages-container-ui/DefaultMessageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAMvD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqDjE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/messages-container-ui/DefaultMessageGroup.js

@@ -0,0 +1,64 @@
+import {jsx,jsxs}from'react/jsx-runtime';import clsx from'clsx';const ASSISTANT_BUBBLE_BG = 'bg-card';
+const USER_BUBBLE_BG = 'bg-indigo-50';
+const BORDER_COLOR = 'border-border';
+/**
+ * DefaultMessageGroup — the base renderer used when no `MessageGroupComponent`
+ * is injected. Renders the post's text in a left/right aligned bubble with an
+ * optional author name, avatar and timestamp. Whitespace is preserved so
+ * plain-text replies read naturally.
+ *
+ * Consumers that need rich rendering (markdown, code blocks, media/travel/
+ * workflow widget cards, …) inject their own component via
+ * `MessagesContainerUI`'s `MessageGroupComponent` prop — e.g. messenger-box's
+ * `ModernMessageGroupComponent`.
+ */
+const DefaultMessageGroup = ({
+  messages,
+  onMessageClick,
+  showAuthorName = false,
+  showAvatar = false,
+  showTimestamp = false
+}) => {
+  const post = messages?.[0];
+  if (!post) return null;
+  const role = post?.propsConfiguration?.contents?.role;
+  const isUser = role === 'USER' || role === 'user' || post?.author?.isCurrentUser === true;
+  const text = typeof post?.message === 'string' ? post.message : '';
+  const author = post?.author ?? {};
+  const name = author.fullName || author.givenName || author.username || (isUser ? 'You' : 'Assistant');
+  const picture = author.picture ?? null;
+  const created = post?.createdAt ? new Date(post.createdAt) : null;
+  const timeLabel = created && !Number.isNaN(created.getTime()) ? created.toLocaleTimeString() : '';
+  return jsx("div", {
+    className: clsx('flex w-full', isUser ? 'justify-end' : 'justify-start'),
+    children: jsxs("div", {
+      className: clsx('flex max-w-[85%] gap-2', isUser ? 'flex-row-reverse' : 'flex-row'),
+      children: [showAvatar && jsx("div", {
+        className: "flex-shrink-0",
+        children: picture ?
+        // eslint-disable-next-line @next/next/no-img-element
+        jsx("img", {
+          src: picture,
+          alt: name,
+          className: "w-7 h-7 rounded-full object-cover"
+        }) : jsx("div", {
+          className: "w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs font-medium text-gray-600",
+          children: name.charAt(0).toUpperCase()
+        })
+      }), jsxs("div", {
+        className: clsx('min-w-0', isUser ? 'text-right' : 'text-left'),
+        children: [showAuthorName && jsx("div", {
+          className: "mb-0.5 text-xs font-medium text-gray-500",
+          children: name
+        }), jsx("div", {
+          onClick: onMessageClick ? () => onMessageClick(post) : undefined,
+          className: clsx('inline-block rounded-2xl px-4 py-2.5 text-[15px] leading-relaxed text-foreground', 'whitespace-pre-wrap break-words border', BORDER_COLOR, isUser ? USER_BUBBLE_BG : ASSISTANT_BUBBLE_BG, onMessageClick && 'cursor-pointer'),
+          children: text
+        }), showTimestamp && timeLabel && jsx("div", {
+          className: "mt-0.5 text-[11px] text-gray-400",
+          children: timeLabel
+        })]
+      })]
+    })
+  });
+};export{DefaultMessageGroup};//# sourceMappingURL=DefaultMessageGroup.js.map

package/lib/components/messages-container-ui/DefaultMessageGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultMessageGroup.js","sources":["../../../src/components/messages-container-ui/DefaultMessageGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":"gEAIA,MAAM,mBAAmB,GAAG,SAAS;AACrC,MAAM,cAAc,GAAG,cAAc;AACrC,MAAM,YAAY,GAAG,eAAe;AAEpC;;;;;;;;;;AAUG;MACU,mBAAmB,GAAsC,CAAC;AAOnE,EAAA,QAAM;AACN,EAAA,cAAS;AAAE,EAAA,iBAAW,KAAC;YAEjB,QAAO;AACb,EAAA,gBAAY;AACZ,CAAA,KAAA;AACA,EAAA,MAAA,eAAmB,GAAE,CAAA,CAAA;MACrB,CAAA,IAAM,EAAA,OAAe,IAAO;AAC5B,EAAA,MAAA,WAAa,EAAkB,4BAAuB,EAAA,IAAA;AACtD,EAAA,MAAA,SAAa,IAAG,KAAM,MAAA,IAAU,IAAE,WAAa,IAAC,IAAA,EAAS,QAAQ,aAAC,KAAA,IAAA;QAClE,IAAM,GAAA,OAAY,IAAA,EAAA,YAAkB,QAAO,GAAA,IAAQ,CAAA,UAAW,EAAE;QAEhE,qBACS,IAAA,EAAS;qBAKM,CAAA,QAAA,IAAA,MAAA,CAAA,SAAA,IAAA,MAAA,CAAA,QAAA,KAAqD,MAAA,GAAA,KAAA,GAAA,WAAA,CAAA;AACrD,EAAA,MAAA,OAAA,GAAA,MAAA,CAAA,OAAA,IAAK,IAAK;AA2BtC,EAAE,MAAA,OAAA,GAAA,IAAA,EAAA,SAAA,GAAA,IAAA,IAAA,CAAA,IAAA,CAAA,SAAA,CAAA,GAAA,IAAA;AAEF,EAAA,MAAA,8BAAmC,CAAA,KAAA,CAAA,OAAA,CAAA,OAAA,EAAA,CAAA,GAAA,OAAA,CAAA,kBAAA,EAAA,GAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/messages-container-ui/ErrorFixCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ErrorFixCardProps {
+    error: any;
+    onFixError: (errorMessage: string) => Promise<void>;
+    currentFiles?: Record<string, string>;
+    isFixing?: boolean;
+}
+export declare const ErrorFixCard: React.FC<ErrorFixCardProps>;
+export default ErrorFixCard;
+//# sourceMappingURL=ErrorFixCard.d.ts.map

package/lib/components/messages-container-ui/ErrorFixCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorFixCard.d.ts","sourceRoot":"","sources":["../../../src/components/messages-container-ui/ErrorFixCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkExC,UAAU,iBAAiB;IACvB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmKpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/messages-container-ui/ErrorFixCard.js

@@ -0,0 +1,219 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {useState}from'react';const IconAlertTriangle = props => jsxs("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  ...props,
+  children: [jsx("path", {
+    d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+  }), jsx("line", {
+    x1: "12",
+    y1: "9",
+    x2: "12",
+    y2: "13"
+  }), jsx("line", {
+    x1: "12",
+    y1: "17",
+    x2: "12.01",
+    y2: "17"
+  })]
+});
+const IconRefreshCw = props => jsxs("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  ...props,
+  children: [jsx("polyline", {
+    points: "23 4 23 10 17 10"
+  }), jsx("polyline", {
+    points: "1 20 1 14 7 14"
+  }), jsx("path", {
+    d: "M3.51 9a9 9 0 0114.13-3.36L23 10"
+  }), jsx("path", {
+    d: "M20.49 15a9 9 0 01-14.13 3.36L1 14"
+  })]
+});
+const IconCode = props => jsxs("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  ...props,
+  children: [jsx("polyline", {
+    points: "16 18 22 12 16 6"
+  }), jsx("polyline", {
+    points: "8 6 2 12 8 18"
+  })]
+});
+const IconExternalLink = props => jsxs("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  ...props,
+  children: [jsx("path", {
+    d: "M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+  }), jsx("polyline", {
+    points: "15 3 21 3 21 9"
+  }), jsx("line", {
+    x1: "10",
+    y1: "14",
+    x2: "21",
+    y2: "3"
+  })]
+});
+const ErrorFixCard = ({
+  error,
+  onFixError,
+  currentFiles,
+  isFixing = false
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isFixingError, setIsFixingError] = useState(false);
+  const handleFixError = async () => {
+    setIsFixingError(true);
+    try {
+      const errorContext = `
+ERROR DETECTED IN SANDBOX:
+
+Error Type: ${error.errorType}
+Timestamp: ${error.timestamp}
+Sandbox ID: ${error.sandboxId}
+
+Error Message:
+${error.message}
+
+${error.stack ? `Stack Trace:\n${error.stack}` : ''}
+
+${currentFiles && Object.keys(currentFiles).length > 0 ? `
+Current Files in Project:
+${Object.entries(currentFiles).map(([path, content]) => `
+--- ${path} ---
+${content}
+`).join('\n')}
+` : ''}
+
+Please analyze this error and fix the code. Make sure to:
+1. Identify the root cause of the error
+2. Update the necessary files to resolve the issue
+3. Ensure the fix maintains the existing functionality
+4. Test that the solution compiles and runs correctly
+`.trim();
+      await onFixError(errorContext);
+    } catch (error) {
+      console.error('Failed to trigger error fix:', error);
+    } finally {
+      setIsFixingError(false);
+    }
+  };
+  const getErrorTypeColor = errorType => {
+    switch (errorType) {
+      case 'COMPILATION_ERROR':
+        return 'text-red-600 bg-red-50 border-red-200';
+      case 'RUNTIME_ERROR':
+        return 'text-orange-600 bg-orange-50 border-orange-200';
+      case 'DEPENDENCY_ERROR':
+        return 'text-yellow-600 bg-yellow-50 border-yellow-200';
+      case 'SERVER_START_ERROR':
+        return 'text-purple-600 bg-purple-50 border-purple-200';
+      case 'SANDBOX_DISCONNECTED':
+        return 'text-gray-600 bg-gray-50 border-gray-200';
+      case 'TEST_ERROR':
+        return 'text-blue-600 bg-blue-50 border-blue-200';
+      default:
+        return 'text-red-600 bg-red-50 border-red-200';
+    }
+  };
+  const formatErrorType = errorType => {
+    return errorType.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
+  };
+  return jsx("div", {
+    className: "flex w-full justify-start mb-2",
+    children: jsxs("div", {
+      className: `rounded-lg p-2 border w-fit max-w-[75%] min-w-0 break-all overflow-hidden ${getErrorTypeColor(error.errorType)}`,
+      children: [jsx("div", {
+        className: "flex items-start justify-between mb-1",
+        children: jsxs("div", {
+          className: "flex items-center space-x-1",
+          children: [jsx(IconAlertTriangle, {
+            className: "w-3 h-3 text-red-600 flex-shrink-0"
+          }), jsx("span", {
+            className: "font-semibold text-xs",
+            children: formatErrorType(error.errorType)
+          }), jsx("span", {
+            className: "text-xs opacity-60",
+            children: new Date(error.timestamp).toLocaleTimeString()
+          }), error.url && jsxs("a", {
+            href: error.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-xs hover:underline flex items-center space-x-1",
+            children: [jsx(IconExternalLink, {
+              className: "w-3 h-3"
+            }), jsx("span", {
+              children: "View Sandbox"
+            })]
+          })]
+        })
+      }), jsxs("div", {
+        className: "text-sm mb-3",
+        children: [jsx("div", {
+          className: "break-words whitespace-pre-wrap font-mono text-xs leading-relaxed overflow-hidden",
+          style: {
+            display: '-webkit-box',
+            WebkitLineClamp: isExpanded ? 'none' : 3,
+            WebkitBoxOrient: 'vertical',
+            maxHeight: isExpanded ? 'none' : '3.6em'
+          },
+          children: error.message
+        }), error.message.length > 150 && jsx("button", {
+          onClick: () => setIsExpanded(!isExpanded),
+          className: "text-xs hover:underline mt-1 font-sans",
+          children: isExpanded ? 'Show less' : 'Show more'
+        })]
+      }), isExpanded && error.stack && jsxs("div", {
+        className: "mt-3 p-3 bg-black bg-opacity-10 rounded text-xs font-mono",
+        children: [jsxs("div", {
+          className: "flex items-center space-x-2 mb-2",
+          children: [jsx(IconCode, {
+            className: "w-3 h-3"
+          }), jsx("span", {
+            className: "font-semibold",
+            children: "Stack Trace"
+          })]
+        }), jsx("pre", {
+          className: "whitespace-pre-wrap text-xs break-all",
+          children: error.stack
+        })]
+      }), error.fixable && jsx("div", {
+        className: "mt-4 flex justify-start",
+        children: jsxs("button", {
+          onClick: handleFixError,
+          disabled: isFixingError || isFixing,
+          className: `
+                  flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium
+                  transition-colors duration-200
+                  ${isFixingError || isFixing ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-red-600 text-white hover:bg-red-700 shadow-sm hover:shadow-md'}
+                `,
+          children: [jsx(IconRefreshCw, {
+            className: `w-4 h-4 ${isFixingError || isFixing ? 'animate-spin' : ''}`
+          }), jsx("span", {
+            children: isFixingError || isFixing ? 'Fixing...' : 'Fix Error'
+          })]
+        })
+      }), !error.fixable && jsx("div", {
+        className: "mt-3 text-xs opacity-75",
+        children: "This error may require manual intervention or environment changes."
+      })]
+    })
+  });
+};export{ErrorFixCard};//# sourceMappingURL=ErrorFixCard.js.map

package/lib/components/messages-container-ui/ErrorFixCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorFixCard.js","sources":["../../../src/components/messages-container-ui/ErrorFixCard.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"sEAEA,MAAM,iBAAiB,GAA4C,KAAC,QAChE,CAAA,KAAA,EAAA;AAeJ,EAAA,OAAM,EAAA,WAAyD;AAiB/D,EAAA,IAAM,EAAA,MAAQ;AAed,EAAA,MAAM,EAAA,cAAgB;AAuBtB,EAAA,WAAa,EAAA,GAAA;eACF,EAAA,OAAY;gBACZ,EAAA,OAAa;AAEpB,EAAA,GAAA,KAAM;UACF,EAAA,CAAAA,GAAA,CAAA,MAAgB,EAAC;AACjB,IAAA,CAAA,EAAA;AACI,GAAA,CAAA,EAAAA,GAAA,CAAA,MAAA;;;AAGE,IAAA,EAAA,EAAA,IAAA;AACD,IAAA,EAAA,EAAA;AACC,GAAA,CAAA,EAAAA,GAAA,CAAA,MAAA,EAAK;;;AAGjB,IAAA,EAAA,EAAM,OAAO;;AAEb,GAAA,CAAA;;MAGE,aAAgB,GAAA,KAAO,cAAiB,EAAE;AACtC,EAAA,OAAA,EAAA,WAAE;;AAER,EAAA,MAAM,EAAC,cAAQ;;eAGP,EAAA,OAAA;EACR,cAAO,EAAA,OAAA;EAEJ,GAAA,KAAA;6BACS;AACb,IAAA,MAAA,EAAA;AACO,GAAA,CAAA,EAAAA,GAAA,CAAA,UACR,EAAA;;;;;;;CAOC,CAAC;AAEU,MAAA,QAAA,GAAA,KAAM,IAAAC,IAAW,CAAA,KAAA,EAAA;SACpB,EAAA,WAAA;QAAC,MAAA;AACE,EAAA,MAAA,EAAA,cAAQ;aACX,EAAA,GAAA;iBAAU,OAAA;gBACP,EAAA,OAAA;UACH;AACL,EAAA,QAAE,EAAA,CAAAD,GAAA,CAAA,UAAA,EAAA;AAEF,IAAA,MAAM,EAAA;SACF,CAAA,UAAQ,EAAA;AACJ,IAAA,MAAA,EAAA;AACI,GAAA,CAAA;AACJ,CAAA,CAAA;AACI,MAAA,gBAAA;AACJ,EAAA,OAAA,EAAA,WAAK;AACD,EAAA,IAAA,EAAA,MAAA;AACJ,EAAA,MAAA,EAAA,cAAK;AACD,EAAA,WAAA,EAAA,GAAA;AACJ,EAAA,aAAA,EAAK,OAAA;AACD,EAAA,cAAA,EAAA;AACJ,EAAA,GAAA,KAAA;AACI,EAAA,QAAA,EAAA,CAAAA,GAAA,CAAA;AACJ,IAAA,CAAA,EAAA;AACI,GAAA,CAAA,EAAAA,GAAA,CAAA,UAAA,EAAO;UACd,EAAA;AACL,GAAA,CAAA,EAAEA,GAAA,CAAA,MAAA,EAAA;AAEF,IAAA,EAAA,EAAA,IAAM;AACF,IAAA,EAAA,EAAA,IAAA;AACK,IAAA,EAAA,EAAA,IAAA;AACA,IAAA,EAAA,EAAA;AACA,GAAA,CAAA;AACT,CAAA,CAAA;AAGI,MAAA,YAAA,GAAK,CAAA;AA6Be,EAAA,KAAA;;AAEA,EAAA,YAAA;;;;;AAmCN,EAAA,MAAA,cAAA,GAAA,YAAiB;AACb,IAAA,gBAAA,CAAA,IAAA,CAAA;AACA,IAAA,IAAA;wBAET,GAAA;AAgBjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/messages-container-ui/FilesList.d.ts

@@ -0,0 +1,19 @@
+interface FilesListProps {
+    files: any[];
+    uploaded?: boolean;
+    FileElementProps?: Omit<FileElementProps, 'file' | 'uploaded' | 'onRemove'>;
+    onRemove?: () => Promise<void>;
+}
+interface FileElementProps {
+    file: any;
+    uploaded: boolean;
+    width?: number;
+    height?: number;
+    onRemove?: () => Promise<void>;
+}
+export declare function FilesList({ files, uploaded }: FilesListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FilesList {
+    var FileElement: ({ file, uploaded, width, height }: FileElementProps) => import("react/jsx-runtime").JSX.Element;
+}
+export {};
+//# sourceMappingURL=FilesList.d.ts.map

package/lib/components/messages-container-ui/FilesList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilesList.d.ts","sourceRoot":"","sources":["../../../src/components/messages-container-ui/FilesList.tsx"],"names":[],"mappings":"AAGA,UAAU,cAAc;IACpB,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;IAC5E,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC;AAED,UAAU,gBAAgB;IACtB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAgB,EAAE,EAAE,cAAc,2CAQpE;yBARe,SAAS;yDAU+C,gBAAgB"}

package/lib/components/messages-container-ui/FilesList.js

@@ -0,0 +1,75 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useMemo}from'react';import {useFileUrlQuery}from'common/graphql';function FilesList({
+  files,
+  uploaded = false
+}) {
+  return jsx("div", {
+    className: "flex flex-row",
+    children: files.map((file, index) => jsx(FilesList.FileElement, {
+      uploaded: uploaded,
+      file: file
+    }, `${index}`))
+  });
+}
+FilesList.FileElement = ({
+  file,
+  uploaded,
+  width = 120,
+  height = 120
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const src = useMemo(() => uploaded ? file.url : URL.createObjectURL(file), [file, uploaded]);
+  const {
+    data
+  } = useFileUrlQuery({
+    variables: {
+      id: file?.id
+    },
+    skip: !file?.id
+  });
+  const onOpen = () => setIsOpen(true);
+  const onClose = () => setIsOpen(false);
+  return jsxs(Fragment, {
+    children: [jsx("img", {
+      className: "cursor-pointer m-2 object-cover rounded",
+      style: {
+        height: `${height}px`,
+        width: `${width}px`
+      },
+      src: src,
+      onClick: onOpen,
+      alt: "File preview"
+    }), isOpen && jsxs("div", {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+      children: [jsx("div", {
+        className: "fixed inset-0 bg-black bg-opacity-75",
+        onClick: onClose
+      }), jsxs("div", {
+        className: "relative bg-white rounded-lg shadow-xl max-w-4xl max-h-[90vh] overflow-hidden",
+        children: [jsx("button", {
+          onClick: onClose,
+          className: "absolute top-4 right-4 z-10 p-2 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 transition-all duration-200",
+          children: jsx("svg", {
+            className: "w-6 h-6 text-white",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          })
+        }), jsx("div", {
+          className: "p-4 flex items-center justify-center",
+          children: jsx("img", {
+            src: data?.fileInfo?.url || src,
+            alt: "File full view",
+            className: "max-w-full max-h-[80vh] object-contain cursor-pointer",
+            onClick: onClose
+          })
+        })]
+      })]
+    })]
+  });
+};export{FilesList};//# sourceMappingURL=FilesList.js.map

package/lib/components/messages-container-ui/FilesList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilesList.js","sources":["../../../src/components/messages-container-ui/FilesList.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"oIAkBM,SAAU,SAAS,CAAC;AACtB,EAAA,KAAA;AAOJ,EAAC,QAAA,GAAA;AAED,CAAA,EAAA;SACIA,GAAO,CAAA,KAAQ,EAAA;AACf,IAAA,SAAS,EAAA,eAAiB;AAC1B,IAAA,QAAQ,EAAA,KAAM,CAAA,gBAAkB,KAACA,GAAA,CAAA,SAAA,CAAA,WAAA,EAAA;AAC7B,MAAA,QAAA,EAAA,QAAW;YACP;AACH,KAAA,EAAA,CAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACD,GAAA,CAAA;AACH;SAED,CAAM,WAAS,GAAK,CAAC;MACrB;AAEA,EAAA,QAAA;AA+CJ,EAAE,KAAA,GAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}