From b952dbef429c245a37e149a5868a23245c9c6831 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Fri, 30 Aug 2024 14:02:35 -0700
Subject: [PATCH] Minor search formatting updates (#2276)

---
 .../ee/danswer/server/enterprise_settings/models.py   |  1 +
 web/src/app/admin/settings/interfaces.ts              |  1 +
 web/src/app/chat/ChatBanner.tsx                       |  3 ++-
 web/src/app/chat/ChatPage.tsx                         |  9 +++++++--
 web/src/app/chat/shared_chat_search/FixedLogo.tsx     |  4 ++--
 .../app/chat/shared_chat_search/FunctionalWrapper.tsx |  4 +++-
 .../app/ee/admin/whitelabeling/WhitelabelingForm.tsx  | 11 ++++++++++-
 web/src/app/layout.tsx                                |  4 +---
 web/src/components/admin/connectors/AdminSidebar.tsx  | 10 +++++-----
 web/src/components/chat_search/Header.tsx             |  2 +-
 web/src/components/header/HeaderTitle.tsx             |  4 +++-
 web/src/components/header/LogoType.tsx                |  2 +-
 12 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/backend/ee/danswer/server/enterprise_settings/models.py b/backend/ee/danswer/server/enterprise_settings/models.py
index c9831d87a..b4cf91a4a 100644
--- a/backend/ee/danswer/server/enterprise_settings/models.py
+++ b/backend/ee/danswer/server/enterprise_settings/models.py
@@ -11,6 +11,7 @@ class EnterpriseSettings(BaseModel):
     use_custom_logotype: bool = False
 
     # custom Chat components
+    two_lines_for_chat_header: bool | None = None
     custom_lower_disclaimer_content: str | None = None
     custom_header_content: str | None = None
     custom_popup_header: str | None = None
diff --git a/web/src/app/admin/settings/interfaces.ts b/web/src/app/admin/settings/interfaces.ts
index 247bfd09d..5c3f7a725 100644
--- a/web/src/app/admin/settings/interfaces.ts
+++ b/web/src/app/admin/settings/interfaces.ts
@@ -23,6 +23,7 @@ export interface EnterpriseSettings {
   // custom Chat components
   custom_lower_disclaimer_content: string | null;
   custom_header_content: string | null;
+  two_lines_for_chat_header: boolean | null;
   custom_popup_header: string | null;
   custom_popup_content: string | null;
 }
diff --git a/web/src/app/chat/ChatBanner.tsx b/web/src/app/chat/ChatBanner.tsx
index bcaa72049..c6c7e8b70 100644
--- a/web/src/app/chat/ChatBanner.tsx
+++ b/web/src/app/chat/ChatBanner.tsx
@@ -41,6 +41,7 @@ export function ChatBanner() {
         w-full
         mx-auto
         relative
+        cursor-default
         shadow-sm
         rounded
         border-l-8 border-l-400
@@ -53,7 +54,7 @@ export function ChatBanner() {
         <div className="relative">
           <div
             ref={contentRef}
-            className="line-clamp-2 text-center w-full overflow-hidden pr-8"
+            className={`${settings.enterpriseSettings.two_lines_for_chat_header ? "line-clamp-2" : "line-clamp-1"} text-center w-full overflow-hidden pr-8`}
           >
             <MinimalMarkdown
               content={settings.enterpriseSettings.custom_header_content}
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 3ee22d4d7..1c9441d07 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -249,6 +249,7 @@ export function ChatPage({
 
     updateChatState("input", currentSession);
   };
+
   // this is for "@"ing assistants
 
   // this is used to track which assistant is being used to generate the current message
@@ -1723,8 +1724,12 @@ export function ChatPage({
                             )}
                           <div
                             className={
-                              "mt-4 -ml-4 w-full mx-auto " +
-                              "absolute mobile:top-0 desktop:top-12 left-0" +
+                              "-ml-4 w-full mx-auto " +
+                              "absolute mobile:top-0 desktop:top-12 left-0 " +
+                              (settings?.enterpriseSettings
+                                ?.two_lines_for_chat_header
+                                ? "mt-20 "
+                                : "mt-8") +
                               (hasPerformedInitialScroll ? "" : "invisible")
                             }
                           >
diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
index 0b3e115c3..c5114ca3e 100644
--- a/web/src/app/chat/shared_chat_search/FixedLogo.tsx
+++ b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
@@ -21,11 +21,11 @@ export default function FixedLogo() {
         }
         className="fixed cursor-pointer flex z-40 left-2.5 top-2"
       >
-        <div className="max-w-[200px] mobile:hidden flex items-center gap-x-1 my-auto">
+        <div className="max-w-[175px] mobile:hidden flex items-center gap-x-1 my-auto">
           <div className="flex-none my-auto">
             <Logo height={24} width={24} />
           </div>
-          <div className="">
+          <div className="w-full">
             {enterpriseSettings && enterpriseSettings.application_name ? (
               <div>
                 <HeaderTitle>{enterpriseSettings.application_name}</HeaderTitle>
diff --git a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
index e66bc32aa..a5693ab47 100644
--- a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
+++ b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
@@ -122,6 +122,8 @@ export default function FunctionalWrapper({
   const settings = combinedSettings?.settings;
   const chatBannerPresent =
     combinedSettings?.enterpriseSettings?.custom_header_content;
+  const twoLines =
+    combinedSettings?.enterpriseSettings?.two_lines_for_chat_header;
 
   const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
 
@@ -136,7 +138,7 @@ export default function FunctionalWrapper({
       {(!settings ||
         (settings.search_page_enabled && settings.chat_page_enabled)) && (
         <div
-          className={`mobile:hidden z-30 flex fixed ${chatBannerPresent ? "top-20" : "top-4"} left-1/2 transform -translate-x-1/2`}
+          className={`mobile:hidden z-30 flex fixed ${chatBannerPresent ? (twoLines ? "top-20" : "top-14") : "top-4"} left-1/2 transform -translate-x-1/2`}
         >
           <div
             style={{ transition: "width 0.30s ease-out" }}
diff --git a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
index 905107dc3..9195d9362 100644
--- a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
+++ b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
@@ -7,6 +7,7 @@ import { SettingsContext } from "@/components/settings/SettingsProvider";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import {
+  BooleanFormField,
   Label,
   SubLabel,
   TextFormField,
@@ -55,7 +56,8 @@ export function WhitelabelingForm() {
           application_name: enterpriseSettings?.application_name || null,
           use_custom_logo: enterpriseSettings?.use_custom_logo || false,
           use_custom_logotype: enterpriseSettings?.use_custom_logotype || false,
-
+          two_lines_for_chat_header:
+            enterpriseSettings?.two_lines_for_chat_header || false,
           custom_header_content:
             enterpriseSettings?.custom_header_content || "",
           custom_popup_header: enterpriseSettings?.custom_popup_header || "",
@@ -68,6 +70,7 @@ export function WhitelabelingForm() {
           use_custom_logo: Yup.boolean().required(),
           use_custom_logotype: Yup.boolean().required(),
           custom_header_content: Yup.string().nullable(),
+          two_lines_for_chat_header: Yup.boolean().nullable(),
           custom_popup_header: Yup.string().nullable(),
           custom_popup_content: Yup.string().nullable(),
           custom_lower_disclaimer_content: Yup.string().nullable(),
@@ -204,6 +207,12 @@ export function WhitelabelingForm() {
                   disabled={isSubmitting}
                 />
 
+                <BooleanFormField
+                  name="two_lines_for_chat_header"
+                  label="Two lines for chat header?"
+                  subtext="If enabled, the chat header will be displayed on two lines instead of one."
+                />
+
                 <Divider />
 
                 <TextFormField
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 8219dbb9a..27d1bea55 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -15,9 +15,7 @@ import { buildClientUrl } from "@/lib/utilsSS";
 import { Inter } from "next/font/google";
 import Head from "next/head";
 import { EnterpriseSettings } from "./admin/settings/interfaces";
-import { redirect } from "next/navigation";
-import { Button, Card } from "@tremor/react";
-import LogoType from "@/components/header/LogoType";
+import { Card } from "@tremor/react";
 import { HeaderTitle } from "@/components/header/HeaderTitle";
 import { Logo } from "@/components/Logo";
 import { UserProvider } from "@/components/user/UserProvider";
diff --git a/web/src/components/admin/connectors/AdminSidebar.tsx b/web/src/components/admin/connectors/AdminSidebar.tsx
index 60bbd3c7e..56aa08176 100644
--- a/web/src/components/admin/connectors/AdminSidebar.tsx
+++ b/web/src/components/admin/connectors/AdminSidebar.tsx
@@ -48,13 +48,13 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
                   : "/search"
               }
             >
-              <div className="max-w-[200px] flex gap-x-1 my-auto">
+              <div className="max-w-[200px] w-full flex gap-x-1 my-auto">
                 <div className="flex-none mb-auto">
                   <Logo />
                 </div>
-                <div className="my-auto">
+                <div className="flex-grow min-w-0 my-auto">
                   {enterpriseSettings && enterpriseSettings.application_name ? (
-                    <div>
+                    <div className="w-full">
                       <HeaderTitle>
                         {enterpriseSettings.application_name}
                       </HeaderTitle>
@@ -75,8 +75,8 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
         <div className="flex w-full justify-center">
           <Link href={"/chat"}>
             <button className="text-sm block w-52 py-2.5 flex px-2 text-left bg-background-200 hover:bg-background-200/80 cursor-pointer rounded">
-              <BackIcon size={20} className="text-neutral" />
-              <p className="ml-1">
+              <BackIcon size={20} />
+              <p className="ml-1 break-words line-clamp-2 ellipsis leading-none">
                 Back to{" "}
                 {combinedSettings.enterpriseSettings?.application_name ||
                   "Danswer"}
diff --git a/web/src/components/chat_search/Header.tsx b/web/src/components/chat_search/Header.tsx
index 3f1881a27..1ed60a8dd 100644
--- a/web/src/components/chat_search/Header.tsx
+++ b/web/src/components/chat_search/Header.tsx
@@ -64,7 +64,7 @@ export default function FunctionalHeader({
     router.push(newChatUrl);
   };
   return (
-    <div className="left-0 sticky top-0 z-20 w-full relative flex">
+    <div className="left-0 h-0 sticky top-0 z-20 w-full relative flex">
       <div className="mt-2 mx-2.5 cursor-pointer text-text-700 relative flex w-full">
         <LogoType
           assistantId={currentChatSession?.persona_id}
diff --git a/web/src/components/header/HeaderTitle.tsx b/web/src/components/header/HeaderTitle.tsx
index 2ec1d3cbf..f63a8769c 100644
--- a/web/src/components/header/HeaderTitle.tsx
+++ b/web/src/components/header/HeaderTitle.tsx
@@ -7,7 +7,9 @@ export function HeaderTitle({ children }: { children: JSX.Element | string }) {
   const textSize = isString && children.length > 10 ? "text-xl" : "text-2xl";
 
   return (
-    <h1 className={`flex ${textSize} text-strong leading-none font-bold`}>
+    <h1
+      className={`${textSize} break-words line-clamp-2 ellipsis text-strong leading-none font-bold`}
+    >
       {children}
     </h1>
   );
diff --git a/web/src/components/header/LogoType.tsx b/web/src/components/header/LogoType.tsx
index 04ddc54d7..29a4bfede 100644
--- a/web/src/components/header/LogoType.tsx
+++ b/web/src/components/header/LogoType.tsx
@@ -56,7 +56,7 @@ export default function LogoType({
       >
         <div className="max-w-[175px]">
           {enterpriseSettings && enterpriseSettings.application_name ? (
-            <div>
+            <div className="w-full">
               <HeaderTitle>{enterpriseSettings.application_name}</HeaderTitle>
               {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
                 <p className="text-xs text-subtle">Powered by Danswer</p>