working sandpack

src/components/chat/ChatInput.tsx

@@ -30,7 +30,6 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
     if (textarea) {
       textarea.style.height = "0px";
       const scrollHeight = textarea.scrollHeight;
-      console.log("scrollHeight", scrollHeight);
       textarea.style.height = `${scrollHeight + 4}px`;
     }
   };

src/components/chat/ChatMessage.tsx

@@ -8,73 +8,67 @@ interface ChatMessageProps {
   message: Message;
 }
 
-const ChatMessage = memo(
-  ({ message }: ChatMessageProps) => {
-    return (
+const ChatMessage = ({ message }: ChatMessageProps) => {
+  const { isStreaming } = useStreamChat();
+  return (
+    <div
+      className={`flex ${
+        message.role === "assistant" ? "justify-start" : "justify-end"
+      }`}
+    >
       <div
-        className={`flex ${
-          message.role === "assistant" ? "justify-start" : "justify-end"
+        className={`rounded-lg p-2 mt-2 ${
+          message.role === "assistant"
+            ? "w-full max-w-3xl mx-auto"
+            : "bg-(--sidebar-accent)"
         }`}
       >
-        <div
-          className={`rounded-lg p-2 mt-2 ${
-            message.role === "assistant"
-              ? "w-full max-w-3xl mx-auto"
-              : "bg-(--sidebar-accent)"
-          }`}
-        >
-          {message.role === "assistant" && !message.content ? (
-            <div className="flex h-6 items-center space-x-2 p-2">
-              <motion.div
-                className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
-                animate={{ y: [0, -12, 0] }}
-                transition={{
-                  repeat: Number.POSITIVE_INFINITY,
-                  duration: 0.4,
-                  ease: "easeOut",
-                  repeatDelay: 1.2,
-                }}
-              />
-              <motion.div
-                className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
-                animate={{ y: [0, -12, 0] }}
-                transition={{
-                  repeat: Number.POSITIVE_INFINITY,
-                  duration: 0.4,
-                  ease: "easeOut",
-                  delay: 0.4,
-                  repeatDelay: 1.2,
-                }}
-              />
-              <motion.div
-                className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
-                animate={{ y: [0, -12, 0] }}
-                transition={{
-                  repeat: Number.POSITIVE_INFINITY,
-                  duration: 0.4,
-                  ease: "easeOut",
-                  delay: 0.8,
-                  repeatDelay: 1.2,
-                }}
-              />
-            </div>
-          ) : (
-            <div
-              className="prose dark:prose-invert prose-headings:mb-2 prose-p:my-1 prose-pre:my-0 max-w-none"
-              suppressHydrationWarning
-            >
-              <DyadMarkdownParser content={message.content} />
-            </div>
-          )}
-        </div>
+        {message.role === "assistant" && !message.content && isStreaming ? (
+          <div className="flex h-6 items-center space-x-2 p-2">
+            <motion.div
+              className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
+              animate={{ y: [0, -12, 0] }}
+              transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 0.4,
+                ease: "easeOut",
+                repeatDelay: 1.2,
+              }}
+            />
+            <motion.div
+              className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
+              animate={{ y: [0, -12, 0] }}
+              transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 0.4,
+                ease: "easeOut",
+                delay: 0.4,
+                repeatDelay: 1.2,
+              }}
+            />
+            <motion.div
+              className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
+              animate={{ y: [0, -12, 0] }}
+              transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 0.4,
+                ease: "easeOut",
+                delay: 0.8,
+                repeatDelay: 1.2,
+              }}
+            />
+          </div>
+        ) : (
+          <div
+            className="prose dark:prose-invert prose-headings:mb-2 prose-p:my-1 prose-pre:my-0 max-w-none"
+            suppressHydrationWarning
+          >
+            <DyadMarkdownParser content={message.content} />
+          </div>
+        )}
       </div>
-    );
-  },
-  (prevProps, nextProps) => {
-    return prevProps.message.content === nextProps.message.content;
-  }
-);
-
-ChatMessage.displayName = "ChatMessage";
+    </div>
+  );
+};
 
 export default ChatMessage;

src/components/chat/DyadAddDependency.tsx

@@ -28,7 +28,6 @@ export const DyadAddDependency: React.FC<DyadAddDependencyProps> = ({
 }) => {
   // Extract package attribute from the node if available
   const packages = node?.properties?.packages?.split(" ") || "";
-  console.log("packages", packages);
   const [isInstalling, setIsInstalling] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const selectedChatId = useAtomValue(selectedChatIdAtom);