{/* Scroll to bottom button - appears above the MessageInput when user has scrolled up */}
- {(manuallyScrolledUp && !isAtBottom) && (
+ {manuallyScrolledUp && !isAtBottom && (
{
@@ -198,8 +198,18 @@ const Chat = ({
className="bg-[#24A0ED] text-white hover:bg-opacity-85 transition duration-100 rounded-full px-4 py-2 shadow-lg flex items-center justify-center"
aria-label="Scroll to bottom"
>
-
-
+
Scroll to bottom
diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index 714087d..abb220a 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -351,7 +351,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
suggestions?: string[];
},
) => {
- setScrollTrigger(x => x === 0 ? -1 : 0);
+ setScrollTrigger((x) => (x === 0 ? -1 : 0));
// Special case: If we're just updating an existing message with suggestions
if (options?.suggestions && options.messageId) {
setMessages((prev) =>
@@ -390,7 +390,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
);
setChatHistory(messageChatHistory);
- setScrollTrigger(prev => prev + 1);
+ setScrollTrigger((prev) => prev + 1);
}
const messageId =
@@ -429,7 +429,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
},
]);
added = true;
- setScrollTrigger(prev => prev + 1);
+ setScrollTrigger((prev) => prev + 1);
}
}
@@ -463,7 +463,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
);
recievedMessage += data.data;
- setScrollTrigger(prev => prev + 1);
+ setScrollTrigger((prev) => prev + 1);
}
if (data.type === 'messageEnd') {
@@ -488,7 +488,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
);
setLoading(false);
- setScrollTrigger(prev => prev + 1);
+ setScrollTrigger((prev) => prev + 1);
const lastMsg = messagesRef.current[messagesRef.current.length - 1];
diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
index d8158ea..6de138a 100644
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.tsx
@@ -13,6 +13,8 @@ import {
Layers3,
Plus,
Sparkles,
+ Copy as CopyIcon,
+ CheckCheck,
} from 'lucide-react';
import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
import Copy from './MessageActions/Copy';
@@ -23,11 +25,79 @@ import SearchImages from './SearchImages';
import SearchVideos from './SearchVideos';
import { useSpeech } from 'react-text-to-speech';
import ThinkBox from './ThinkBox';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
const ThinkTagProcessor = ({ children }: { children: React.ReactNode }) => {
return
;
};
+const CodeBlock = ({
+ className,
+ children,
+}: {
+ className?: string;
+ children: React.ReactNode;
+}) => {
+ // Extract language from className (format could be "language-javascript" or "lang-javascript")
+ let language = '';
+ if (className) {
+ if (className.startsWith('language-')) {
+ language = className.replace('language-', '');
+ } else if (className.startsWith('lang-')) {
+ language = className.replace('lang-', '');
+ }
+ }
+
+ const content = children as string;
+
+ const [isCopied, setIsCopied] = useState(false);
+
+ const handleCopyCode = () => {
+ navigator.clipboard.writeText(content);
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), 2000);
+ };
+
+ console.log('Code block language:', language, 'Class name:', className); // For debugging
+
+ return (
+
+
+ {language}
+
+ {isCopied ? (
+
+
+
1}
+ useInlineStyles={true}
+ PreTag="div"
+ >
+ {content}
+
+
+ );
+};
+
const MessageBox = ({
message,
messageIndex,
@@ -157,6 +227,24 @@ const MessageBox = ({
think: {
component: ThinkTagProcessor,
},
+ code: {
+ component: ({ className, children }) => {
+ // Check if it's an inline code block or a fenced code block
+ if (className) {
+ // This is a fenced code block (```code```)
+ return
{children} ;
+ }
+ // This is an inline code block (`code`)
+ return (
+
+ {children}
+
+ );
+ },
+ },
+ pre: {
+ component: ({ children }) => children,
+ },
},
};
@@ -212,8 +300,10 @@ const MessageBox = ({