display name + model truncation (#3304)

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -24,13 +24,6 @@ import {
   TextFormField,
 } from "@/components/admin/connectors/Field";
 
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardFooter,
-} from "@/components/ui/card";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { getDisplayNameForModel, useCategories } from "@/lib/hooks";
 import { DocumentSetSelectable } from "@/components/documentSet/DocumentSetSelectable";

web/src/components/chat_search/AssistantSelector.tsx

@@ -28,12 +28,13 @@ import { DraggableAssistantCard } from "@/components/assistants/AssistantCards";
 import { updateUserAssistantList } from "@/lib/assistants/updateAssistantPreferences";
 
 import Text from "@/components/ui/text";
-import { LlmOverrideManager } from "@/lib/hooks";
+import { getDisplayNameForModel, LlmOverrideManager } from "@/lib/hooks";
 import { Tab } from "@headlessui/react";
 import { AssistantIcon } from "../assistants/AssistantIcon";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { restrictToParentElement } from "@dnd-kit/modifiers";
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "../ui/drawer";
+import { truncateString } from "@/lib/utils";
 
 const AssistantSelector = ({
   liveAssistant,
@@ -310,7 +311,9 @@ const AssistantSelector = ({
             <span className="font-bold">{liveAssistant.name}</span>
           </div>
           <div className="flex items-center">
-            <span className="mr-2 text-xs">{currentLlm}</span>
+            <span className="mr-2 text-xs">
+              {truncateString(getDisplayNameForModel(currentLlm), 30)}
+            </span>
             <FiChevronDown
               className={`w-5 h-5 text-white transition-transform duration-300 transform ${
                 isOpen ? "rotate-180" : ""

web/src/components/chat_search/sources/SourceCard.tsx

@@ -1,6 +1,7 @@
 import { WebResultIcon } from "@/components/WebResultIcon";
 import { SourceIcon } from "@/components/SourceIcon";
 import { DanswerDocument } from "@/lib/search/interfaces";
+import { truncateString } from "@/lib/utils";
 
 export default function SourceCard({ doc }: { doc: DanswerDocument }) {
   return (
@@ -17,12 +18,7 @@ export default function SourceCard({ doc }: { doc: DanswerDocument }) {
         ) : (
           <SourceIcon sourceType={doc.source_type} iconSize={18} />
         )}
-        <p>
-          {(doc.semantic_identifier || doc.document_id).slice(0, 12).trim()}
-          {(doc.semantic_identifier || doc.document_id).length > 12 && (
-            <span className="text-text-500">...</span>
-          )}
-        </p>
+        <p>{truncateString(doc.semantic_identifier || doc.document_id, 12)}</p>
       </div>
       <div className="line-clamp-2 text-sm font-semibold"></div>
       <div className="line-clamp-2 text-sm font-normal leading-snug text-text-700">

web/src/lib/utils.ts

@@ -4,3 +4,7 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export const truncateString = (str: string, maxLength: number) => {
+  return str.length > maxLength ? str.slice(0, maxLength - 1) + "..." : str;
+};