@inkeep/agents-manage-ui 0.0.0-dev-20251017201015 → 0.0.0-dev-20251018033935

package/src/components/data-components/preview/component-preview-generator.tsx

@@ -8,7 +8,10 @@ import { CodeEditor } from '@/components/form/code-editor';
 import { JsonEditor } from '@/components/form/json-editor';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
 import { updateDataComponent } from '@/lib/api/data-components';
 import { DynamicComponentRenderer } from './dynamic-component-renderer';
 
@@ -35,8 +38,10 @@ export function ComponentPreviewGenerator({
   const [streamingCode, setStreamingCode] = useState<string>('');
   const [isComplete, setIsComplete] = useState(!!existingPreview);
   const [isSaved, setIsSaved] = useState(!!existingPreview);
+  const [regenerateInstructions, setRegenerateInstructions] = useState('');
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const generatePreview = async () => {
+  const generatePreview = async (instructions?: string) => {
     setIsGenerating(true);
     setPreview(null);
     setStreamingCode('');
@@ -49,7 +54,12 @@ export function ComponentPreviewGenerator({
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ tenantId, projectId }),
+        body: JSON.stringify({
+          tenantId,
+          projectId,
+          instructions: instructions || undefined,
+          existingCode: instructions ? preview?.code : undefined,
+        }),
       });
 
       if (!response.ok) {
@@ -163,7 +173,7 @@ export function ComponentPreviewGenerator({
         </div>
         <div className="flex gap-2">
           {!hasPreview && (
-            <Button onClick={generatePreview} disabled={isGenerating} className="gap-2">
+            <Button onClick={() => generatePreview()} disabled={isGenerating} className="gap-2">
               {isGenerating ? (
                 <>
                   <Loader2 className="h-4 w-4 animate-spin" />
@@ -179,24 +189,64 @@ export function ComponentPreviewGenerator({
           )}
           {hasPreview && (
             <>
-              <Button
-                variant="outline"
-                onClick={generatePreview}
-                disabled={isDeleting || isGenerating}
-                className="gap-2"
-              >
-                {isGenerating ? (
-                  <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    Regenerating...
-                  </>
-                ) : (
-                  <>
-                    <RefreshCw className="h-4 w-4" />
-                    Regenerate
-                  </>
-                )}
-              </Button>
+              <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" disabled={isDeleting || isGenerating} className="gap-2">
+                    {isGenerating ? (
+                      <>
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        Regenerating...
+                      </>
+                    ) : (
+                      <>
+                        <RefreshCw className="h-4 w-4" />
+                        Regenerate
+                      </>
+                    )}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-96">
+                  <div className="space-y-4">
+                    <div>
+                      <h4 className="font-medium text-sm mb-2">Modify Component</h4>
+                      <Label htmlFor="instructions" className="text-xs text-muted-foreground">
+                        Describe what you'd like to change (optional)
+                      </Label>
+                      <Textarea
+                        id="instructions"
+                        placeholder="e.g. Make it more compact, add a border, use different icons..."
+                        value={regenerateInstructions}
+                        onChange={(e) => setRegenerateInstructions(e.target.value)}
+                        className="mt-2 min-h-[100px]"
+                      />
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        onClick={async () => {
+                          setIsPopoverOpen(false);
+                          await generatePreview(regenerateInstructions || undefined);
+                          setRegenerateInstructions('');
+                        }}
+                        disabled={isGenerating}
+                        className="flex-1"
+                      >
+                        {regenerateInstructions ? 'Apply Changes' : 'Regenerate'}
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => {
+                          setIsPopoverOpen(false);
+                          setRegenerateInstructions('');
+                        }}
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
               {isSaved && (
                 <Button
                   variant="destructive"
@@ -255,10 +305,15 @@ export function ComponentPreviewGenerator({
                 onPreviewChanged?.(updatedPreview);
               }}
               language="jsx"
+              className="max-h-[500px]"
             />
           </TabsContent>
           <TabsContent value="data">
-            <JsonEditor value={stringifiedData} onChange={handleDataChange} />
+            <JsonEditor
+              value={stringifiedData}
+              onChange={handleDataChange}
+              className="max-h-[500px]"
+            />
           </TabsContent>
         </Tabs>
       )}

package/src/components/data-components/preview/dynamic-component-renderer.tsx

@@ -2,8 +2,9 @@
 
 import * as LucideIcons from 'lucide-react';
 import { useMemo } from 'react';
+import * as ErrorBoundary from 'react-error-boundary';
 import { useRunner } from 'react-runner';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 const { AlertCircle } = LucideIcons;
 
@@ -12,6 +13,7 @@ interface DynamicComponentRendererProps {
   props: Record<string, unknown>;
 }
 
+const js = String.raw;
 const transformCode = (code: string, props: Record<string, unknown>) => {
   // Extract component name from code using regex, handling both function and arrow function syntax
   const componentNameMatch = code.match(
@@ -19,41 +21,56 @@ const transformCode = (code: string, props: Record<string, unknown>) => {
   );
   const componentName = componentNameMatch?.[1] || componentNameMatch?.[2] || 'App';
 
-  return `
+  return js`
+  import { ErrorBoundary } from "react-error-boundary";
+
   ${code}
+
   export default function App() {
     const props = ${JSON.stringify(props)};
-    return <${componentName} {...props} />;
+    return (
+      <ErrorBoundary fallbackRender={fallbackRender}>
+        <${componentName} {...props} />
+      </ErrorBoundary>
+    );
   }`;
 };
 
+function fallbackRender({ error }: { error: Error }) {
+  // Parse error to get better formatting
+  const errorString = String(error);
+  const errorLines = errorString.split('\n');
+  const errorMessage = errorLines[0] || errorString;
+  const errorStack = errorLines.slice(1).join('\n');
+
+  return (
+    <Alert variant="destructive" className="max-w-full">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle className="font-semibold text-sm">{errorStack}</AlertTitle>
+      <AlertDescription className="mt-2 space-y-2">
+        <div className="font-mono text-xs break-words">{errorMessage}</div>
+      </AlertDescription>
+    </Alert>
+  );
+}
+
 export function DynamicComponentRenderer({ code, props }: DynamicComponentRendererProps) {
   const transformedCode = useMemo(() => transformCode(code, props), [code, props]);
   const scope = useMemo(
     () => ({
-      props,
+      fallbackRender,
       import: {
         'lucide-react': LucideIcons,
+        'react-error-boundary': ErrorBoundary,
       },
     }),
-    [props]
+    []
   );
 
-  const { element, error } = useRunner({
+  const { element } = useRunner({
     code: transformedCode,
     scope,
   });
 
-  if (error) {
-    return (
-      <Alert variant="destructive">
-        <AlertCircle className="h-4 w-4" />
-        <AlertDescription className="font-mono text-xs">
-          Error rendering component: {error}
-        </AlertDescription>
-      </Alert>
-    );
-  }
-
   return <div>{element}</div>;
 }

package/src/components/traces/timeline/render-panel-content.tsx

@@ -1,4 +1,6 @@
 import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import { Streamdown } from 'streamdown';
 import { formatDateTime } from '@/app/utils/format-date';
 import { SignozSpanLink } from '@/components/traces/signoz-link';
 import {
@@ -13,6 +15,7 @@ import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
 import { SpanAttributes } from '@/components/traces/timeline/span-attributes';
 import type { ConversationDetail, SelectedPanel } from '@/components/traces/timeline/types';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 
 const JsonEditorWithCopy = dynamic(
   () =>
@@ -30,6 +33,33 @@ function formatJsonSafely(content: string): string {
   }
 }
 
+function AssistantMessageContent({ content }: { content: string }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  
+  return (
+    <LabeledBlock label="AI response content">
+      <div className="relative">
+        <Bubble className={`break-words ${isExpanded ? '' : 'max-h-48 overflow-hidden'}`}>
+          <Streamdown>
+            {content}
+          </Streamdown>
+        </Bubble>
+        {!isExpanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white dark:from-gray-900 to-transparent pointer-events-none" />
+        )}
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="mt-2 w-full text-xs"
+      >
+        {isExpanded ? 'Show less' : 'Show more'}
+      </Button>
+    </LabeledBlock>
+  );
+}
+
 export function renderPanelContent({
   selected,
   findSpanById,
@@ -131,6 +161,16 @@ export function renderPanelContent({
       return (
         <>
           <Section>
+            <Info
+              label="Sub agent"
+              value={
+                a.subAgentId ? (
+                  <Badge variant="code">{a.subAgentId}</Badge>
+                ) : (
+                  'Unknown'
+                )
+              }
+            />
             {a.hasError && a.otelStatusDescription && (
               <LabeledBlock label="Error">
                 <Bubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
@@ -171,12 +211,9 @@ export function renderPanelContent({
       return (
         <>
           <Section>
-            <LabeledBlock label="AI response content">
-              <Bubble className=" whitespace-pre-wrap break-words">
-                {a.aiResponseContent || 'Response content not available'}
-              </Bubble>
-            </LabeledBlock>
             <Info label="Sub agent" value={a.subAgentName || 'Unknown'} />
+            <AssistantMessageContent content={a.aiResponseContent || 'Response content not available'} />
+            
             <StatusBadge status={a.status} />
             <Info label="Activity timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
@@ -404,10 +441,13 @@ export function renderPanelContent({
         <>
           <Section>
             <Info label="Model" value={<ModelBadge model={a.aiStreamTextModel || 'Unknown'} />} />
-            <Info
-              label="Operation id"
-              value={<Badge variant="code">{a.aiStreamTextOperationId || 'Unknown'}</Badge>}
-            />
+
+            {a.aiTelemetryFunctionId && (
+              <Info
+                label="Sub agent"
+                value={<Badge variant="code">{a.aiTelemetryFunctionId}</Badge>}
+              />
+            )}
             <Info label="Input tokens" value={a.inputTokens?.toLocaleString() || '0'} />
             <Info label="Output tokens" value={a.outputTokens?.toLocaleString() || '0'} />
             <StatusBadge status={a.status} />
@@ -424,6 +464,12 @@ export function renderPanelContent({
         <>
           <Section>
             <Info label="Model" value={<ModelBadge model={a.aiStreamObjectModel || 'Unknown'} />} />
+            {a.aiTelemetryFunctionId && (
+              <Info
+                label="Sub agent"
+                value={<Badge variant="code">{a.aiTelemetryFunctionId}</Badge>}
+              />
+            )}
             <Info label="Input tokens" value={a.inputTokens?.toLocaleString() || '0'} />
             <Info label="Output tokens" value={a.outputTokens?.toLocaleString() || '0'} />
             {a.aiStreamObjectContent && (

package/src/components/traces/timeline/timeline-item.tsx

@@ -182,6 +182,13 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* subagent badge for AI assistant message */}
+          {activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE && activity.subAgentName && (
+            <div className="mb-1">
+              <Badge variant="code">{activity.subAgentName}</Badge>
+            </div>
+          )}
+
           {/* streamed text bubble */}
           {activity.type === 'ai_model_streamed_text' && activity.aiStreamTextContent && (
             <div className="space-y-2">
@@ -210,6 +217,15 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* ai.telemetry.functionId badge for streamed text */}
+          {activity.type === 'ai_model_streamed_text' && activity.aiTelemetryFunctionId && (
+            <div className="mb-1">
+              <Badge variant="code" className="text-xs">
+                {activity.aiTelemetryFunctionId}
+              </Badge>
+            </div>
+          )}
+
           {/* streamed object bubble */}
           {activity.type === 'ai_model_streamed_object' && activity.aiStreamObjectContent && (
             <div className="space-y-2">
@@ -244,6 +260,15 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* ai.telemetry.functionId badge for streamed object */}
+          {activity.type === 'ai_model_streamed_object' && activity.aiTelemetryFunctionId && (
+            <div className="mb-1">
+              <Badge variant="code" className="text-xs">
+                {activity.aiTelemetryFunctionId}
+              </Badge>
+            </div>
+          )}
+
           {/* context fetch url */}
           {activity.type === 'context_fetch' && activity.toolResult && (
             <div className="mb-1">
@@ -335,6 +360,13 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* agent ID for agent generation */}
+          {activity.type === ACTIVITY_TYPES.AGENT_GENERATION && activity.subAgentId && (
+            <div className="mb-1">
+              <Badge variant="code">{activity.subAgentId}</Badge>
+            </div>
+          )}
+
           {/* ai.telemetry.functionId badge for ai.toolCall spans that aren't delegate or transfers */}
           {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
             activity.aiTelemetryFunctionId &&

package/.next/standalone/agents-manage-ui/.next/server/chunks/1360.js

@@ -1,7 +0,0 @@
-"use strict";exports.id=1360,exports.ids=[1360],exports.modules={29160:(a,b,c)=>{c.r(b),c.d(b,{default:()=>h,dynamic:()=>g});var d=c(72669),e=c(45907),f=c(54637);let g="force-dynamic";async function h({children:a,params:b}){let{tenantId:c,projectId:g}=await b;try{await (0,f.Sw)(c,g)}catch(a){return(0,d.jsx)(e.default,{error:a,context:"project"})}return(0,d.jsx)(d.Fragment,{children:a})}},39878:(a,b,c)=>{c.d(b,{$:()=>i});var d=c(59111),e=c(2856),f=c(80974),g=c(42723),h=c(67466);function i(a){return(0,d.jsxs)("div",{"data-slot":"json-editor",className:`space-y-3 relative overflow-hidden p-1 ${a.className||""}`,children:[(0,d.jsxs)("div",{className:"flex items-center gap-2 absolute top-3 right-3 z-10",children:[!a.value?.trim()&&(0,d.jsx)(e.$,{type:"button",onClick:()=>{let b=(0,f.Qj)();a.onChange(b)},variant:"outline",size:"sm",className:"h-6 px-2 text-xs rounded-sm",children:"Template"}),(0,d.jsx)(e.$,{type:"button",onClick:()=>{let b=a.value;if(b?.trim()){let c=(0,g.IB)(b);a.onChange(c)}},variant:"outline",size:"sm",className:"h-6 px-2 text-xs rounded-sm",disabled:!a.value?.trim(),children:"Format"})]}),(0,d.jsx)(h.i,{value:a.value||"",onChange:a.onChange,placeholder:a.placeholder,disabled:a.disabled,readOnly:a.readOnly})]})}},40029:(a,b,c)=>{c.d(b,{EN:()=>i,Z3:()=>g,df:()=>j,nD:()=>k,sO:()=>h});var d=c(29991);c(58415);var e=c(8703),f=c(45796);async function g(a,b){(0,f.M2)(a),(0,f.nt)(b);let c=await (0,e.J)(`tenants/${a}/projects/${b}/data-components`);return{...c,data:c.data.map(a=>({...a,props:a.props||{}}))}}async function h(a,b,c){(0,f.M2)(a),(0,f.nt)(b);let d=await (0,e.J)(`tenants/${a}/projects/${b}/data-components/${c}`);return{...d.data,props:d.data.props||{}}}async function i(a,b,c){(0,f.M2)(a),(0,f.nt)(b);let d=await (0,e.J)(`tenants/${a}/projects/${b}/data-components`,{method:"POST",body:JSON.stringify(c)});return{...d.data,props:d.data.props||{}}}async function j(a,b,c){(0,f.M2)(a),(0,f.nt)(b);let d=await (0,e.J)(`tenants/${a}/projects/${b}/data-components/${c.id}`,{method:"PUT",body:JSON.stringify(c)});return{...d.data,props:d.data.props||{}}}async function k(a,b,c){(0,f.M2)(a),(0,f.nt)(b),await (0,e.J)(`tenants/${a}/projects/${b}/data-components/${c}`,{method:"DELETE"})}(0,c(33451).D)([g,h,i,j,k]),(0,d.A)(g,"60821fe6ad711e50d78952f12d1a16a2b1f16a3ecf",null),(0,d.A)(h,"704a90b13f7286a18aa7037ffcf500d273e42f6055",null),(0,d.A)(i,"702736560bbcd10c5253145f569467bd2ea5f34502",null),(0,d.A)(j,"70950501e7f27ad5b7361109d28a574d205c8edfc2",null),(0,d.A)(k,"7034c28fea6a81d59caf6ab39467614377394207e5",null)},54257:(a,b,c)=>{c.d(b,{s:()=>j});var d=c(59111),e=c(92707),f=c(14450),g=c(18061),h=c(57904);let{AlertCircle:i}=e;function j({code:a,props:b}){let c=(0,f.useMemo)(()=>((a,b)=>{let c=a.match(/(?:export\s+(?:default\s+)?)?(?:function\s+(\w+)|const\s+(\w+)\s*=\s*(?:\(.*\)\s*=>|\(\)))/),d=c?.[1]||c?.[2]||"App";return`
-  ${a}
-  export default function App() {
-    const props = ${JSON.stringify(b)};
-    return <${d} {...props} />;
-  }`})(a,b),[a,b]),j=(0,f.useMemo)(()=>({props:b,import:{"lucide-react":e}}),[b]),{element:k,error:l}=(0,g.CL)({code:c,scope:j});return l?(0,d.jsxs)(h.Fc,{variant:"destructive",children:[(0,d.jsx)(i,{className:"h-4 w-4"}),(0,d.jsxs)(h.TN,{className:"font-mono text-xs",children:["Error rendering component: ",l]})]}):(0,d.jsx)("div",{children:k})}},56008:(a,b,c)=>{c.d(b,{Fs:()=>j,Hn:()=>h,Qs:()=>i,bO:()=>k});var d=c(29991);c(58415);var e=c(83248),f=c(40029),g=c(36608);async function h(a,b){try{let c=await (0,f.Z3)(a,b);return{success:!0,data:c.data}}catch(a){if(a instanceof g.h)return{success:!1,error:a.message,code:a.error.code};return{success:!1,error:a instanceof Error?a.message:"Unknown error occurred",code:"unknown_error"}}}async function i(a,b,c){try{let d=await (0,f.EN)(a,b,c);return(0,e.revalidatePath)(`/${a}/projects/${b}/components`),{success:!0,data:d}}catch(a){if(a instanceof g.h)return{success:!1,error:a.message,code:a.error.code};return{success:!1,error:a instanceof Error?a.message:"Unknown error occurred",code:"unknown_error"}}}async function j(a,b,c){try{let d=await (0,f.df)(a,b,c);return(0,e.revalidatePath)(`/${a}/projects/${b}/components`),(0,e.revalidatePath)(`/${a}/projects/${b}/components/${c.id}`),{success:!0,data:d}}catch(a){if(a instanceof g.h)return{success:!1,error:a.message,code:a.error.code};return{success:!1,error:a instanceof Error?a.message:"Unknown error occurred",code:"unknown_error"}}}async function k(a,b,c){try{return await (0,f.nD)(a,b,c),(0,e.revalidatePath)(`/${a}/projects/${b}/components`),(0,e.revalidatePath)(`/${a}/projects/${b}/components/${c}`),{success:!0}}catch(a){if(a instanceof g.h)return{success:!1,error:a.message,code:a.error.code};return{success:!1,error:a instanceof Error?a.message:"Unknown error occurred",code:"unknown_error"}}}(0,c(33451).D)([h,i,j,k]),(0,d.A)(h,"60f24b9882296a041082119f969bb70df9925f365e",null),(0,d.A)(i,"707f866da8fa6398d0c781be9322db9b752d336d2b",null),(0,d.A)(j,"701516ccc8bc0caec4e4f266ced7ee0417e08d5af9",null),(0,d.A)(k,"7012fee48cc02670f426a7890cbe04fc914cc7e8be",null)},56019:(a,b,c)=>{c.d(b,{S:()=>g});var d=c(59111),e=c(71771),f=c(39878);function g({control:a,name:b,label:c="JSON Schema",placeholder:g,disabled:h,description:i,readOnly:j,isRequired:k=!1}){return(0,d.jsx)(e.u,{control:a,name:b,label:c,description:i,isRequired:k,children:a=>(0,d.jsx)(f.$,{placeholder:g,...a,onChange:a.onChange,readOnly:j,disabled:h})})}},56546:(a,b,c)=>{c.d(b,{DataComponentForm:()=>T});var d=c(59111),e=c(6614),f=c(485),g=c(75823),h=c(68156),i=c(17130),j=c(16426),k=c(56019),l=c(2856),m=c(60848),n=c(93622),o=c(35283),p=c(90147);let q=(0,p.createServerReference)("701516ccc8bc0caec4e4f266ced7ee0417e08d5af9",p.callServer,void 0,p.findSourceMapURL,"updateDataComponentAction"),r=(0,p.createServerReference)("707f866da8fa6398d0c781be9322db9b752d336d2b",p.callServer,void 0,p.findSourceMapURL,"createDataComponentAction");var s=c(42723),t=c(53710),u=c(89565),v=c(27218),w=c(3905),x=c(14450),y=c(58616),z=c(85660),A=c(51023),B=c(75726),C=c(76469);function D(a){let{resolvedTheme:b}=(0,C.D)(),{language:c="jsx",className:e,value:f,onChange:g,placeholder:h,disabled:i,readOnly:j,...k}=a,l=[(0,z.Q2)({jsx:"jsx"===c||"tsx"===c,typescript:"typescript"===c||"tsx"===c})];return(0,d.jsx)(B.Ay,{...k,value:f||"",onChange:a=>g(a),extensions:l,theme:"dark"===b?A.nQ:A.Bs,placeholder:h||"Enter code...",editable:!i&&!j,basicSetup:{lineNumbers:!1,foldGutter:!0,dropCursor:!1,allowMultipleSelections:!1,bracketMatching:!0,closeBrackets:!0,autocompletion:!0},"data-disabled":i?"":void 0,"data-read-only":j?"":void 0,className:(0,s.cn)("h-full [&>.cm-editor]:max-h-[inherit] [&_.cm-gutters]:!bg-transparent [&>.cm-editor]:!bg-transparent dark:[&>.cm-editor]:!bg-input/30 [&>.cm-editor]:!outline-none [&>.cm-editor]:rounded-[7px] [&>.cm-editor]:px-3 [&>.cm-editor]:py-2 leading-2 text-xs font-mono rounded-md border border-input shadow-xs transition-[color,box-shadow] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:bg-muted data-invalid:border-destructive has-[.cm-focused]:border-ring has-[.cm-focused]:ring-ring/50 has-[.cm-focused]:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",e)})}var E=c(67466),F=c(71534),G=c(14875);let H=G.bL,I=x.forwardRef(({className:a,...b},c)=>(0,d.jsx)(G.B8,{ref:c,className:(0,s.cn)("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",a),...b}));I.displayName=G.B8.displayName;let J=x.forwardRef(({className:a,...b},c)=>(0,d.jsx)(G.l9,{ref:c,className:(0,s.cn)("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",a),...b}));J.displayName=G.l9.displayName;let K=x.forwardRef(({className:a,...b},c)=>(0,d.jsx)(G.UC,{ref:c,className:(0,s.cn)("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",a),...b}));K.displayName=G.UC.displayName;let L=(0,p.createServerReference)("70950501e7f27ad5b7361109d28a574d205c8edfc2",p.callServer,void 0,p.findSourceMapURL,"updateDataComponent");var M=c(54257);function N({tenantId:a,projectId:b,dataComponentId:c,existingPreview:e,onPreviewChanged:f}){let[g,i]=(0,x.useState)(e||null),[j,k]=(0,x.useState)(!1),[m,n]=(0,x.useState)(!1),[o,p]=(0,x.useState)(""),[q,r]=(0,x.useState)(!!e),[s,z]=(0,x.useState)(!!e),A=async()=>{k(!0),i(null),p(""),r(!1),z(!1);try{let d=await fetch(`/api/data-components/${c}/generate-preview`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({tenantId:a,projectId:b})});if(!d.ok)throw Error("Failed to generate preview");if(!d.body)throw Error("No response body");let e=d.body.getReader(),g=new TextDecoder,j="",k=null;for(;;){let{done:a,value:b}=await e.read();if(a)break;let c=g.decode(b,{stream:!0}),d=(j+=c).split("\n");for(let a of(j=d.pop()||"",d))if(a.trim())try{let b=JSON.parse(a);k=b,b.code&&p(b.code)}catch(b){console.warn("Failed to parse line:",a,b)}}if(k)i(k),r(!0),f?.(k),h.oR.success("Preview generated successfully");else throw Error("No valid preview generated")}catch(a){console.error("Failed to generate preview:",a),h.oR.error("Failed to generate preview"),r(!0)}finally{k(!1)}},B=async()=>{n(!0);try{await L(a,b,{id:c,preview:null}),i(null),z(!1),f?.(null),h.oR.success("Preview deleted")}catch(a){console.error("Error deleting preview:",a),h.oR.error("Failed to delete preview")}finally{n(!1)}},C=null!==g&&(g.code?.trim().length??0)>0,G=(0,x.useMemo)(()=>g?.data?JSON.stringify(g.data,null,2):"{}",[g?.data]),N=(0,x.useMemo)(()=>g?.code||"",[g?.code]),O=(0,x.useMemo)(()=>g?.data||{},[g?.data]),P=(0,x.useCallback)(a=>{if(g)try{let b=JSON.parse(a),c={...g,data:b};i(c),f?.(c)}catch{}},[g,f]);return(0,d.jsxs)("div",{className:"space-y-4",children:[(0,d.jsxs)("div",{className:"flex items-center justify-between",children:[(0,d.jsxs)("div",{children:[(0,d.jsx)("h3",{className:"text-lg font-semibold",children:"Component Preview"}),(0,d.jsx)("p",{className:"text-sm text-muted-foreground",children:"Generate a React/Tailwind component based on your schema"})]}),(0,d.jsxs)("div",{className:"flex gap-2",children:[!C&&(0,d.jsx)(l.$,{onClick:A,disabled:j,className:"gap-2",children:j?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.A,{className:"h-4 w-4 animate-spin"}),"Generating..."]}):(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(u.A,{className:"h-4 w-4"}),"Generate"]})}),C&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(l.$,{variant:"outline",onClick:A,disabled:m||j,className:"gap-2",children:j?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(t.A,{className:"h-4 w-4 animate-spin"}),"Regenerating..."]}):(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(v.A,{className:"h-4 w-4"}),"Regenerate"]})}),s&&(0,d.jsx)(l.$,{variant:"destructive",onClick:B,disabled:m||j,size:"icon",title:"Delete preview",children:m?(0,d.jsx)(t.A,{className:"h-4 w-4 animate-spin"}):(0,d.jsx)(w.A,{className:"h-4 w-4"})})]})]})]}),j&&o&&(0,d.jsx)(y.jH,{isAnimating:!0,className:"[&_[data-code-block-header=true]]:hidden [&_pre]:bg-muted/40!",children:`\`\`\`jsx
-${o}\`\`\``}),j&&!o&&(0,d.jsx)(F.Zp,{className:"p-6",children:(0,d.jsxs)("div",{className:"flex flex-col items-center justify-center space-y-4",children:[(0,d.jsx)(t.A,{className:"h-8 w-8 animate-spin text-primary"}),(0,d.jsx)("p",{className:"text-sm text-muted-foreground",children:"Generating component preview..."})]})}),C&&!j&&q&&g&&(0,d.jsxs)(H,{defaultValue:"preview",className:"w-full",children:[(0,d.jsxs)(I,{children:[(0,d.jsx)(J,{value:"preview",children:"Preview"}),(0,d.jsx)(J,{value:"code",children:"Code"}),(0,d.jsx)(J,{value:"data",children:"Sample Data"})]}),(0,d.jsx)(K,{value:"preview",children:(0,d.jsx)(F.Zp,{className:"p-6",children:(0,d.jsx)(M.s,{code:N,props:O})})}),(0,d.jsx)(K,{value:"code",children:(0,d.jsx)(D,{value:N,onChange:a=>{if(!g)return;let b={...g,code:a};i(b),f?.(b)},language:"jsx"})}),(0,d.jsx)(K,{value:"data",children:(0,d.jsx)(E.i,{value:G,onChange:P})})]})]})}let O={id:"",name:"",description:"",props:""};var P=c(34576),Q=c(80974),R=c(62503);let S=P.object({id:R.f,name:P.string().min(1,"Name is required."),description:P.string().min(1,"Description is required."),props:P.string().min(1,"Props schema is required.").transform((a,b)=>{try{let c=JSON.parse(a),d=(0,Q._O)(a);if(!d.isValid){let a=d.errors[0]?.message||"Invalid JSON schema";return b.addIssue({code:P.ZodIssueCode.custom,message:a}),P.NEVER}return c}catch(a){return b.addIssue({code:P.ZodIssueCode.custom,message:(0,Q.SR)(a)}),P.NEVER}}).optional(),preview:P.object({code:P.string(),data:P.record(P.string(),P.unknown())}).nullable().optional()});function T({tenantId:a,projectId:b,id:c,initialData:p}){let t=(0,g.mN)({resolver:(0,e.u)(S),defaultValues:(a=>{if(!a)return O;let b={...a};return b.props&&(b.props=(0,s.S_)(b.props)),b})(p)}),{isSubmitting:u}=t.formState,v=(0,f.useRouter)();(0,o.S)({form:t,nameField:"name",idField:"id",isEditing:!!c});let w=async d=>{try{let e={...d};if(c){let c=await q(a,b,e);if(!c.success)return void h.oR.error(c.error||"Failed to update component");h.oR.success("Component updated")}else{let c=await r(a,b,e);if(!c.success)return void h.oR.error(c.error||"Failed to create component");h.oR.success("Component created"),v.push(`/${a}/projects/${b}/components`)}}catch(b){console.error("Error submitting component:",b);let a=b instanceof Error?b.message:"An unexpected error occurred";h.oR.error(a)}};return(0,d.jsx)(n.lV,{...t,children:(0,d.jsxs)("form",{onSubmit:t.handleSubmit(w),className:"space-y-8",children:[(0,d.jsx)(i.a,{control:t.control,name:"name",label:"Name",placeholder:"ListOrders",description:(0,d.jsxs)(d.Fragment,{children:["This name is used to identify the component in chat widget integration."," ",(0,d.jsx)(m.G,{href:"https://docs.inkeep.com/typescript-sdk/structured-outputs/data-components#frontend-integration",target:"_blank",children:"Learn more"})]}),isRequired:!0}),(0,d.jsx)(i.a,{control:t.control,name:"id",label:"Id",placeholder:"my-data-component",disabled:!!c,description:c?"":"Choose a unique identifier for this component. Using an existing id will replace that component.",isRequired:!0}),(0,d.jsx)(j.K,{control:t.control,name:"description",label:"Description",placeholder:"Display a list of user orders with interactive options",className:"min-h-[80px]",isRequired:!0}),(0,d.jsx)(k.S,{control:t.control,name:"props",label:"Props (JSON schema)",placeholder:"Enter a valid JSON Schema...",isRequired:!0}),c&&(0,d.jsx)(N,{tenantId:a,projectId:b,dataComponentId:c,existingPreview:p?.preview||null,onPreviewChanged:a=>{t.setValue("preview",a)}}),(0,d.jsx)(l.$,{type:"submit",disabled:u,children:"Save"})]})})}},57904:(a,b,c)=>{c.d(b,{Fc:()=>h,TN:()=>j,XL:()=>i});var d=c(59111),e=c(53433),f=c(42723);let g=(0,e.F)("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",{variants:{variant:{default:"bg-card text-card-foreground",destructive:"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",warning:"text-amber-700 bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-amber-700/90 *:data-[slot=alert-description]:dark:text-amber-300/90 dark:text-amber-300 bg-amber-50 border-amber-200 dark:bg-amber-950/40 dark:border-amber-700"}},defaultVariants:{variant:"default"}});function h({className:a,variant:b,...c}){return(0,d.jsx)("div",{"data-slot":"alert",role:"alert",className:(0,f.cn)(g({variant:b}),a),...c})}function i({className:a,...b}){return(0,d.jsx)("div",{"data-slot":"alert-title",className:(0,f.cn)("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",a),...b})}function j({className:a,...b}){return(0,d.jsx)("div",{"data-slot":"alert-description",className:(0,f.cn)("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",a),...b})}},62503:(a,b,c)=>{c.d(b,{f:()=>d});let d=c(34576).string().min(1,"Id is required.").max(64,"Id must be less than 64 characters.").regex(/^[a-zA-Z0-9_-]+$/,"Id must contain only alphanumeric characters, underscores, and dashes. No spaces allowed.")},71534:(a,b,c)=>{c.d(b,{BT:()=>i,Wu:()=>j,ZB:()=>h,Zp:()=>f,aR:()=>g,wL:()=>k});var d=c(59111),e=c(42723);function f({className:a,...b}){return(0,d.jsx)("div",{"data-slot":"card",className:(0,e.cn)("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",a),...b})}function g({className:a,...b}){return(0,d.jsx)("div",{"data-slot":"card-header",className:(0,e.cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",a),...b})}function h({className:a,...b}){return(0,d.jsx)("div",{"data-slot":"card-title",className:(0,e.cn)("leading-none font-semibold",a),...b})}function i({className:a,...b}){return(0,d.jsx)("div",{"data-slot":"card-description",className:(0,e.cn)("text-muted-foreground text-sm",a),...b})}function j({className:a,...b}){return(0,d.jsx)("div",{"data-slot":"card-content",className:(0,e.cn)("px-6",a),...b})}function k({className:a,...b}){return(0,d.jsx)("div",{"data-slot":"card-footer",className:(0,e.cn)("flex items-center px-6 [.border-t]:pt-6",a),...b})}},80974:(a,b,c)=>{c.d(b,{Qj:()=>k,SR:()=>l,_O:()=>j});var d=c(7352),e=c(43381);let f=d.ZU.Object({type:d.ZU.Union([d.ZU.Literal("string"),d.ZU.Literal("number"),d.ZU.Literal("integer"),d.ZU.Literal("boolean"),d.ZU.Literal("array"),d.ZU.Literal("object"),d.ZU.Literal("null")]),description:d.ZU.String({minLength:1}),format:d.ZU.Optional(d.ZU.String()),pattern:d.ZU.Optional(d.ZU.String()),minimum:d.ZU.Optional(d.ZU.Number()),maximum:d.ZU.Optional(d.ZU.Number()),minLength:d.ZU.Optional(d.ZU.Number()),maxLength:d.ZU.Optional(d.ZU.Number()),items:d.ZU.Optional(d.ZU.Any()),properties:d.ZU.Optional(d.ZU.Any()),enum:d.ZU.Optional(d.ZU.Array(d.ZU.Any())),const:d.ZU.Optional(d.ZU.Any()),default:d.ZU.Optional(d.ZU.Any())}),g=d.ZU.Object({type:d.ZU.Literal("object"),properties:d.ZU.Record(d.ZU.String(),f),required:d.ZU.Array(d.ZU.String(),{minItems:1}),additionalProperties:d.ZU.Optional(d.ZU.Boolean()),description:d.ZU.Optional(d.ZU.String())}),h=e.gv.Compile(f),i=e.gv.Compile(g);function j(a){let b=[],{parsed:c,errors:d}=function(a){let b=[],c=null;if(!a?.trim())return{parsed:null,errors:b};try{c=JSON.parse(a)}catch(a){b.push({path:"root",message:a instanceof Error?a.message:"Invalid JSON syntax",type:"syntax"})}return{parsed:c,errors:b}}(a);if(d.length>0)return{isValid:!1,errors:d,warnings:b};if(!c)return{isValid:!0,errors:[],warnings:["Empty schema provided"]};let e=[...function(a){let b=[];return a&&"object"==typeof a?!i.Check(a)&&(a.type&&"object"===a.type||b.push({path:"type",message:'Schema must have type: "object" for LLM compatibility',type:"llm_requirement"}),a.properties&&"object"==typeof a.properties||b.push({path:"properties",message:'Schema must have a "properties" object',type:"schema"}),a.required&&Array.isArray(a.required)||b.push({path:"required",message:'Schema must have a "required" array (can be empty)',type:"llm_requirement"}),a.properties&&"object"==typeof a.properties&&Object.entries(a.properties).forEach(([a,c])=>{h.Check(c)||[...h.Errors(c)].forEach(c=>{let d=c.message;"/description"===c.path?d='Each property must have a "description" for LLM compatibility':"/type"===c.path&&(d='Each property must have a valid "type"'),b.push({path:`properties.${a}${c.path}`,message:d,type:"/description"===c.path?"llm_requirement":"schema"})})})):b.push({path:"root",message:"Schema must be an object",type:"schema"}),b}(c),...function(a){let b=[];return a&&"object"==typeof a&&(a.required&&Array.isArray(a.required)&&a.properties&&a.required.forEach(c=>{a.properties[c]||b.push({path:"required",message:`Required property "${c}" must exist in properties`,type:"schema"})}),a.properties&&"object"==typeof a.properties&&Object.entries(a.properties).forEach(([a,c])=>{c.description&&"string"==typeof c.description&&0!==c.description.trim().length||b.push({path:`properties.${a}.description`,message:"Each property must have a non-empty description for LLM compatibility",type:"llm_requirement"})})),b}(c)];return{isValid:0===e.length,errors:e,warnings:b}}function k(){return JSON.stringify({type:"object",properties:{example_property:{type:"string",description:"Description of what this property represents"}},required:["example_property"]},null,2)}function l(a){if(a instanceof SyntaxError){let b=a.message.toLowerCase();return b.includes("unexpected end of json input")?"Incomplete JSON - missing closing brackets or quotes":b.includes("unexpected token")?"Invalid character in JSON - check for missing commas, quotes, or brackets":b.includes("expected property name")||b.includes("expected ':' after property name")?"Property names must be in double quotes":b.includes("duplicate keys")?"Duplicate property names are not allowed":"Invalid JSON syntax - check structure and formatting"}return"Unable to parse JSON"}},92107:(a,b,c)=>{c.r(b),c.d(b,{default:()=>j});var d=c(72669),e=c(17932),f=c(96737),g=c(39885),h=c(3687),i=c(43461);function j(){return(0,d.jsx)(e.H,{breadcrumbs:[{label:"Components"}],children:(0,d.jsxs)(f.D,{children:[(0,d.jsx)(g.zY,{title:"Components",description:i.yr}),(0,d.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4",children:Array.from({length:6}).map((a,b)=>(0,d.jsx)(h.E,{className:"h-36 w-full rounded-lg"},`loading-skeleton-${b}`))})]})})}},98261:(a,b,c)=>{c.d(b,{DataComponentForm:()=>d});let d=(0,c(60241).registerClientReference)(function(){throw Error("Attempted to call DataComponentForm() from the server but DataComponentForm is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/work/agents/agents/agents-manage-ui/src/components/data-components/form/data-component-form.tsx","DataComponentForm")}};