Tweaked copy button placement

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)",

frontend/src/AutoScroll.tsx

@@ -53,15 +53,15 @@ const useAutoScrollToBottom = (
           behavior: smooth ? 'smooth' : 'auto'
         });
       } else {
-        console.log('Not scrolling', {
+        // console.log('Not scrolling', {
-          isNearBottom,
+        //   isNearBottom,
-          isUserScrollingUp,
+        //   isUserScrollingUp,
-          scrollHeight: container.scrollHeight,
+        //   scrollHeight: container.scrollHeight,
-          scrollTop: container.scrollTop,
+        //   scrollTop: container.scrollTop,
-          clientHeight: container.clientHeight,
+        //   clientHeight: container.clientHeight,
-          threshold,
+        //   threshold,
-          delta: container.scrollHeight - container.scrollTop - container.clientHeight
+        //   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>;
 };
 

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
+}

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,

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 }}>
+      <CardContent ref={textFieldRef} sx={{ position: "relative", display: "flex", flexDirection: "column", overflowX: "auto", m: 0, p: 0, paddingBottom: '0px !important' }}>
-        <CopyBubble content={message?.content} />
-
         {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 }} />

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;
+}

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;