diff --git a/.changeset/quick-socks-learn.md b/.changeset/quick-socks-learn.md new file mode 100644 index 0000000000000000000000000000000000000000..092d81c7b4444d2f0d0f22e3b98d46490b4aa1cc --- /dev/null +++ b/.changeset/quick-socks-learn.md @@ -0,0 +1,5 @@ +--- +"create-llama": patch +--- + +Fix the issue of images not showing with the sandbox URL from OpenAI's models diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx index 54a173892819e757e48503ca3ec9aedc389b824c..79791b46cd7ee05f3f5a02306d493d7cd82c24ed 100644 --- a/templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx +++ b/templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx @@ -28,8 +28,19 @@ const preprocessLaTeX = (content: string) => { return inlineProcessedContent; }; +const preprocessMedia = (content: string) => { + // Remove `sandbox:` from the beginning of the URL + // to fix OpenAI's models issue appending `sandbox:` to the relative URL + return content.replace(/(sandbox|attachment|snt):/g, ""); +}; + +const preprocessContent = (content: string) => { + return preprocessMedia(preprocessLaTeX(content)); +}; + export default function Markdown({ content }: { content: string }) { - const processedContent = preprocessLaTeX(content); + const processedContent = preprocessContent(content); + return ( <MemoizedReactMarkdown className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words custom-markdown"