wip

metabase · heypoom · Aug 31, 2024 · Sep 16, 2024 · Sep 16, 2024 · Sep 17, 2024
commit aa43eb608fa5a86e5ae3ec074d9190c2dfe24144
diff --git a/frontend/src/metabase/chat/components/Chat.tsx b/frontend/src/metabase/chat/components/Chat.tsx
@@ -23,18 +23,22 @@ import {
 import type Question from "metabase-lib/v1/Question";
 import type { FieldReference } from "metabase-types/api";
 
-import Styles from "./EditVizPage.module.css";
+import Styles from "./Chat.module.css";
 import type { Message, QueryField } from "./types";
 import { getColumnsWithSampleValues, getLLMResponse } from "./utils";
 import { useMessages } from "./hooks/use-messages";
 
 export const Chat = ({
   scrollableStackRef,
-  question,
 }: {
-  question: Question;
   scrollableStackRef: React.RefObject<HTMLDivElement>;
 }) => {
+  const { currentlyViewedQuestion: question, questionData } = (window as any)
+    ._chatHacks;
+
+  console.log("question via hack", question);
+  console.log("questionData via hack", questionData);
+
   const query = question._card.dataset_query;
   const visualizationSettings = question._card.visualization_settings;
 
@@ -50,7 +54,7 @@ export const Chat = ({
 
   const [isAwaitingLLMResponse, setIsAwaitingLLMResponse] = useState(false);
 
-  const data = (window as { questionData?: any }).questionData[0]?.data;
+  const data = questionData[0]?.data;
   const { cols, rows } = data;
   const fieldsWithSampleValues = useMemo(() => {
     return getColumnsWithSampleValues(cols, rows);
@@ -168,7 +172,7 @@ export const Chat = ({
   ]);
 
   return (
-    <>
+    <Box pos="relative">
       <Stack
         spacing="sm"
         p="1rem"
@@ -177,21 +181,30 @@ export const Chat = ({
         justify="flex-end"
       >
         <Messages messages={messages} question={question} />
+        {isAwaitingLLMResponse && (
+          <AIMessageDisplay
+            question={question}
+            message={{
+              author: "llm",
+              content: t`...`,
+            }}
+          ></AIMessageDisplay>
+        )}
       </Stack>
       <Box
-        pos="absolute"
+        pos="sticky"
         w="calc(100% - 1rem)"
         bg="linear-gradient(to bottom, transparent, white 75%)"
         bottom={0}
       >
-        <Box p="1rem" pr=".5rem">
+        <Box p="1rem" pr="0">
           <WriteMessage
             isAwaitingLLMResponse={isAwaitingLLMResponse}
             addMessage={addMessage}
           />
         </Box>
       </Box>
-    </>
+    </Box>
   );
 };
 
@@ -322,7 +335,7 @@ const LoadNewQuestionButton = ({
       <Button
         px="md"
         py="xs"
-        variant="filled"
+        variant="default"
         onClick={() => {
           const nextQuestion = question.setDatasetQuery(
             message.newQuery.dataset_query,
@@ -339,8 +352,10 @@ const LoadNewQuestionButton = ({
 const UserMessageDisplay = ({ message }: { message: Message }) => {
   return (
     <Flex justify="flex-end">
-      <Paper shadow="none" bg="var(--mb-color-border)" maw="15rem" p=".75rem">
-        <Text lh="1.35rem">{message.content}</Text>
+      <Paper shadow="none" bg="var(--mb-color-brand)" maw="15rem" p=".75rem">
+        <Text c="#fff" lh="1.35rem">
+          {message.content}
+        </Text>
       </Paper>
     </Flex>
   );
@@ -369,7 +384,7 @@ const Messages = ({
   question: Question;
 }) => {
   return (
-    <Stack spacing="lg" pb="7rem">
+    <Stack spacing="lg">
       {messages.map((message, index) => (
         <MessageDisplay key={index} message={message} question={question} />
       ))}

diff --git a/frontend/src/metabase/chat/components/ChatWidget.module.css b/frontend/src/metabase/chat/components/ChatWidget.module.css
@@ -3,3 +3,18 @@
   bottom: 1rem;
   right: 1rem;
 }
+.MetabotLogo {
+  width: 2rem;
+}
+.ChatLauncher {
+  border-radius: 100%;
+  cursor: pointer;
+  background-color: var(--mb-color-brand);
+  transition: background-color 0.1s;
+  &:hover {
+    background-color: color-mix(in srgb, var(--mb-color-brand) 90%, white);
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+}
diff --git a/frontend/src/metabase/chat/components/ChatWidget.tsx b/frontend/src/metabase/chat/components/ChatWidget.tsx
@@ -1,23 +1,33 @@
 import { useRef } from "react";
 
-import { MetabotIcon } from "metabase/metabot/components/MetabotMessage/MetabotMessage.styled";
-import { Popover } from "metabase/ui";
+import { Flex, Paper, Popover } from "metabase/ui";
 
 import { Chat } from "./Chat";
 import Styles from "./ChatWidget.module.css";
+import MetabotLogo from "metabase/core/components/MetabotLogo";
 
 export const ChatWidget = () => {
   const scrollableStackRef = useRef<HTMLDivElement | null>(null);
   return (
     <div className={Styles.ChatWidget}>
-      <Popover>
+      <Popover position="bottom-end">
         <Popover.Target>
-          <MetabotIcon />
+          <Flex
+            justify="center"
+            align="center"
+            w="3rem"
+            h="3rem"
+            className={Styles.ChatLauncher}
+          >
+            <MetabotLogo className={Styles.MetabotLogo} />
+          </Flex>
         </Popover.Target>
         <Popover.Dropdown>
-          <div ref={scrollableStackRef}>
-            <Chat scrollableStackRef={scrollableStackRef} />
-          </div>
+          <Paper mah="70dvh" maw="20rem">
+            <div ref={scrollableStackRef}>
+              <Chat scrollableStackRef={scrollableStackRef} />
+            </div>
+          </Paper>
         </Popover.Dropdown>
       </Popover>
     </div>

diff --git a/frontend/src/metabase/query_builder/components/view/View.jsx b/frontend/src/metabase/query_builder/components/view/View.jsx
@@ -66,6 +66,10 @@ class View extends Component {
       onCloseChartType,
     } = this.props;
 
+    // HACK: This makes the currently viewed question available to the ChatWidget
+    window._chatHacks ||= {};
+    window._chatHacks.currentlyViewedQuestion = this.props.question;
+
     if (isShowingChartSettingsSidebar) {
       const {
         question,

diff --git a/...metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/hooks/useMessages.tsx b/...metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/hooks/useMessages.tsx
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/types.ts b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/types.ts
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/utils.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/utils.tsx
diff --git a/frontend/src/metabase/query_builder/selectors.js b/frontend/src/metabase/query_builder/selectors.js
@@ -697,9 +697,10 @@ export const getRawSeries = createSelector(
       datasetQuery: lastRunDatasetQuery,
     });
 
-    // HACK: expose data to be send to ai proxy/flask
-    window.questionData = rawSeries;
-    window.queryResult = queryResult;
+    // HACK: Make data available to ChatWidget
+    window._chatHacks ||= {};
+    window._chatHacks.questionData = rawSeries;
+    window._chatHacks.queryResult = queryResult;
 
     if (isShowingRawTable && rawSeries?.length > 0) {
       const [{ card, data }] = rawSeries;