change semantics

Update README deployment steps and add deploy:secrets script to package.json

update local inference script and README

update lockfile

reconfigure package scripts for development

update test execution

pass server tests

Update README with revised Bun commands and workspace details

remove pnpm package manager designator

create bun server

packages/client/src/components/chat/messages/MessageBubble.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import MessageRenderer from "./ChatMessageContent";
+import { observer } from "mobx-react-lite";
+import MessageEditor from "./MessageEditorComponent";
+import UserMessageTools from "./UserMessageTools";
+import clientChatStore from "../../../stores/ClientChatStore";
+import UserOptionsStore from "../../../stores/UserOptionsStore";
+import MotionBox from "./MotionBox";
+
+
+
+const LoadingDots = () => {
+  return (
+      <Flex>
+        {[0, 1, 2].map((i) => (
+            <MotionBox
+                key={i}
+                width="8px"
+                height="8px"
+                borderRadius="50%"
+                backgroundColor="text.primary"
+                margin="0 4px"
+                animate={{
+                  scale: [1, 1.2, 1],
+                  opacity: [0.5, 1, 0.5],
+                }}
+                transition={{
+                  duration: 1,
+                  repeat: Infinity,
+                  delay: i * 0.2,
+                }}
+            />
+        ))}
+      </Flex>
+  );
+}
+
+function renderMessage(msg: any) {
+  if (msg.role === "user") {
+    return (
+      <Text as="p" fontSize="sm" lineHeight="short" color="text.primary">
+        {msg.content}
+      </Text>
+    );
+  }
+  return <MessageRenderer content={msg.content} />;
+}
+
+const MessageBubble = observer(({ msg, scrollRef }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const isUser = msg.role === "user";
+  const senderName = isUser ? "You" : "Geoff's AI";
+  const isLoading = !msg.content || !(msg.content.trim().length > 0);
+  const messageRef = useRef();
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+  };
+
+  useEffect(() => {
+    if (clientChatStore.items.length > 0 && clientChatStore.isLoading && UserOptionsStore.followModeEnabled) { // Refine condition
+      scrollRef.current?.scrollTo({
+        top: scrollRef.current.scrollHeight,
+        behavior: "auto",
+      });
+    }
+  });
+
+  return (
+    <Flex
+      flexDirection="column"
+      alignItems={isUser ? "flex-end" : "flex-start"}
+      role="listitem"
+      flex={0}
+      aria-label={`Message from ${senderName}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Text
+        fontSize="xs"
+        color="text.tertiary"
+        textAlign={isUser ? "right" : "left"}
+        alignSelf={isUser ? "flex-end" : "flex-start"}
+        mb={1}
+      >
+        {senderName}
+      </Text>
+
+      <MotionBox
+        minW={{ base: "99%", sm: "99%", lg: isUser ? "55%" : "60%" }}
+        maxW={{ base: "99%", sm: "99%", lg: isUser ? "65%" : "65%" }}
+        p={3}
+        borderRadius="1.5em"
+        bg={isUser ? "#0A84FF" : "#3A3A3C"}
+        color="text.primary"
+        textAlign="left"
+        boxShadow="0 2px 4px rgba(0, 0, 0, 0.1)"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        overflow="hidden"
+        wordBreak="break-word"
+        whiteSpace="pre-wrap"
+      >
+        <Flex justifyContent="space-between" alignItems="center">
+          <Box
+            flex="1"
+            overflowWrap="break-word"
+            whiteSpace="pre-wrap"
+            ref={messageRef}
+            sx={{
+              "pre, code": {
+                maxWidth: "100%",
+                whiteSpace: "pre-wrap",
+                overflowX: "auto",
+              },
+            }}
+          >
+            {isEditing ? (
+              <MessageEditor message={msg} onCancel={handleCancelEdit} />
+            ) : isLoading ? (
+              <LoadingDots />
+            ) : (
+              renderMessage(msg)
+            )}
+          </Box>
+          {isUser && (
+            <Box
+              ml={2}
+              width="32px"
+              height="32px"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {isHovered && !isEditing && (
+                <UserMessageTools message={msg} onEdit={handleEdit} />
+              )}
+            </Box>
+          )}
+        </Flex>
+      </MotionBox>
+    </Flex>
+  );
+});
+
+export default MessageBubble;