feat(chat): ai chat with workspace (#91)

* initial cut for chat

* add formatting and allow chatId to be present in the path

* Add chat, page refresh on it, reditect if invalid id and bookmarks

* rebase with main

* remove type errors

* make the sidebar in search fixed and improve border for search results

* Improve styles of search and make searchbar component

* add search query params and use it to get search results

* remove type errors

Author: zereraz

frontend/src/api.ts

@@ -1,6 +1,6 @@
 import { hc } from "hono/client"
 import type { WebSocketApp, AppType } from "shared/types"
-export const api = hc<AppType>("/")
+export const api = hc<AppType>("/api/v1")
 
 export const wsClient = hc<WebSocketApp>(
   import.meta.env.VITE_WS_BASE_URL || "http://localhost:3000",

frontend/src/assets/assistant-logo.svg

@@ -2,6 +2,7 @@ import { Apps, DriveEntity, Entity, GooglePeopleEntity } from "shared/types"
 import { Filter, Groups } from "@/types"
 import { getIcon } from "@/lib/common"
 import allFilter from "@/assets/allFilter.svg"
+import { humanizeNumbers } from "@/lib/utils"
 
 const flattenGroups = (groups: Groups) => {
   return Object.keys(groups || {}).flatMap((app) =>
@@ -21,6 +22,7 @@ const GroupFilterItem = ({
   isFilter,
   Image,
   className,
+  index,
 }: {
   title: string
   onClick: any
@@ -29,9 +31,10 @@ const GroupFilterItem = ({
   isFilter: any
   Image: JSX.Element
   className?: string
+  index: number
 }) => {
   return (
-    <div className={`rounded-md h-[32px] ml-[40px] ${className}`}>
+    <div className={`rounded-md h-[32px] ml-[40px] ${className}`} key={index}>
       <div
         onClick={onClick}
         className={`${isFilter(filter) ? "bg-[#F0F4F7]" : ""} flex flex-row rounded-[6px] items-center justify-between cursor-pointer  pl-[12px] pr-[12px] pt-[4px] pb-[4px] w-[248px]`}
@@ -88,8 +91,8 @@ export const GroupFilter = ({
   total: number
 }) => {
   return (
-    <div className="flex border-l-[1px] border-[#E6EBF5] flex-col">
-      <p className="text-[11.5px] font-medium text-[#97A6C4] ml-[40px] mt-[28px]">{`FOUND ${total} RESULTS`}</p>
+    <div className="flex flex-col">
+      <p className="text-[11.5px] font-medium text-[#97A6C4] ml-[40px] mt-[28px] tracking-[0.08em]">{`FOUND ${humanizeNumbers(total)} RESULTS`}</p>
       <GroupFilterItem
         className={"mt-4"}
         title={"All"}
@@ -100,10 +103,12 @@ export const GroupFilter = ({
         }}
         total={total!}
         Image={<img src={allFilter} className="mr-[10px]" />}
+        index={0}
       />
       {flattenGroups(groups).map(({ app, entity, count }, index) => {
         return (
           <GroupFilterItem
+            index={index}
             title={getName(app, entity)}
             filter={filter}
             isFilter={(filter: Filter | null) =>

frontend/src/assets/retry.svg

@@ -70,7 +70,7 @@ const parseHighlight = (text: string): ReactNode[] => {
 
 // Component that renders chunk summary with parsing
 const HighlightedText = ({ chunk_summary }: { chunk_summary: string }) => (
-  <p className="text-left text-sm mt-1 text-[#464B53] line-clamp-[2.5] text-ellipsis overflow-hidden">
+  <p className="text-left text-sm mt-1 text-[#464B53] line-clamp-[2.5] text-ellipsis overflow-hidden ml-[44px]">
     {chunk_summary ? parseHighlight(chunk_summary) : " "}
   </p>
 )

frontend/src/components/GroupFilter.tsx

@@ -0,0 +1,138 @@
+import { Search } from "lucide-react"
+import React, { useRef, useEffect } from "react"
+import { SearchFilters } from "./SearchFilter"
+import { ArrowRight, X } from "lucide-react" // Assuming ArrowRight and X are imported from lucide-react
+import { AutocompleteElement } from "@/components/Autocomplete"
+import { Button } from "@/components/ui/button"
+import { useNavigate } from "@tanstack/react-router"
+
+export const SearchBar = React.forwardRef<HTMLDivElement, any>(
+  (
+    {
+      hasSearched,
+      autocompleteResults,
+      setQuery,
+      setAutocompleteResults,
+      setAutocompleteQuery,
+      setOffset,
+      setFilter,
+      query,
+      handleSearch,
+      handleAnswer,
+    },
+    autocompleteRef,
+  ) => {
+    const inputRef = useRef<HTMLInputElement | null>(null)
+    const navigate = useNavigate({ from: "/search" })
+
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.focus()
+      }
+    }, [])
+
+    return (
+      <div
+        className={`flex flex-col bg-white ${
+          hasSearched
+            ? "pt-[12px] border-b-[1px] border-b-[#E6EBF5] justify-center sticky top-0 z-10"
+            : "items-center"
+        }`}
+      >
+        <div
+          className={`flex flex-col max-w-3xl ${
+            hasSearched ? "ml-[186px]" : ""
+          } w-full`}
+        >
+          <div className="flex w-full">
+            <div className="relative w-full">
+              <div
+                className={`flex w-full items-center ${
+                  hasSearched ? "bg-[#F0F4F7]" : "bg-white"
+                } ${
+                  autocompleteResults.length > 0
+                    ? "rounded-t-lg border-b-0"
+                    : "rounded-full"
+                }  ${
+                  hasSearched ? "" : "border border-[#AEBAD3]"
+                } h-[52px] shadow-sm`}
+              >
+                <Search className="text-[#AEBAD3] ml-4 mr-2" size={18} />
+                <input
+                  ref={inputRef}
+                  placeholder="Search anything across connected apps..."
+                  value={query}
+                  onChange={(e) => {
+                    setQuery(e.target.value)
+                    setAutocompleteQuery(e.target.value)
+                    setOffset(0)
+                  }}
+                  className={`text-[#1C1D1F] w-full text-[15px] focus-visible:ring-0 placeholder-[#BDC6D8] font-[450] leading-[24px] focus:outline-none ${
+                    hasSearched ? "bg-[#F0F4F7]" : ""
+                  }`}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      navigate({
+                        to: "/search",
+                        search: { query: encodeURIComponent(query) },
+                      })
+                      setFilter(null)
+                      handleSearch(0, null)
+                      // we only want to look for answer if at least
+                      // 3 words are there in the query
+                      if (query.split(" ").length > 2) {
+                        handleAnswer()
+                      }
+                    }
+                  }}
+                />
+                {!hasSearched ? (
+                  <Button
+                    onClick={(e) => handleSearch()}
+                    className="mr-2 bg-[#464B53] text-white p-2 hover:bg-[#5a5f66] rounded-full"
+                  >
+                    <ArrowRight className="text-white" size={20} />
+                  </Button>
+                ) : (
+                  <X
+                    className="text-[#ACB8D1] cursor-pointer mr-[16px]"
+                    size={20}
+                    onClick={(e) => {
+                      setQuery("")
+                      inputRef.current?.focus()
+                    }}
+                  />
+                )}
+                {!!autocompleteResults?.length && (
+                  <div
+                    ref={autocompleteRef}
+                    className="absolute top-full w-full left-0 bg-white rounded-b-lg border border-t-0 border-[#AEBAD3] shadow-md"
+                  >
+                    {autocompleteResults.map((result: any, index: number) => (
+                      <AutocompleteElement
+                        key={index}
+                        onClick={() => {
+                          if (result.type === "file") {
+                            setQuery(result.title)
+                          }
+                          setAutocompleteResults([])
+                        }}
+                        result={result}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* search filters */}
+        {hasSearched && (
+          <div className="ml-[230px] text-[13px]">
+            <SearchFilters />
+          </div>
+        )}
+      </div>
+    )
+  },
+)

frontend/src/components/Highlight.tsx

@@ -7,9 +7,10 @@ export const SearchResult = ({
   index,
 }: { result: SearchResultDiscriminatedUnion; index: number }) => {
   let content = <></>
+  let commonClassVals = "pr-[60px]"
   if (result.type === "file") {
     content = (
-      <div className="flex flex-col mt-[28px]" key={index}>
+      <div className={`flex flex-col mt-[28px] ${commonClassVals}`} key={index}>
         <div className="flex items-center justify-start space-x-2">
           <a
             href={result.url ?? ""}
@@ -21,7 +22,7 @@ export const SearchResult = ({
             {result.title}
           </a>
         </div>
-        <div className="flex flex-row items-center mt-1">
+        <div className="flex flex-row items-center mt-1 ml-[44px]">
           <img
             referrerPolicy="no-referrer"
             className="mr-2 w-[16px] h-[16px] rounded-full"
@@ -47,13 +48,13 @@ export const SearchResult = ({
     )
   } else if (result.type === "user") {
     content = (
-      <div className="flex flex-col mt-[28px]" key={index}>
-        <div className="flex items-center justify-start space-x-2">
+      <div className={`flex flex-col mt-[28px] ${commonClassVals}`} key={index}>
+        <div className="flex items-center justify-start">
           <a
             href={`https://contacts.google.com/${result.email}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center text-[#2067F5] space-x-2"
+            className="flex items-center text-[#2067F5]"
           >
             {/* TODO: if photoLink doesn't exist then show icon */}
             <img
@@ -68,14 +69,14 @@ export const SearchResult = ({
     )
   } else if (result.type === "mail") {
     content = (
-      <div className="flex flex-col mt-[28px]" key={index}>
+      <div className={`flex flex-col mt-[28px] ${commonClassVals}`} key={index}>
         <div className="flex items-center justify-start">
           {getIcon(result.app, result.entity, { w: 24, h: 24, mr: 20 })}
           <a
             href={`https://mail.google.com/mail/u/0/#inbox/${result.docId}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center text-[#2067F5] space-x-2"
+            className="flex items-center text-[#2067F5]"
           >
             {/* TODO: if photoLink doesn't exist then show icon */}
             {/* <img

frontend/src/components/SearchBar.tsx

@@ -1,11 +1,19 @@
 import { Link, useLocation } from "@tanstack/react-router"
-import { Home, Search, Settings, Bell, User, Plug } from "lucide-react"
+import {
+  Home,
+  Search,
+  Settings,
+  Bell,
+  User,
+  Plug,
+  MessageSquarePlus,
+} from "lucide-react"
 
 export const Sidebar = ({ className = "" }: { className?: string }) => {
   const location = useLocation()
   return (
     <div
-      className={`h-full w-[52px] bg-gray-100 p-4 flex flex-col items-center space-y-6 ${className}`}
+      className={`h-full w-[52px] bg-gray-100 p-4 flex flex-col items-center space-y-6 fixed ${className} z-20`}
     >
       <Link to="/">
         <Home
@@ -23,6 +31,14 @@ export const Sidebar = ({ className = "" }: { className?: string }) => {
             : { className: "hover:text-blue-600" })}
         />
       </Link>
+      <Link to="/chat">
+        <MessageSquarePlus
+          size={18}
+          {...(location.pathname === "/_authenticated/chat"
+            ? { className: "text-blue-500 hover:text-blue-600" }
+            : { className: "hover:text-blue-600" })}
+        />
+      </Link>
       {
         // @ts-ignore
         <Link to="/notifications" className="hover:text-blue-500">

frontend/src/components/SearchResult.tsx

@@ -16,11 +16,14 @@ import {
 export const getIcon = (
   app: Apps,
   entity: Entity,
-  size?: { w: number; h: number; mr: number },
+  size?: { w: number; h: number; mr: number; ml?: number },
 ) => {
   let classNameVal = ""
   if (size) {
     classNameVal = `h-[${size.h}px] w-[${size.w}px] mr-[${size.mr}px]`
+    if (size.ml) {
+      classNameVal += ` ml-[${size.ml}px]`
+    }
   } else {
     classNameVal = "h-[12px] w-[12px] mr-[10px]"
   }

frontend/src/components/Sidebar.tsx

@@ -34,3 +34,20 @@ export const replaceLinks = (text: string): string => {
     }
   })
 }
+
+export const humanizeNumbers = (num: number): string => {
+  if (num < 1000) return num.toString()
+
+  const units = ["k", "M", "B", "T"]
+  const exponent = Math.floor(Math.log10(num) / 3)
+  const unit = units[exponent - 1]
+  const scaledNum = num / Math.pow(1000, exponent)
+
+  // Use Intl.NumberFormat to format the number
+  const formatter = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: scaledNum < 10 ? 1 : 0,
+  })
+
+  return `${formatter.format(scaledNum)}${unit}`
+}