(advanced) Chatbot embeds saying "object Object"
Archiviert a year ago
O
Oscar
Copy Paster!
For some reason, my chatbot (using openai's API keys) seems to send it's code embeds saying "object Object". The message it sends outside of the embed seems right, but the code inside the embed is wrong.
Here is the code for the CodeBlock in TSX(JSX):
```js
import React, { useState, useEffect, useRef } from "react";
import { Sun, Moon, PanelLeftDashed, ChevronDown, ThumbsUp, ThumbsDown, Copy, Check, ExternalLink, Download } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Sidebar from "@/components/Sidebar";
import AutoGrowingInput from "./AutoGrowingInput";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-python";
import "prismjs/components/prism-jsx";
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import rehypeRaw from 'rehype-raw';
const API_KEY = import.meta.env.VITE_OPENAI_API_KEY;
interface CodeBlockProps {
code: string;
language: string;
}
const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
const [copied, setCopied] = useState(false);
const codeRef = useRef<HTMLElement>(null);
const codeString = typeof code === 'string' ? code : JSON.stringify(code, null, 2);
useEffect(() => {
if (codeRef.current) {
Prism.highlightElement(codeRef.current);
}
}, [code, language]);
const copyCode = () => {
navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className="rounded-lg overflow-hidden mb-4">
<div className="bg-gray-800 text-gray-200 px-4 py-2 flex justify-between items-center text-sm">
<span>{language || 'code'}</span>
<button
className="text-gray-400 hover:text-gray-200 transition-colors"
onClick={copyCode}
>
{copied ? "Copied!" : "Copy code"}
</button>
</div>
<pre className="p-4 bg-black text-gray-300 text-xs overflow-x-auto">
<code ref={codeRef} className={`language-${language || 'javascript'}`}>
{codeString}
</code>
</pre>
</div>
);
};
}```
Above also does include my imports.
