ai-design-system 0.1.77 → 0.1.78

package/components/features/TextEditor/TextEditor.tsx

@@ -41,13 +41,9 @@ import type { FileDownloadResult, FileTreeNode } from '@/components/composites/F
 import { cn } from '@/lib/utils'
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor/annotations'
+import type { DocumentFile, DocumentWithAnnotations } from '@/types/ai-editor/editor'
 import { StreamingMarkdown } from '@/components/composites/StreamingMarkdown'
-
-interface DocumentWithAnnotations {
-  file: { id: string; name: string; isDirty?: boolean; format?: 'json' | 'markdown' | string; lastModified?: number }
-  content: JSONContent | string
-  annotations: Annotation[]
-}
+import { MediaPreview, isMediaFile } from '@/components/composites/MediaPreview'
 
 /**
  * Props for TextEditor feature component - Single document mode (backward compatible)
@@ -298,13 +294,6 @@ export const TextEditor = React.memo<TextEditorProps>(
             targetId = targetId.slice(2)
           }
 
-          console.log('[TextEditor:LinkComponent:handleClick]', {
-            href,
-            activeDocumentId: props.activeDocumentId,
-            computedTargetId: targetId,
-            documentsCount: props.documents?.length
-          })
-
           if (isMultiTab && props.documents) {
             const cleanTarget = targetId.replace(/^\.\//, '').replace(/^\//, '')
             const matchedDoc = props.documents.find((doc) => {
@@ -316,18 +305,12 @@ export const TextEditor = React.memo<TextEditorProps>(
                 doc.file.name === targetId
               )
             })
-            console.log('[TextEditor:LinkComponent:matching]', {
-              cleanTarget,
-              matchedDocId: matchedDoc?.file?.id,
-              availableDocIds: props.documents.map(d => d.file.id)
-            })
             if (matchedDoc) {
               targetId = matchedDoc.file.id
             }
           }
 
           if (handleTabSelect) {
-            console.log('[TextEditor:LinkComponent:onTabSelect]', targetId)
             handleTabSelect(targetId)
           }
         }
@@ -339,6 +322,8 @@ export const TextEditor = React.memo<TextEditorProps>(
       return <a href={href} onClick={handleClick} className="text-primary hover:underline cursor-pointer" {...rest} />
     }, [handleTabSelect, isMultiTab, props.activeDocumentId, props.documents])
 
+    const markdownComponents = useMemo(() => ({ a: LinkComponent }), [LinkComponent])
+
     /**
      * Single-document mode
      */
@@ -354,7 +339,7 @@ export const TextEditor = React.memo<TextEditorProps>(
           : contentStr
         return (
           <div className={cn('text-editor p-6 flex flex-col h-screen w-full flex-1', className)}>
-            <StreamingMarkdown mode="streaming" components={{ a: LinkComponent }}>
+            <StreamingMarkdown mode="static" isAnimating={false} components={markdownComponents}>
               {content}
             </StreamingMarkdown>
           </div>
@@ -402,6 +387,23 @@ export const TextEditor = React.memo<TextEditorProps>(
           </div>
         </div>
       )
+    } else if (isMediaFile(currentDocument.file)) {
+      editorPane = (
+        <div className="text-editor flex flex-col h-full w-full">
+          {!hideTabBar && (
+            <DocumentTabBar
+              className="w-full"
+              tabs={props.documents?.map((doc) => doc.file) || []}
+              activeTabId={props.activeDocumentId}
+              onTabSelect={props.onTabSelect}
+              onTabClose={props.onTabClose}
+            />
+          )}
+          <div className="flex-1 overflow-auto">
+            <MediaPreview file={currentDocument.file} />
+          </div>
+        </div>
+      )
     } else {
       const format = currentDocument.file.format || 'markdown'
       const isMarkdownMulti = format === 'markdown' || format === 'md' || format === 'mdx'
@@ -435,10 +437,10 @@ export const TextEditor = React.memo<TextEditorProps>(
             ) : renderAsStreamdown ? (
               <div className="p-6">
                 <StreamingMarkdown
-                  mode="streaming"
-                  isAnimating
+                  mode="static"
+                  isAnimating={false}
                   className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
-                  components={{ a: LinkComponent }}
+                  components={markdownComponents}
                 >
                   {isCodeMulti
                     ? `\`\`\`${format}\n${format === 'json' ? formatJson(currentDocument.content as string) : currentDocument.content}\n\`\`\``

package/components/features/TextEditor/index.ts

@@ -22,3 +22,6 @@ export {
   sampleDocumentFiles,
   sampleMultiTabDocuments,
 } from './TextEditor.mocks'
+
+export { MediaPreview, isMediaFile, isVideoFile, isAudioFile, isImageFile, isPdfFile } from '@/components/composites/MediaPreview'
+export type { MediaPreviewProps } from '@/components/composites/MediaPreview'

package/components/features/TextEditor/useTextEditor.mock.ts

@@ -8,24 +8,11 @@
 import React, { useState, useCallback } from 'react'
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation } from '@/types/ai-editor/annotations'
+import type { DocumentFile, DocumentWithAnnotations } from '@/types/ai-editor/editor'
 import type { FileTreeNode } from '@/components/composites/FileTreeExplorer'
 import type { UseTextEditorReturn, UseAIMultiTabDocEditorReturn } from './useTextEditor'
 import { sampleDocumentFiles, sampleMultiTabDocuments } from './TextEditor.mocks'
 
-interface DocumentFile {
-  id: string
-  name: string
-  isDirty: boolean
-  format?: 'json' | 'markdown' | string
-  lastModified: number
-}
-
-interface DocumentWithAnnotations {
-  file: DocumentFile
-  content: JSONContent | string
-  annotations: Annotation[]
-}
-
 type MultiDocMockConfig = {
   multiDoc: true
   initialDocuments?: DocumentWithAnnotations[]

package/dist/index.cjs

@@ -1400,6 +1400,38 @@ var defaultIcons = {
       { type: "path", attrs: { d: "M3 5v14a2 2 0 0 0 2 2h16v-5" } },
       { type: "path", attrs: { d: "M18 12a2 2 0 0 0 0 4h4v-4Z" } }
     ]
+  },
+  "film": {
+    name: "film",
+    viewBox: "0 0 24 24",
+    elements: [
+      { type: "rect", attrs: { width: "18", height: "18", x: "3", y: "3", rx: "2" } },
+      { type: "path", attrs: { d: "M7 3v18" } },
+      { type: "path", attrs: { d: "M3 7.5h4" } },
+      { type: "path", attrs: { d: "M3 12h18" } },
+      { type: "path", attrs: { d: "M3 16.5h4" } },
+      { type: "path", attrs: { d: "M17 3v18" } },
+      { type: "path", attrs: { d: "M17 7.5h4" } },
+      { type: "path", attrs: { d: "M17 16.5h4" } }
+    ]
+  },
+  "music": {
+    name: "music",
+    viewBox: "0 0 24 24",
+    elements: [
+      { type: "path", attrs: { d: "M9 18V5l12-2v13" } },
+      { type: "circle", attrs: { cx: "6", cy: "18", r: "3" } },
+      { type: "circle", attrs: { cx: "18", cy: "16", r: "3" } }
+    ]
+  },
+  "image": {
+    name: "image",
+    viewBox: "0 0 24 24",
+    elements: [
+      { type: "rect", attrs: { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" } },
+      { type: "circle", attrs: { cx: "9", cy: "9", r: "2" } },
+      { type: "path", attrs: { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" } }
+    ]
   }
 };
 var IconRegistry = class {
@@ -1875,13 +1907,12 @@ var AdjustableLayout = React3__namespace.memo(
       return raw.map((size) => size / total * 100);
     }, [sections]);
     const [sizes, setSizes] = React3__namespace.useState(defaultSizes);
+    const prevSectionsLengthRef = React3__namespace.useRef(sections.length);
     React3__namespace.useEffect(() => {
-      setSizes((prevSizes) => {
-        if (prevSizes.length !== sections.length) {
-          return defaultSizes;
-        }
-        return prevSizes;
-      });
+      if (prevSectionsLengthRef.current !== sections.length) {
+        prevSectionsLengthRef.current = sections.length;
+        setSizes(defaultSizes);
+      }
     }, [sections.length, defaultSizes]);
     React3__namespace.useEffect(() => {
       if (!storageKey) return;
@@ -1894,7 +1925,7 @@ var AdjustableLayout = React3__namespace.memo(
         }
       } catch (e) {
       }
-    }, [storageKey]);
+    }, [storageKey, sections.length]);
     const [draggingIndex, setDraggingIndex] = React3__namespace.useState(null);
     const [startX, setStartX] = React3__namespace.useState(0);
     const [startSizes, setStartSizes] = React3__namespace.useState([]);
@@ -3641,6 +3672,14 @@ var customRemarkPlugins = [
   ...Object.values(streamdown.defaultRemarkPlugins),
   remarkFrontmatter__default.default
 ];
+var DEFAULT_SHIKI_THEME = [
+  "vitesse-light",
+  "vitesse-dark"
+];
+var DEFAULT_CONTROLS = {
+  code: true,
+  mermaid: true
+};
 var StreamingMarkdown = React3.memo(
   (_a) => {
     var _b = _a, {
@@ -3660,6 +3699,7 @@ var StreamingMarkdown = React3.memo(
       "status",
       "controls"
     ]);
+    var _a2;
     const [copied, setCopied] = React3.useState(false);
     let content = children;
     let title = propsTitle;
@@ -3749,11 +3789,8 @@ var StreamingMarkdown = React3.memo(
         streamdown.Streamdown,
         __spreadProps(__spreadValues({
           remarkPlugins: remarkPlugins || customRemarkPlugins,
-          shikiTheme: ["vitesse-light", "vitesse-dark"],
-          controls: propsControls != null ? propsControls : {
-            code: true,
-            mermaid: true
-          }
+          shikiTheme: (_a2 = props.shikiTheme) != null ? _a2 : DEFAULT_SHIKI_THEME,
+          controls: propsControls != null ? propsControls : DEFAULT_CONTROLS
         }, props), {
           children: content
         })
@@ -3789,6 +3826,10 @@ var SpecialistMessage = React3__namespace.memo(
       () => message.toolCalls !== void 0 && message.toolCalls.length > 0,
       [message.toolCalls]
     );
+    const hasSubAgents = React3__namespace.useMemo(
+      () => message.subAgents !== void 0 && message.subAgents.length > 0,
+      [message.subAgents]
+    );
     const toolState = React3__namespace.useMemo(() => {
       switch (message.status) {
         case "pending":
@@ -3834,7 +3875,22 @@ var SpecialistMessage = React3__namespace.memo(
                 children: message.content
               }
             ),
-            hasToolCalls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", hasContent && "mt-4"), children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallDisplay, { toolCall }, toolCall.id)) })
+            hasToolCalls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", hasContent && "mt-4"), children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallDisplay, { toolCall }, toolCall.id)) }),
+            hasSubAgents && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2 pl-3 border-l border-border/50", (hasContent || hasToolCalls) && "mt-4"), children: message.subAgents.map((sa) => /* @__PURE__ */ jsxRuntime.jsx(
+              SpecialistMessage,
+              {
+                isNested: true,
+                message: {
+                  id: sa.id,
+                  name: sa.subAgentName,
+                  content: typeof sa.output === "string" ? sa.output : "",
+                  status: sa.status,
+                  input: sa.input,
+                  subAgents: sa.subAgents
+                }
+              },
+              sa.id
+            )) })
           ] }) })
         ]
       }
@@ -3864,12 +3920,51 @@ var OrchestratorMessage = React3__namespace.memo(
   }
 );
 OrchestratorMessage.displayName = "OrchestratorMessage";
+function parseSystemMessageContent(content) {
+  try {
+    const parsed = JSON.parse(content);
+    if (parsed && typeof parsed === "object") {
+      const url = typeof parsed.url === "string" ? parsed.url : void 0;
+      const mediaType = typeof parsed.mediaType === "string" ? parsed.mediaType : typeof parsed.type === "string" ? parsed.type : void 0;
+      const title = typeof parsed.title === "string" ? parsed.title : typeof parsed.message === "string" ? parsed.message : void 0;
+      if (url) {
+        if ((mediaType == null ? void 0 : mediaType.startsWith("video/")) || /\.(mp4|webm|mov)(\?.*)?$/i.test(url)) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsxs("video", { controls: true, className: "w-full max-w-[360px] rounded-md shadow-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("source", { src: url, type: mediaType || "video/mp4" }),
+              "Your browser does not support the video element."
+            ] })
+          ] });
+        }
+        if ((mediaType == null ? void 0 : mediaType.startsWith("audio/")) || /\.(wav|mp3|ogg|m4a)(\?.*)?$/i.test(url)) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsxs("audio", { controls: true, className: "w-full max-w-[360px] h-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("source", { src: url, type: mediaType || "audio/wav" }),
+              "Your browser does not support the audio element."
+            ] })
+          ] });
+        }
+        if ((mediaType == null ? void 0 : mediaType.startsWith("image/")) || /\.(png|jpg|jpeg|webp|gif)(\?.*)?$/i.test(url)) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: title || "Image output", className: "max-w-[360px] rounded-md shadow-sm" })
+          ] });
+        }
+      }
+      if (title) return /* @__PURE__ */ jsxRuntime.jsx("span", { children: title });
+    }
+  } catch (e) {
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: content });
+}
 var SystemMessage = React3__namespace.memo(
   ({ message, renderContent }) => {
     if (!message.content || !message.content.trim()) {
       return null;
     }
-    const contentNode = renderContent ? renderContent(message.content) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: message.content });
+    const contentNode = renderContent ? renderContent(message.content) : parseSystemMessageContent(message.content);
     if (!contentNode) {
       return null;
     }
@@ -4088,6 +4183,16 @@ var ReasoningDisplay = ({
     )
   ] });
 };
+function toNestedSubAgents(agents) {
+  return agents == null ? void 0 : agents.map((a) => ({
+    id: a.id,
+    subAgentName: a.subAgentName,
+    status: a.status,
+    input: a.input,
+    output: typeof a.output === "string" ? a.output : a.output ? JSON.stringify(a.output) : void 0,
+    subAgents: toNestedSubAgents(a.subAgents)
+  }));
+}
 var AIConversation = React3__namespace.memo(
   (_a) => {
     var _b = _a, {
@@ -4312,7 +4417,8 @@ ${newStr}` : newStr;
                               input: subAgent.input,
                               content: typeof subAgent.output === "string" ? subAgent.output : subAgent.output ? JSON.stringify(subAgent.output) : "",
                               status: subAgent.status,
-                              toolCalls: []
+                              toolCalls: [],
+                              subAgents: toNestedSubAgents(subAgent.subAgents)
                             },
                             isNested: true
                           },
@@ -4332,7 +4438,8 @@ ${newStr}` : newStr;
                             input: subAgent.input,
                             content: typeof subAgent.output === "string" ? subAgent.output : subAgent.output ? JSON.stringify(subAgent.output) : "",
                             status: subAgent.status,
-                            toolCalls: []
+                            toolCalls: [],
+                            subAgents: toNestedSubAgents(subAgent.subAgents)
                           },
                           isNested: true
                         },
@@ -12638,6 +12745,145 @@ var AuthCard = React3__namespace.memo(
   }
 );
 AuthCard.displayName = "AuthCard";
+function isVideoFile(file) {
+  var _a, _b, _c, _d;
+  const format = ((_a = file.format) == null ? void 0 : _a.toLowerCase()) || "";
+  const ext = ((_c = (_b = file.name) == null ? void 0 : _b.split(".").pop()) == null ? void 0 : _c.toLowerCase()) || "";
+  if (["mp4", "webm", "mov", "mkv", "avi"].includes(format) || ["mp4", "webm", "mov", "mkv", "avi"].includes(ext)) return true;
+  if ((_d = file.mediaType) == null ? void 0 : _d.startsWith("video/")) return true;
+  if (file.url && /\.(mp4|webm|mov|mkv)(\?.*)?$/i.test(file.url)) return true;
+  return false;
+}
+function isAudioFile(file) {
+  var _a, _b, _c, _d;
+  const format = ((_a = file.format) == null ? void 0 : _a.toLowerCase()) || "";
+  const ext = ((_c = (_b = file.name) == null ? void 0 : _b.split(".").pop()) == null ? void 0 : _c.toLowerCase()) || "";
+  if (["wav", "mp3", "ogg", "m4a", "flac", "aac", "wma"].includes(format) || ["wav", "mp3", "ogg", "m4a", "flac", "aac", "wma"].includes(ext)) return true;
+  if ((_d = file.mediaType) == null ? void 0 : _d.startsWith("audio/")) return true;
+  if (file.url && /\.(wav|mp3|ogg|m4a|flac|aac)(\?.*)?$/i.test(file.url)) return true;
+  return false;
+}
+function isImageFile(file) {
+  var _a, _b, _c, _d;
+  const format = ((_a = file.format) == null ? void 0 : _a.toLowerCase()) || "";
+  const ext = ((_c = (_b = file.name) == null ? void 0 : _b.split(".").pop()) == null ? void 0 : _c.toLowerCase()) || "";
+  if (["png", "jpg", "jpeg", "webp", "gif", "svg", "ico", "bmp"].includes(format) || ["png", "jpg", "jpeg", "webp", "gif", "svg", "ico", "bmp"].includes(ext)) return true;
+  if ((_d = file.mediaType) == null ? void 0 : _d.startsWith("image/")) return true;
+  if (file.url && /\.(png|jpg|jpeg|webp|gif|svg)(\?.*)?$/i.test(file.url)) return true;
+  return false;
+}
+function isPdfFile(file) {
+  var _a, _b, _c;
+  const format = ((_a = file.format) == null ? void 0 : _a.toLowerCase()) || "";
+  const ext = ((_c = (_b = file.name) == null ? void 0 : _b.split(".").pop()) == null ? void 0 : _c.toLowerCase()) || "";
+  return format === "pdf" || ext === "pdf" || file.mediaType === "application/pdf";
+}
+function isMediaFile(file) {
+  return isVideoFile(file) || isAudioFile(file) || isImageFile(file) || isPdfFile(file);
+}
+var MediaPreview = ({ file, className }) => {
+  var _a;
+  const isVideo = isVideoFile(file);
+  const isAudio = isAudioFile(file);
+  const isImage = isImageFile(file);
+  const isPdf = isPdfFile(file);
+  const mediaUrl = file.url;
+  if (!mediaUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center h-full p-8 text-center", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/60 mb-4 text-muted-foreground", children: [
+        isVideo && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "film", className: "h-8 w-8" }),
+        isAudio && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "music", className: "h-8 w-8" }),
+        isImage && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "image", className: "h-8 w-8" }),
+        isPdf && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "file-text", className: "h-8 w-8" }),
+        !isVideo && !isAudio && !isImage && !isPdf && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "alert-circle", className: "h-8 w-8" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-medium text-foreground mb-1", children: file.name || "Media File" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: "No direct stream URL is available for this file yet." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full w-full overflow-y-auto p-6 bg-background/50", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-4 mb-6 border-b border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary", children: [
+          isVideo && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "film", className: "h-5 w-5" }),
+          isAudio && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "music", className: "h-5 w-5" }),
+          isImage && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "image", className: "h-5 w-5" }),
+          isPdf && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "file-text", className: "h-5 w-5" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-foreground tracking-tight", children: file.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: file.mediaType || ((_a = file.format) == null ? void 0 : _a.toUpperCase()) || "Binary Media" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: mediaUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            download: file.name,
+            className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border bg-background hover:bg-muted text-foreground transition-colors shadow-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", className: "h-3.5 w-3.5" }),
+              "Download"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: mediaUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border bg-background hover:bg-muted text-foreground transition-colors shadow-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "external-link", className: "h-3.5 w-3.5" }),
+              "Open"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center min-h-[300px]", children: [
+      isVideo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-4xl flex flex-col items-center justify-center bg-black/95 rounded-2xl overflow-hidden shadow-lg border border-border/40", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          controls: true,
+          playsInline: true,
+          preload: "metadata",
+          src: mediaUrl,
+          className: "max-h-[65vh] w-auto max-w-full rounded-2xl",
+          children: "Your browser does not support the video tag."
+        }
+      ) }),
+      isAudio && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-xl p-8 rounded-2xl border border-border bg-card shadow-sm flex flex-col items-center gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "music", className: "h-10 w-10 animate-pulse" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-foreground mb-1", children: file.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground uppercase tracking-wider", children: "Audio Playback" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("audio", { controls: true, preload: "metadata", src: mediaUrl, className: "w-full h-12", children: "Your browser does not support the audio element." })
+      ] }),
+      isImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-full max-w-4xl rounded-2xl border border-border bg-muted/20 p-4 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: mediaUrl,
+          alt: file.name,
+          className: "max-h-[68vh] w-auto max-w-full rounded-xl object-contain shadow-md"
+        }
+      ) }),
+      isPdf && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full min-h-[500px] rounded-2xl overflow-hidden border border-border shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "iframe",
+        {
+          src: mediaUrl,
+          title: file.name,
+          className: "w-full h-full min-h-[500px]"
+        }
+      ) })
+    ] })
+  ] });
+};
 var SpecNavigator = React3__namespace.memo(
   ({ groups, selectedFileId, onFileSelect, className }) => {
     var _a, _b;
@@ -13674,7 +13920,7 @@ function formatJson(text) {
 }
 var TextEditor = React3__namespace.default.memo(
   (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const {
       mode = "review",
       currentUser: currentUser2,
@@ -13748,7 +13994,6 @@ var TextEditor = React3__namespace.default.memo(
       const isExternal = (href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")) || (href == null ? void 0 : href.startsWith("mailto:"));
       const isAnchor = href == null ? void 0 : href.startsWith("#");
       const handleClick = (e) => {
-        var _a3, _b2;
         if (!isExternal && !isAnchor && href) {
           e.preventDefault();
           let targetId = href;
@@ -13778,29 +14023,17 @@ var TextEditor = React3__namespace.default.memo(
           } else if (targetId.startsWith("./")) {
             targetId = targetId.slice(2);
           }
-          console.log("[TextEditor:LinkComponent:handleClick]", {
-            href,
-            activeDocumentId: props.activeDocumentId,
-            computedTargetId: targetId,
-            documentsCount: (_a3 = props.documents) == null ? void 0 : _a3.length
-          });
           if (isMultiTab && props.documents) {
             const cleanTarget = targetId.replace(/^\.\//, "").replace(/^\//, "");
             const matchedDoc = props.documents.find((doc) => {
               const cleanDocId = doc.file.id.replace(/^\.\//, "").replace(/^\//, "");
               return cleanDocId === cleanTarget || cleanDocId.endsWith("/" + cleanTarget) || cleanTarget.endsWith("/" + cleanDocId) || doc.file.name === targetId;
             });
-            console.log("[TextEditor:LinkComponent:matching]", {
-              cleanTarget,
-              matchedDocId: (_b2 = matchedDoc == null ? void 0 : matchedDoc.file) == null ? void 0 : _b2.id,
-              availableDocIds: props.documents.map((d) => d.file.id)
-            });
             if (matchedDoc) {
               targetId = matchedDoc.file.id;
             }
           }
           if (handleTabSelect) {
-            console.log("[TextEditor:LinkComponent:onTabSelect]", targetId);
             handleTabSelect(targetId);
           }
         }
@@ -13810,6 +14043,7 @@ var TextEditor = React3__namespace.default.memo(
       }
       return /* @__PURE__ */ jsxRuntime.jsx("a", __spreadValues({ href, onClick: handleClick, className: "text-primary hover:underline cursor-pointer" }, rest));
     }, [handleTabSelect, isMultiTab, props.activeDocumentId, props.documents]);
+    const markdownComponents = React3.useMemo(() => ({ a: LinkComponent }), [LinkComponent]);
     if (!isMultiTab) {
       const format = props.format || "markdown";
       const isMarkdown = format === "markdown" || format === "md" || format === "mdx";
@@ -13819,7 +14053,7 @@ var TextEditor = React3__namespace.default.memo(
         const content = isCode ? `\`\`\`${format}
 ${format === "json" ? formatJson(contentStr) : contentStr}
 \`\`\`` : contentStr;
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-editor p-6 flex flex-col h-screen w-full flex-1", className), children: /* @__PURE__ */ jsxRuntime.jsx(StreamingMarkdown, { mode: "streaming", components: { a: LinkComponent }, children: content }) });
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-editor p-6 flex flex-col h-screen w-full flex-1", className), children: /* @__PURE__ */ jsxRuntime.jsx(StreamingMarkdown, { mode: "static", isAnimating: false, components: markdownComponents, children: content }) });
       }
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-editor flex flex-col h-screen w-full flex-1", className), children: /* @__PURE__ */ jsxRuntime.jsx(
         DocumentEditorWithComments,
@@ -13853,6 +14087,20 @@ ${format === "json" ? formatJson(contentStr) : contentStr}
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center p-6 text-muted-foreground", children: "No documents selected" })
       ] });
+    } else if (isMediaFile(currentDocument.file)) {
+      editorPane = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-editor flex flex-col h-full w-full", children: [
+        !hideTabBar && /* @__PURE__ */ jsxRuntime.jsx(
+          DocumentTabBar,
+          {
+            className: "w-full",
+            tabs: ((_b = props.documents) == null ? void 0 : _b.map((doc) => doc.file)) || [],
+            activeTabId: props.activeDocumentId,
+            onTabSelect: props.onTabSelect,
+            onTabClose: props.onTabClose
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(MediaPreview, { file: currentDocument.file }) })
+      ] });
     } else {
       const format = currentDocument.file.format || "markdown";
       const isMarkdownMulti = format === "markdown" || format === "md" || format === "mdx";
@@ -13870,7 +14118,7 @@ ${format === "json" ? formatJson(contentStr) : contentStr}
           DocumentTabBar,
           {
             className: "w-full",
-            tabs: ((_b = props.documents) == null ? void 0 : _b.map((doc) => doc.file)) || [],
+            tabs: ((_c = props.documents) == null ? void 0 : _c.map((doc) => doc.file)) || [],
             activeTabId: props.activeDocumentId,
             onTabSelect: props.onTabSelect,
             onTabClose: props.onTabClose
@@ -13879,10 +14127,10 @@ ${format === "json" ? formatJson(contentStr) : contentStr}
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-8 text-muted-foreground animate-pulse", children: "Loading document content..." }) : renderAsStreamdown ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
           StreamingMarkdown,
           {
-            mode: "streaming",
-            isAnimating: true,
+            mode: "static",
+            isAnimating: false,
             className: "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
-            components: { a: LinkComponent },
+            components: markdownComponents,
             children: isCodeMulti ? `\`\`\`${format}
 ${format === "json" ? formatJson(currentDocument.content) : currentDocument.content}
 \`\`\`` : currentDocument.content