onyx-dot-app · yuhongsun96 · Sep 5, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/web/src/app/admin/configuration/llm/interfaces.ts b/web/src/app/admin/configuration/llm/interfaces.ts
@@ -1,3 +1,13 @@
+import {
+  AnthropicIcon,
+  AWSIcon,
+  AzureIcon,
+  CPUIcon,
+  OpenAIIcon,
+  OpenSourceIcon,
+} from "@/components/icons/icons";
+import { FaRobot } from "react-icons/fa";
+
 export interface CustomConfigKey {
   name: string;
   description: string | null;
@@ -53,3 +63,18 @@ export interface LLMProviderDescriptor {
   groups: number[];
   display_model_names: string[] | null;
 }
+
+export const getProviderIcon = (providerName: string) => {
+  switch (providerName) {
+    case "openai":
+      return OpenAIIcon;
+    case "anthropic":
+      return AnthropicIcon;
+    case "bedrock":
+      return AWSIcon;
+    case "azure":
+      return AzureIcon;
+    default:
+      return CPUIcon;
+  }
+};
diff --git a/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx b/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx
@@ -91,7 +91,7 @@ export default function AddConnector({
   >({
     name: "",
     groups: [],
-    is_public: false,
+    is_public: true,
     ...configuration.values.reduce(
       (acc, field) => {
         if (field.type === "list") {

diff --git a/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx b/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
@@ -482,7 +482,7 @@ export function CCPairIndexingStatusTable({
               if (sourceMatches || matchingConnectors.length > 0) {
                 return (
                   <React.Fragment key={ind}>
-                    <div className="mt-4" />
+                    <br className="mt-4" />
 
                     <SummaryRow
                       source={source}

diff --git a/web/src/app/chat/ChatBanner.tsx b/web/src/app/chat/ChatBanner.tsx
@@ -57,6 +57,7 @@ export function ChatBanner() {
             className={`${settings.enterpriseSettings.two_lines_for_chat_header ? "line-clamp-2" : "line-clamp-1"} text-center w-full overflow-hidden pr-8`}
           >
             <MinimalMarkdown
+              className="prose text-sm max-w-full"
               content={settings.enterpriseSettings.custom_header_content}
             />
           </div>
@@ -65,6 +66,7 @@ export function ChatBanner() {
             className="absolute top-0 left-0 invisible w-full"
           >
             <MinimalMarkdown
+              className="prose text-sm max-w-full"
               content={settings.enterpriseSettings.custom_header_content}
             />
           </div>

diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx
@@ -338,10 +338,10 @@ export function ChatInputBar({
                       updateInputPrompt(currentPrompt);
                     }}
                   >
-                    <p className="font-bold">{currentPrompt.prompt}</p>
-                    <p className="line-clamp-1">
+                    <p className="font-bold">{currentPrompt.prompt}:</p>
+                    <p className="text-left flex-grow mr-auto line-clamp-1">
                       {currentPrompt.id == selectedAssistant.id && "(default) "}
-                      {currentPrompt.content}
+                      {currentPrompt.content?.trim()}
                     </p>
                   </button>
                 ))}

diff --git a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
@@ -46,6 +46,7 @@ export function ChatSessionDisplay({
   showDeleteModal?: (chatSession: ChatSession) => void;
 }) {
   const router = useRouter();
+  const [isHovering, setIsHovering] = useState(false);
   const [isRenamingChat, setIsRenamingChat] = useState(false);
   const [isMoreOptionsDropdownOpen, setIsMoreOptionsDropdownOpen] =
     useState(false);
@@ -97,6 +98,11 @@ export function ChatSessionDisplay({
       <Link
         className="flex my-1 group relative"
         key={chatSession.id}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => {
+          setIsMoreOptionsDropdownOpen(false);
+          setIsHovering(false);
+        }}
         onClick={() => {
           if (settings?.isMobile && closeSidebar) {
             closeSidebar();
@@ -145,7 +151,7 @@ export function ChatSessionDisplay({
                 </p>
               )}
 
-              {isSelected &&
+              {isHovering &&
                 (isRenamingChat ? (
                   <div className="ml-auto my-auto items-center flex">
                     <div
@@ -185,54 +191,68 @@ export function ChatSessionDisplay({
                     )}
 
                     <div>
-                      <div
-                        onClick={() => {
-                          setIsMoreOptionsDropdownOpen(
-                            !isMoreOptionsDropdownOpen
-                          );
-                        }}
-                        className={"-my-1"}
-                      >
-                        <Popover
-                          open={isMoreOptionsDropdownOpen}
-                          onOpenChange={(open: boolean) =>
-                            setIsMoreOptionsDropdownOpen(open)
-                          }
-                          content={
-                            <div className="hover:bg-black/10 p-1 rounded">
-                              <FiMoreHorizontal size={16} />
-                            </div>
-                          }
-                          popover={
-                            <div className="border border-border rounded-lg bg-background z-50 w-32">
-                              {showShareModal && (
-                                <DefaultDropdownElement
-                                  name="Share"
-                                  icon={FiShare2}
-                                  onSelect={() => showShareModal(chatSession)}
-                                />
-                              )}
-                              <DefaultDropdownElement
-                                name="Rename"
-                                icon={FiEdit2}
-                                onSelect={() => setIsRenamingChat(true)}
-                              />
-                            </div>
-                          }
-                          requiresContentPadding
-                          sideOffset={6}
-                          triggerMaxWidth
-                        />
-                      </div>
+                      {search ? (
+                        showDeleteModal && (
+                          <div
+                            onClick={() => showDeleteModal(chatSession)}
+                            className={`p-1 -m-1 rounded ml-1`}
+                          >
+                            <FiTrash size={16} />
+                          </div>
+                        )
+                      ) : (
+                        <div
+                          onClick={() => {
+                            setIsMoreOptionsDropdownOpen(
+                              !isMoreOptionsDropdownOpen
+                            );
+                          }}
+                          className="-my-1"
+                        >
+                          <Popover
+                            open={isMoreOptionsDropdownOpen}
+                            onOpenChange={(open: boolean) =>
+                              setIsMoreOptionsDropdownOpen(open)
+                            }
+                            content={
+                              <div className="p-1 rounded">
+                                <FiMoreHorizontal size={16} />
+                              </div>
+                            }
+                            popover={
+                              <div className="border border-border rounded-lg bg-background z-50 w-32">
+                                {showShareModal && (
+                                  <DefaultDropdownElement
+                                    name="Share"
+                                    icon={FiShare2}
+                                    onSelect={() => showShareModal(chatSession)}
+                                  />
+                                )}
+                                {!search && (
+                                  <DefaultDropdownElement
+                                    name="Rename"
+                                    icon={FiEdit2}
+                                    onSelect={() => setIsRenamingChat(true)}
+                                  />
+                                )}
+                                {showDeleteModal && (
+                                  <DefaultDropdownElement
+                                    name="Delete"
+                                    icon={FiTrash}
+                                    onSelect={() =>
+                                      showDeleteModal(chatSession)
+                                    }
+                                  />
+                                )}
+                              </div>
+                            }
+                            requiresContentPadding
+                            sideOffset={6}
+                            triggerMaxWidth
+                          />
+                        </div>
+                      )}
                     </div>
-                    {showDeleteModal && (
-                      <div
-                        onClick={() => showDeleteModal(chatSession)}
-                        className={`hover:bg-black/10 p-1 -m-1 rounded ml-1`}
-                      >
-                        <FiTrash size={16} />
-                      </div>
-                    )}
                   </div>
                 ))}
             </div>

diff --git a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
@@ -53,9 +53,14 @@ const ToggleSwitch = () => {
         onClick={() => handleTabChange("search")}
       >
         <SearchIcon size={16} className="mr-2" />
-        <div className="flex items-end">
+        <div className="flex  items-center">
           Search
-          <div className="ml-2 flex items-end">{commandSymbol}S</div>
+          <div className="ml-2 flex content-center">
+            <span className="leading-none pb-[1px] my-auto">
+              {commandSymbol}
+            </span>
+            <span className="my-auto">S</span>
+          </div>
         </div>
       </button>
       <button
@@ -69,7 +74,12 @@ const ToggleSwitch = () => {
         <ChatIcon size={16} className="mr-2" />
         <div className="items-end flex">
           Chat
-          <div className="ml-2 flex items-end">{commandSymbol}D</div>
+          <div className="ml-2 flex content-center">
+            <span className="leading-none pb-[1px] my-auto">
+              {commandSymbol}
+            </span>
+            <span className="my-auto">D</span>
+          </div>
         </div>
       </button>
     </div>

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
@@ -36,7 +36,7 @@
 
 .include-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: #888 #f1f1f1;
+  scrollbar-color: #888 transparent;
 }
 
 .inputscroll::-webkit-scrollbar-track {

diff --git a/web/src/components/chat_search/MinimalMarkdown.tsx b/web/src/components/chat_search/MinimalMarkdown.tsx
@@ -1,15 +1,18 @@
+import { CodeBlock } from "@/app/chat/message/CodeBlock";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 interface MinimalMarkdownProps {
   content: string;
   className?: string;
+  useCodeBlock?: boolean;
 }
 
 export const MinimalMarkdown: React.FC<MinimalMarkdownProps> = ({
   content,
   className = "",
+  useCodeBlock = false,
 }) => {
   return (
     <ReactMarkdown
@@ -26,6 +29,11 @@ export const MinimalMarkdown: React.FC<MinimalMarkdownProps> = ({
         p: ({ node, ...props }) => (
           <p {...props} className="text-wrap break-word text-sm m-0 w-full" />
         ),
+        code: useCodeBlock
+          ? (props) => (
+              <CodeBlock className="w-full" {...props} content={content} />
+            )
+          : (props) => <code {...props} />,
       }}
       remarkPlugins={[remarkGfm]}
     >

diff --git a/web/src/components/llm/LLMList.tsx b/web/src/components/llm/LLMList.tsx
@@ -1,14 +1,18 @@
 import React from "react";
 import { getDisplayNameForModel } from "@/lib/hooks";
 import { structureValue } from "@/lib/llm/utils";
-import { LLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
+import {
+  getProviderIcon,
+  LLMProviderDescriptor,
+} from "@/app/admin/configuration/llm/interfaces";
 
 interface LlmListProps {
   llmProviders: LLMProviderDescriptor[];
   currentLlm: string;
   onSelect: (value: string | null) => void;
   userDefault?: string | null;
   scrollable?: boolean;
+  hideProviderIcon?: boolean;
 }
 
 export const LlmList: React.FC<LlmListProps> = ({
@@ -19,7 +23,11 @@ export const LlmList: React.FC<LlmListProps> = ({
   scrollable,
 }) => {
   const llmOptionsByProvider: {
-    [provider: string]: { name: string; value: string }[];
+    [provider: string]: {
+      name: string;
+      value: string;
+      icon: React.FC<{ size?: number; className?: string }>;
+    }[];
   } = {};
   const uniqueModelNames = new Set<string>();
 
@@ -39,6 +47,7 @@ export const LlmList: React.FC<LlmListProps> = ({
               llmProvider.provider,
               modelName
             ),
+            icon: getProviderIcon(llmProvider.provider),
           });
         }
       }
@@ -67,17 +76,18 @@ export const LlmList: React.FC<LlmListProps> = ({
           User Default (currently {getDisplayNameForModel(userDefault)})
         </button>
       )}
-      {llmOptions.map(({ name, value }, index) => (
+      {llmOptions.map(({ name, icon, value }, index) => (
         <button
           type="button"
           key={index}
-          className={`w-full py-1.5 px-2 text-sm ${
+          className={`w-full py-1.5 flex  gap-x-2 px-2 text-sm ${
             currentLlm == name
               ? "bg-background-200"
               : "bg-background hover:bg-background-100"
           } text-left rounded`}
           onClick={() => onSelect(value)}
         >
+          {icon({ size: 16 })}
           {getDisplayNameForModel(name)}
         </button>
       ))}

diff --git a/web/src/components/search/SearchBar.tsx b/web/src/components/search/SearchBar.tsx
@@ -71,7 +71,7 @@ export const AnimatedToggle = ({
             Get quality results immediately, best suited for instant access to
             your documents.
           </p>
-          <p className="mt-2 text-xs">Shortcut: ({commandSymbol}/)</p>
+          <p className="mt-2 flex text-xs">Shortcut: ({commandSymbol}/)</p>
         </div>
       }
     >