From 852533534531b91c6e30e18cfcc99c9520bb5b56 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Sat, 26 Apr 2025 16:36:51 -0700
Subject: [PATCH] Tweaked copy button placement

---
 frontend/src/App.tsx              |  3 +--
 frontend/src/AutoScroll.tsx       | 24 +++++++++++-----------
 frontend/src/BackstoryTab.tsx     | 28 ++++++++++++++++++++++++++
 frontend/src/CopyBubble.tsx       |  3 ---
 frontend/src/Message.tsx          | 33 ++++++++++++++++++-------------
 frontend/src/VectorVisualizer.css | 19 ++++++++++++++++++
 frontend/src/VectorVisualizer.tsx |  5 +++++
 7 files changed, 85 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/BackstoryTab.tsx
 create mode 100644 frontend/src/VectorVisualizer.css

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 954349d..9da6ed2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -112,14 +112,12 @@ const App = () => {
     fetchAbout();
   }, [about, setAbout])
 
-
   const handleSubmitChatQuery = (query: string) => {
     console.log(`handleSubmitChatQuery: ${query} -- `, chatRef.current ? ' sending' : 'no handler');
     chatRef.current?.submitQuery(query);
     setActiveTab(0);
   };
 
-
   const tabs: TabProps[] = useMemo(() => {
     const backstoryPreamble: MessageList = [
       {
@@ -221,6 +219,7 @@ const App = () => {
         path: "about",
         children: (
           <Scrollable
+            autoscroll={false}
             sx={{
               maxWidth: "1024px",
               height: "calc(100vh - 72px)",
diff --git a/frontend/src/AutoScroll.tsx b/frontend/src/AutoScroll.tsx
index cdb097e..44d5de5 100644
--- a/frontend/src/AutoScroll.tsx
+++ b/frontend/src/AutoScroll.tsx
@@ -53,15 +53,15 @@ const useAutoScrollToBottom = (
           behavior: smooth ? 'smooth' : 'auto'
         });
       } else {
-        console.log('Not scrolling', {
-          isNearBottom,
-          isUserScrollingUp,
-          scrollHeight: container.scrollHeight,
-          scrollTop: container.scrollTop,
-          clientHeight: container.clientHeight,
-          threshold,
-          delta: container.scrollHeight - container.scrollTop - container.clientHeight
-        });
+        // console.log('Not scrolling', {
+        //   isNearBottom,
+        //   isUserScrollingUp,
+        //   scrollHeight: container.scrollHeight,
+        //   scrollTop: container.scrollTop,
+        //   clientHeight: container.clientHeight,
+        //   threshold,
+        //   delta: container.scrollHeight - container.scrollTop - container.clientHeight
+        // });
       }
     };
     
@@ -130,9 +130,11 @@ const useAutoScrollToBottom = (
 interface ScrollableProps {
   children?: React.ReactNode;
   sx?: SxProps<Theme>,
+  autoscroll?: boolean,
 }
 
-const Scrollable = ({ sx, children }: ScrollableProps) => {
+const Scrollable = (props: ScrollableProps) => {
+  const { sx, children, autoscroll } = props;
   const scrollRef = useAutoScrollToBottom();
   return <Box
     sx={{
@@ -143,7 +145,7 @@ const Scrollable = ({ sx, children }: ScrollableProps) => {
       backgroundColor: "#F5F5F5",
       ...sx
     }}
-    ref={scrollRef}
+    ref={(autoscroll !== undefined && autoscroll !== false) ? scrollRef : undefined}
   >{children}</Box>;
 };
 
diff --git a/frontend/src/BackstoryTab.tsx b/frontend/src/BackstoryTab.tsx
new file mode 100644
index 0000000..9afb29b
--- /dev/null
+++ b/frontend/src/BackstoryTab.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material';
+
+interface BackstoryTabProps {
+  children?: React.ReactNode;
+  sx?: SxProps<Theme>,
+  className?: string,
+  active: boolean,
+}
+
+function BackstoryTab(props: BackstoryTabProps) {
+  const { className, active, children, sx, ...other } = props;
+
+  return (
+    <Box
+      className={ className || "BackstoryTab"}
+      sx={{ "display": active ? "flex": "none", ...sx }}
+      {...other}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export {
+  BackstoryTab
+}
\ No newline at end of file
diff --git a/frontend/src/CopyBubble.tsx b/frontend/src/CopyBubble.tsx
index d08ef66..9c1f7bb 100644
--- a/frontend/src/CopyBubble.tsx
+++ b/frontend/src/CopyBubble.tsx
@@ -32,9 +32,6 @@ return (
     <IconButton
       onClick={handleCopy}
       sx={{
-        position: 'absolute',
-        top: 0,
-        right: 0,
         width: 24,
         height: 24,
         opacity: 0.75,
diff --git a/frontend/src/Message.tsx b/frontend/src/Message.tsx
index f0a0524..a3738af 100644
--- a/frontend/src/Message.tsx
+++ b/frontend/src/Message.tsx
@@ -255,9 +255,7 @@ const Message = (props: MessageProps) => {
         // overflowX: "auto"
         ...sx,
       }}>
-      <CardContent ref={textFieldRef} sx={{ position: "relative", display: "flex", flexDirection: "column", overflowX: "auto", m: 0, p: 0 }}>
-        <CopyBubble content={message?.content} />
-
+      <CardContent ref={textFieldRef} sx={{ position: "relative", display: "flex", flexDirection: "column", overflowX: "auto", m: 0, p: 0, paddingBottom: '0px !important' }}>
         {message.role !== 'user' ?
           <StyledMarkdown
             className="MessageContent"
@@ -273,18 +271,25 @@ const Message = (props: MessageProps) => {
           </Typography>
         }
       </CardContent>
+      <CardActions disableSpacing sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+        <CopyBubble content={message?.content} />
+        {message.metadata && (
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <Button variant="text" onClick={handleExpandClick} sx={{ color: "darkgrey", p: 1 }}>
+              LLM information for this query
+            </Button>
+            <ExpandMore
+              expand={expanded}
+              onClick={handleExpandClick}
+              aria-expanded={expanded}
+              aria-label="show more"
+            >
+              <ExpandMoreIcon />
+            </ExpandMore>
+          </Box>
+        )}
+      </CardActions>
       {message.metadata && <>
-        <CardActions disableSpacing sx={{ justifySelf: "flex-end", alignSelf: "flex-end" }}>
-          <Button variant="text" onClick={handleExpandClick} sx={{ color: "darkgrey", p: 1, flexGrow: 0, justifySelf: "flex-end" }}>LLM information for this query</Button>
-          <ExpandMore
-            expand={expanded}
-            onClick={handleExpandClick}
-            aria-expanded={expanded}
-            aria-label="show more"
-          >
-            <ExpandMoreIcon />
-          </ExpandMore>
-        </CardActions>
         <Collapse in={expanded} timeout="auto" unmountOnExit>
           <CardContent>
             <MessageMeta {...{ ...message.metadata, sessionId, connectionBase, setSnack }} />
diff --git a/frontend/src/VectorVisualizer.css b/frontend/src/VectorVisualizer.css
new file mode 100644
index 0000000..21c2296
--- /dev/null
+++ b/frontend/src/VectorVisualizer.css
@@ -0,0 +1,19 @@
+.js-plotly-plot {
+  width: 100%;
+  height: 100%;
+}
+
+.js-plotly-plot .plotly  {
+  width: 100%;
+  height: 100%;
+}
+
+.js-plotly-plot .plotly .main-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.plotly .svg-container {
+  width: 100% !important;
+  height: 100% !important;
+}
\ No newline at end of file
diff --git a/frontend/src/VectorVisualizer.tsx b/frontend/src/VectorVisualizer.tsx
index 63b4972..31f4f91 100644
--- a/frontend/src/VectorVisualizer.tsx
+++ b/frontend/src/VectorVisualizer.tsx
@@ -142,6 +142,11 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
     fetchCollection();
   }, [result, setResult, connectionBase, setSnack, sessionId, view2D])  
   
+  /* Trigger a resize event to force Plotly to rescale */
+  useEffect(() => {
+    window.dispatchEvent(new Event('resize'));
+  }, [])
+
   useEffect(() => {
     if (!result || !result.embeddings) return;
     if (result.embeddings.length === 0) return;