app/chore: interactiveness improvements & enable GPU pipeline

.github/workflows/deploy-app.yaml

@@ -56,11 +56,15 @@ jobs:
           token: ${{ secrets.CHARLIE_XIAO_PAT }}
           labels: app, ci/cd
           title: "cd: updates of app deployment"
-          commit-message: "cd: updates of app deployment"
           author: "github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>"
           committer: "github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>"
+          commit-message: |
+            cd: updates of app deployment
+
+            Co-authored-by: ${{ github.actor }} <${{ github.actor_id }}+${{ github.actor }}@users.noreply.github.com>
           body: |
             This PR was triggered by @${{ github.actor }} in ${{ github.workflow }}.
+
             Check the workflow run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
 
       - name: Enable auto-merge

.github/workflows/deploy-chromadb.yaml

@@ -65,11 +65,15 @@ jobs:
           token: ${{ secrets.CHARLIE_XIAO_PAT }}
           labels: app, ci/cd
           title: "cd: updates of chromadb deployment"
-          commit-message: "cd: updates of chromadb deployment"
           author: "github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>"
           committer: "github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>"
+          commit-message: |
+            cd: updates of app deployment
+
+            Co-authored-by: ${{ github.actor }} <${{ github.actor_id }}+${{ github.actor }}@users.noreply.github.com>
           body: |
             This PR was triggered by @${{ github.actor }} in ${{ github.workflow }}.
+
             Check the workflow run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
 
       - name: Enable auto-merge

.github/workflows/deploy-pipeline.yaml

@@ -56,11 +56,15 @@ jobs:
           token: ${{ secrets.CHARLIE_XIAO_PAT }}
           labels: ci/cd
           title: "cd: updates of pipeline deployment"
-          commit-message: "cd: updates of pipeline deployment"
           author: "github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>"
           committer: "github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>"
+          commit-message: |
+            cd: updates of app deployment
+
+            Co-authored-by: ${{ github.actor }} <${{ github.actor_id }}+${{ github.actor }}@users.noreply.github.com>
           body: |
             This PR was triggered by @${{ github.actor }} in ${{ github.workflow }}.
+
             Check the workflow run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
 
       - name: Enable auto-merge

app/frontend/src/App.tsx

@@ -30,7 +30,7 @@ export const App = () => {
   );
   const [isSidebarPopoverVisible, setIsSidebarPopoverVisible] =
     useState<boolean>(false);
-  const [model, setModel] = useState<ModelType>("6894888983713546240");
+  const [model, setModel] = useState<ModelType>("gemini-1.5-flash-001");
   const [currentTab, setCurrentTab] = useState<string>("default");
   const [messagesMapping, setMessagesMapping] = useState<
     Map<string, ChatDisplay[]>

app/frontend/src/components/ChatInput.tsx

@@ -1,7 +1,7 @@
 /**
  * @file ChatInput.tsx
  *
- * TODO(!)
+ * The chat input box component.
  */
 
 import { Box, Flex, TextArea } from "@radix-ui/themes";

app/frontend/src/components/ChatPanel.tsx

@@ -39,6 +39,7 @@ import { FCDeleteChatButton } from "./FCDeleteChatButton";
 import { FCScrollButtons } from "./FCScrollButtons";
 import { FCModelSelector } from "./FCModelSelector";
 import { RadixMarkdown } from "./RadixMarkdown";
+import { toast } from "sonner";
 
 interface ChatPanelProps {
   tab: string;
@@ -117,9 +118,18 @@ export const ChatPanel = ({
     <FCClearHistoryButton
       key="clear-history-button"
       disabled={messages.length === 0 || loading}
-      onClick={() => setMessages(() => [])}
+      onClick={() => {
+        setMessages(() => []);
+        toast.success("Chat history cleared");
+      }}
+    />,
+    <FCDeleteChatButton
+      key="delete-chat-button"
+      onClick={() => {
+        deleteTab();
+        toast.success(`Chat deleted: ${tab}`);
+      }}
     />,
-    <FCDeleteChatButton key="delete-chat-button" onClick={deleteTab} />,
     <FCScrollButtons key="scroll-buttons" containerRef={chatPortRef} />,
   ];
 

app/frontend/src/components/FCModelSelector.tsx

@@ -26,12 +26,12 @@ export const FCModelSelector = ({ model, setModel }: FCModelSelectorProps) => {
         css={{ margin: "0 var(--space-1)" }}
       ></Select.Trigger>
       <Select.Content position="popper" sideOffset={5}>
-        <Select.Item key="6894888983713546240" value="6894888983713546240">
-          VeritasTrial
-        </Select.Item>
         <Select.Item key="gemini-1.5-flash-001" value="gemini-1.5-flash-001">
           Gemini 1.5 Flash
         </Select.Item>
+        <Select.Item key="6894888983713546240" value="6894888983713546240">
+          6894888983713546240
+        </Select.Item>
       </Select.Content>
     </Select.Root>
   );

app/frontend/src/components/Header.tsx

@@ -4,7 +4,14 @@
  * The header component in the body.
  */
 
-import { Box, Flex, Heading, IconButton, Tooltip } from "@radix-ui/themes";
+import {
+  Box,
+  Flex,
+  Heading,
+  IconButton,
+  Link,
+  Tooltip,
+} from "@radix-ui/themes";
 import { Dispatch, SetStateAction } from "react";
 import { MdDarkMode, MdLightMode, MdMenu, MdMenuOpen } from "react-icons/md";
 import { FaGithub, FaUniversity } from "react-icons/fa";
@@ -38,7 +45,11 @@ export const Header = ({
   return (
     <Flex justify="between" align="center" pr="3">
       <Box ml="2">
-        <Heading size="4">VeritasTrial</Heading>
+        <Heading size="4">
+          <Link href="/" color="gray" highContrast>
+            VeritasTrial
+          </Link>
+        </Heading>
       </Box>
       <Flex align="center" gap="4">
         {!isSidebarVisible && (

app/frontend/src/components/MessageRetrieved.tsx

@@ -10,6 +10,7 @@ import { ExternalLink } from "./ExternalLink";
 import { MdChat } from "react-icons/md";
 import { CTGOV_URL } from "../consts";
 import { MetaInfo } from "../types";
+import { toast } from "sonner";
 
 interface MessageRetrievedProps {
   ids: string[];
@@ -41,7 +42,10 @@ export const MessageRetrieved = ({
                 <IconButton
                   size="1"
                   variant="ghost"
-                  onClick={() => switchTab(id, { title: titles[index] })}
+                  onClick={() => {
+                    switchTab(id, { title: titles[index] });
+                    toast.success(`Chat started: ${id}`);
+                  }}
                 >
                   <MdChat />
                 </IconButton>

app/frontend/src/components/RetrievePanel.tsx

@@ -6,7 +6,7 @@
  * calling backend API), and displaying the results.
  */
 
-import { Flex } from "@radix-ui/themes";
+import { Button, Flex } from "@radix-ui/themes";
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
 import { MdFilterList } from "react-icons/md";
 import { callRetrieve } from "../api";
@@ -28,6 +28,7 @@ import { FCTopKSelector } from "./FCTopKSelector";
 import { FCScrollButtons } from "./FCScrollButtons";
 import { RadixMarkdown } from "./RadixMarkdown";
 import { RetrievePanelFilters } from "./RetrievePanelFilters";
+import { toast } from "sonner";
 
 interface RetrievalPanelProps {
   messages: ChatDisplay[];
@@ -81,7 +82,10 @@ export const RetrievePanel = ({
     <FCClearHistoryButton
       key="clear-history-button"
       disabled={messages.length === 0 || loading}
-      onClick={() => setMessages(() => [])}
+      onClick={() => {
+        setMessages(() => []);
+        toast.success("Retrieval history cleared");
+      }}
     />,
     <FCScrollButtons key="scroll-buttons" containerRef={chatPortRef} />,
   ];
@@ -114,6 +118,20 @@ export const RetrievePanel = ({
           onToggleHint={() => scrollToBottom(chatPortRef)}
           hintText="Retrieval filters"
           HintIcon={MdFilterList}
+          rightHintComponent={
+            <Button
+              size="1"
+              variant="ghost"
+              css={{ fontWeight: "var(--font-weight-medium)" }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setFilters({});
+                toast.success("Retrieval filter reset");
+              }}
+            >
+              Reset filters
+            </Button>
+          }
         >
           <RetrievePanelFilters filters={filters} setFilters={setFilters} />
         </ChatCollapsibleHint>

app/frontend/src/components/RetrievePanelFilterAgeRange.tsx

@@ -27,7 +27,7 @@ export const RetrievePanelFilterAgeRange = ({
   };
 
   return (
-    <Flex align="center" gapX="3" pl="1">
+    <Flex align="center" gapX="3">
       <Slider
         min={0}
         max={100}
@@ -36,7 +36,11 @@ export const RetrievePanelFilterAgeRange = ({
         value={value}
         onValueChange={handler}
         orientation="horizontal"
-        css={{ width: "200px", opacity: 0.8 }}
+        css={{
+          width: "150px",
+          opacity: 0.8,
+          "& .rt-SliderThumb::after": { inset: 0 },
+        }}
       />
       <Text size="2">
         {value[0]}~{value[1]} years

app/frontend/src/components/RetrievePanelFilterLastUpdateDatePosted.tsx

@@ -44,15 +44,9 @@ export const RetrievePanelFilterLastUpdateDatePosted = ({
       lastUpdateDatePosted: [fromDate, toDate],
     }));
   };
-  const handleReset = () => {
-    setFilters((prevFilters) => ({
-      ...prevFilters,
-      lastUpdateDatePosted: undefined,
-    }));
-  };
 
   return (
-    <Flex direction="row" align="center" gap="4" width="100%">
+    <Flex align="center" gap="2">
       <Popover.Root>
         <Popover.Trigger>
           <Flex gap="2" height="var(--line-height-2)" asChild>
@@ -75,12 +69,14 @@ export const RetrievePanelFilterLastUpdateDatePosted = ({
       </Popover.Root>
       <Button
         size="1"
-        variant="ghost"
-        onClick={handleReset}
-        style={{
-          padding: "4px 12px",
-          borderRadius: "4px",
-          fontWeight: "bold",
+        variant="outline"
+        disabled={range === undefined}
+        css={{ height: "var(--line-height-2)", padding: "0 var(--space-2)" }}
+        onClick={() => {
+          setFilters((prevFilters) => ({
+            ...prevFilters,
+            lastUpdateDatePosted: undefined,
+          }));
         }}
       >
         Reset

app/frontend/src/components/RetrievePanelFilterResultsDatePosted.tsx

@@ -44,15 +44,9 @@ export const RetrievePanelFilterResultsDatePosted = ({
       resultsDatePosted: [fromDate, toDate],
     }));
   };
-  const handleReset = () => {
-    setFilters((prevFilters) => ({
-      ...prevFilters,
-      resultsDatePosted: undefined,
-    }));
-  };
 
   return (
-    <Flex direction="row" align="center" gap="4" width="100%">
+    <Flex align="center" gap="2">
       <Popover.Root>
         <Popover.Trigger>
           <Flex gap="2" height="var(--line-height-2)" asChild>
@@ -75,12 +69,14 @@ export const RetrievePanelFilterResultsDatePosted = ({
       </Popover.Root>
       <Button
         size="1"
-        variant="ghost"
-        onClick={handleReset}
-        style={{
-          padding: "4px 12px",
-          borderRadius: "4px",
-          fontWeight: "bold",
+        variant="outline"
+        disabled={range === undefined}
+        css={{ height: "var(--line-height-2)", padding: "0 var(--space-2)" }}
+        onClick={() => {
+          setFilters((prevFilters) => ({
+            ...prevFilters,
+            resultsDatePosted: undefined,
+          }));
         }}
       >
         Reset

deploy/pipeline/pipeline.py

@@ -48,12 +48,13 @@ def embedding_model():
 @dsl.pipeline
 def pipeline():
     data_pipeline_task = data_pipeline().set_display_name("Data pipeline")
+
+    # NOTE: This requires GPU quota for custom Vertex AI training jobs
     embedding_model_task = (
         embedding_model()
         .set_display_name("Embedding model")
-        # TODO: Use GPU when quota is available
-        # .set_accelerator_type("NVIDIA_TESLA_T4")
-        # .set_accelerator_limit(1)
+        .set_accelerator_type("NVIDIA_TESLA_T4")
+        .set_accelerator_limit(1)
         .after(data_pipeline_task)
     )