Make knowledge source details card usable on touch devices (#24)

Previously, one could not access the knowledge source detail card on
touch devices, because there is no hover and a click opened the source
file.
With this change, the card will open on click on touch devices, and a
"file symlink" button allows to access the file from within the card. A
click outside of the card will close it again.

Author: florian-h05

src/hooks/useIsTouch.ts

@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+
+export function useIsTouch() {
+  return useMemo(
+    () => "ontouchstart" in window || navigator.maxTouchPoints > 0,
+    [],
+  );
+}

src/views/chatbot/KnowledgeSource.tsx

@@ -4,7 +4,9 @@ import useDownloadFile from "@/hooks/useDownloadFile";
 import { Knowledge, RagSourceRecord } from "@/api";
 import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card";
 import { KnowledgeSourceDetail } from "./KnowledgeSourceDetail";
-import { useState } from "react";
+import React, { useState } from "react";
+import { useIsTouch } from "@/hooks/useIsTouch.ts";
+import { useHandleClickOutside } from "@/hooks/useHandleClickOutside.ts";
 
 interface KnowledgeSourceProps {
   knowledgeId: string | null;
@@ -25,12 +27,17 @@ export function KnowledgeSource({
   openPdf,
 }: Readonly<KnowledgeSourceProps>) {
   const { t } = useTranslation();
-  const { downloadFile } = useDownloadFile();
+  const isTouch = useIsTouch();
+  const [open, setOpen] = useState(false);
+  const ref = useHandleClickOutside<HTMLDivElement>(() => {
+    setOpen(false);
+  });
   const [hoverProps, setHoverProps] = useState<HoverProps>({
     source: null,
     knowledge: null,
   });
 
+  const { downloadFile } = useDownloadFile();
   const { knowledge, error } = useGetKnowledgeApi({ uuid: knowledgeId });
 
   const getDocType = () => {
@@ -57,7 +64,21 @@ export function KnowledgeSource({
     (source) => source.embeddingId === embeddingId,
   );
 
-  const handleHover = () => {
+  const handleClick = () => {
+    if (isTouch) {
+      return;
+    }
+    void handleFileSource();
+  };
+
+  const handleTouch = (event: React.TouchEvent) => {
+    event.preventDefault();
+    handleHover();
+    setOpen(true);
+  };
+
+  const handleHover = (event?: React.MouseEvent) => {
+    event?.preventDefault();
     setHoverProps({
       knowledge: knowledge ?? null,
       source: sourceContent ?? null,
@@ -73,23 +94,29 @@ export function KnowledgeSource({
   }
 
   return (
-    <HoverCard>
-      {knowledge?.label ? (
-        <HoverCardTrigger onMouseEnter={handleHover}>
-          <span
-            onClick={() => void handleFileSource()}
-            className="inline-flex items-center px-2 py-0.5 rounded border text-sm font-medium text-secondary-foreground hover:bg-foreground/20 bg-foreground/5"
-          >
-            {getDocType()} | {knowledge.label}
+    <div ref={ref}>
+      <HoverCard open={isTouch ? open : undefined}>
+        {knowledge?.label ? (
+          <HoverCardTrigger onMouseEnter={handleHover}>
+            <span
+              onClick={handleClick}
+              onTouchStart={handleTouch}
+              className="inline-flex items-center px-2 py-0.5 rounded border text-sm font-medium text-secondary-foreground hover:bg-foreground/20 bg-foreground/5"
+            >
+              {getDocType()} | {knowledge.label}
+            </span>
+          </HoverCardTrigger>
+        ) : (
+          <span className="inline-flex items-center px-2 py-0.5 rounded border text-sm font-medium text-secondary-foreground hover:bg-foreground/20 bg-foreground/5">
+            {getDocType()} | {t("chatbot.chat.source.loading")}
           </span>
-        </HoverCardTrigger>
-      ) : (
-        <span className="inline-flex items-center px-2 py-0.5 rounded border text-sm font-medium text-secondary-foreground hover:bg-foreground/20 bg-foreground/5">
-          {getDocType()} | {t("chatbot.chat.source.loading")}
-        </span>
-      )}
+        )}
 
-      <KnowledgeSourceDetail hoverProps={hoverProps} />
-    </HoverCard>
+        <KnowledgeSourceDetail
+          onOpenFile={() => void handleFileSource()}
+          hoverProps={hoverProps}
+        />
+      </HoverCard>
+    </div>
   );
 }

src/views/chatbot/KnowledgeSourceDetail.tsx

@@ -14,29 +14,38 @@ import {
   translateUser,
 } from "../knowledge/KnowledgePermissions";
 import { HoverProps } from "./KnowledgeSource";
+import { FileSymlink } from "lucide-react";
+import { Button } from "@/components/ui/button.tsx";
 
 interface KnowledgeCardProps {
+  onOpenFile: () => void;
   hoverProps: HoverProps;
 }
 
 export function KnowledgeSourceDetail({
+  onOpenFile,
   hoverProps,
 }: Readonly<KnowledgeCardProps>) {
   const knowledge = hoverProps.knowledge;
   const sourceContent =
     hoverProps.source?.content ?? "No source content available";
 
   return (
-    <HoverCardContent className="w-3/4 max-h-[450px] items-center justify-center overflow-auto">
-      <CardHeader>
+    <HoverCardContent className="w-[500px] p-6 max-h-[450px] items-center justify-center overflow-auto">
+      <CardHeader className="p-0 pb-4">
         {knowledge && (
-          <>
-            <CardTitle className="underline">{knowledge.label}</CardTitle>
-            <CardDescription>ID: {knowledge.id}</CardDescription>
-          </>
+          <div className="flex flex-row justify-between">
+            <div>
+              <CardTitle className="underline">{knowledge.label}</CardTitle>
+              <CardDescription>ID: {knowledge.id}</CardDescription>
+            </div>
+            <Button onClick={onOpenFile} className="h-10 w-10">
+              <FileSymlink className="h-8 w-8" />
+            </Button>
+          </div>
         )}
       </CardHeader>
-      <CardContent className="grid gap-4">
+      <CardContent className="grid gap-4 p-0">
         {knowledge && (
           <>
             <div className="grid grid-cols-2 gap-2">
@@ -83,7 +92,7 @@ export function KnowledgeSourceDetail({
         )}
         <hr />
       </CardContent>
-      <CardFooter>
+      <CardFooter className="p-0 pt-4">
         <div className="flex flex-col items-start ">
           <h3 className="font-bold mb-2 underline">
             {t("knowledge.sourceContent")}