Clean citation cards (#3396)

* seed

* initial steps

* clean up

* fully clickable

backend/danswer/setup.py

@@ -39,7 +39,6 @@ from danswer.key_value_store.interface import KvKeyNotFoundError
 from danswer.natural_language_processing.search_nlp_models import EmbeddingModel
 from danswer.natural_language_processing.search_nlp_models import warm_up_bi_encoder
 from danswer.natural_language_processing.search_nlp_models import warm_up_cross_encoder
-from danswer.seeding.load_docs import seed_initial_documents
 from danswer.seeding.load_yamls import load_chat_yamls
 from danswer.server.manage.llm.models import LLMProviderUpsertRequest
 from danswer.server.settings.store import load_settings
@@ -151,7 +150,7 @@ def setup_danswer(
     # update multipass indexing setting based on GPU availability
     update_default_multipass_indexing(db_session)
 
-    seed_initial_documents(db_session, tenant_id, cohere_enabled)
+    # seed_initial_documents(db_session, tenant_id, cohere_enabled)
 
 
 def translate_saved_search_settings(db_session: Session) -> None:

web/src/app/chat/message/MemoizedTextComponents.tsx

@@ -1,10 +1,12 @@
 import { Citation } from "@/components/search/results/Citation";
 import { WebResultIcon } from "@/components/WebResultIcon";
 import { LoadedDanswerDocument } from "@/lib/search/interfaces";
-import { getSourceMetadata } from "@/lib/sources";
+import { getSourceMetadata, SOURCE_METADATA_MAP } from "@/lib/sources";
 import { ValidSources } from "@/lib/types";
 import React, { memo } from "react";
 import isEqual from "lodash/isEqual";
+import { SlackIcon } from "@/components/icons/icons";
+import { SourceIcon } from "@/components/SourceIcon";
 
 export const MemoizedAnchor = memo(
   ({ docs, updatePresentingDocument, children }: any) => {
@@ -19,18 +21,8 @@ export const MemoizedAnchor = memo(
           ? new URL(associatedDoc.link).origin + "/favicon.ico"
           : "";
 
-        const getIcon = (sourceType: ValidSources, link: string) => {
+        const icon = (
-          return getSourceMetadata(sourceType).icon({ size: 18 });
+          <SourceIcon sourceType={associatedDoc?.source_type} iconSize={18} />
-        };
-
-        const icon =
-          associatedDoc?.source_type === "web" ? (
-            <WebResultIcon url={associatedDoc.link} />
-          ) : (
-            getIcon(
-              associatedDoc?.source_type || "web",
-              associatedDoc?.link || ""
-            )
         );
 
         return (

web/src/components/search/DocumentDisplay.tsx

@@ -21,6 +21,7 @@ import { CustomTooltip, TooltipGroup } from "../tooltip/CustomTooltip";
 import { WarningCircle } from "@phosphor-icons/react";
 import TextView from "../chat_search/TextView";
 import { SearchResultIcon } from "../SearchResultIcon";
+import { ValidSources } from "@/lib/types";
 
 export const buildDocumentSummaryDisplay = (
   matchHighlights: string[],
@@ -425,19 +426,30 @@ export function CompactDocumentCard({
   document,
   icon,
   url,
+  updatePresentingDocument,
 }: {
   document: LoadedDanswerDocument;
   icon?: React.ReactNode;
   url?: string;
+  updatePresentingDocument: (documentIndex: LoadedDanswerDocument) => void;
 }) {
   return (
-    <div className="max-w-[250px]  pb-0 pt-0 mt-0 flex gap-y-0  flex-col  content-start items-start gap-0 ">
+    <div
-      <h3 className="text-sm font-semibold flex  items-center gap-x-1 text-text-900 pt-0 mt-0 truncate w-full">
+      onClick={() => {
+        if (document.source_type === ValidSources.File) {
+          updatePresentingDocument(document);
+        } else if (document.link) {
+          window.open(document.link, "_blank");
+        }
+      }}
+      className="max-w-[250px] cursor-pointer pb-0 pt-0 mt-0 flex gap-y-0  flex-col  content-start items-start gap-0 "
+    >
+      <div className="text-sm font-semibold flex  items-center gap-x-1 text-text-900 pt-0 mt-0 truncate w-full">
         {icon}
         {(document.semantic_identifier || document.document_id).slice(0, 40)}
         {(document.semantic_identifier || document.document_id).length > 40 &&
           "..."}
-      </h3>
+      </div>
       {document.blurb && (
         <p className="text-xs mb-0 text-gray-600 line-clamp-2">
           {document.blurb}

web/src/components/search/results/Citation.tsx

@@ -52,7 +52,12 @@ export function Citation({
           </div>
         </TooltipTrigger>
         <TooltipContent width="mb-2 max-w-lg" className="bg-background">
-          <CompactDocumentCard url={url} icon={icon} document={document} />
+          <CompactDocumentCard
+            updatePresentingDocument={updatePresentingDocument}
+            url={url}
+            icon={icon}
+            document={document}
+          />
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>