Fix styles

Author: kylecarbs

src/components/Messages/MessageWindow.tsx

@@ -48,24 +48,26 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
     [timestamp]
   );
 
-  // We do not want to display these on every message, otherwise it spams the UI
-  // with buttons and timestamps
-  const showMetaRow = useMemo(() => {
+  const isLastPartOfMessage = useMemo(() => {
     if ("isLastPartOfMessage" in message && message.isLastPartOfMessage && !message.isPartial) {
       return true;
     }
-    if (variant === "user") {
-      return true;
-    }
     return false;
   }, [message]);
 
+  // We do not want to display these on every message, otherwise it spams the UI
+  // with buttons and timestamps
+  const showMetaRow = useMemo(() => {
+    return variant === "user" || isLastPartOfMessage;
+  }, [variant, isLastPartOfMessage]);
+
   return (
     <div
       className={cn(
-        "my-4 flex w-full flex-col relative isolate w-fit",
+        "mt-4 mb-1 flex w-full flex-col relative isolate w-fit",
         variant === "user" && "ml-auto",
-        variant === "assistant" && "text-white"
+        variant === "assistant" && "text-white",
+        isLastPartOfMessage && "mb-4"        
       )}
       data-message-block
     >

src/components/tools/shared/ToolPrimitives.tsx

@@ -13,7 +13,7 @@ interface ToolContainerProps extends React.HTMLAttributes<HTMLDivElement> {
 export const ToolContainer: React.FC<ToolContainerProps> = ({ expanded, className, ...props }) => (
   <div
     className={cn(
-      "my-2 bg-gray-overlay rounded font-mono text-[11px] transition-all duration-200 max-w-[680px]",
+      "my-2 rounded font-mono text-[11px] transition-all duration-200 max-w-[680px]",
       "[container-type:inline-size]",
       expanded ? "py-2 px-3" : "py-1 px-3",
       className