🎉 feat: Optimizations and Anthropic Title Generation (#2184)

* feat: add claude-3-haiku-20240307 to default anthropic list

* refactor: optimize `saveMessage` calls mid-stream via throttling

* chore: remove addMetadata operations and consolidate in BaseClient

* fix(listAssistantsForAzure): attempt to specify correct model mapping as accurately as possible (#2177)

* refactor(client): update last conversation setup with current assistant model, call newConvo again when assistants load to allow fast initial load and ensure assistant model is always the default, not the last selected model

* refactor(cache): explicitly add TTL of 2 minutes when setting titleCache and add default TTL of 10 minutes to abortKeys cache

* feat(AnthropicClient): conversation titling using Anthropic Function Calling

* chore: remove extraneous token usage logging

* fix(convos): unhandled edge case for conversation grouping (undefined conversation)

* style: Improved style of Search Bar after recent UI update

* chore: remove unused code, content part helpers

* feat: always show code option

client/src/components/Chat/Messages/Content/CodeAnalyze.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
+import { useRecoilValue } from 'recoil';
 import ProgressCircle from './ProgressCircle';
 import ProgressText from './ProgressText';
 import FinishedIcon from './FinishedIcon';
 import MarkdownLite from './MarkdownLite';
 import { useProgress } from '~/hooks';
+import store from '~/store';
 
 export default function CodeAnalyze({
   initialProgress = 0.1,
@@ -14,7 +16,8 @@ export default function CodeAnalyze({
   code: string;
   outputs: Record<string, unknown>[];
 }) {
-  const [showCode, setShowCode] = useState(false);
+  const showCodeDefault = useRecoilValue(store.showCode);
+  const [showCode, setShowCode] = useState(showCodeDefault);
   const progress = useProgress(initialProgress);
   const radius = 56.08695652173913;
   const circumference = 2 * Math.PI * radius;

client/src/components/Endpoints/Settings/Advanced.tsx

@@ -20,6 +20,7 @@ export default function Settings({
   setOption,
   readonly,
 }: Omit<TModelSelectProps, 'models'>) {
+  /* This is an unfinished component for future update */
   const localize = useLocalize();
   const {
     endpoint,

client/src/components/Nav/SearchBar.tsx

@@ -44,7 +44,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
   return (
     <div
       ref={ref}
-      className="relative mt-1 flex flex h-10 cursor-pointer items-center gap-3 rounded-lg border-white bg-gray-50 px-2 px-3 py-2 text-black transition-colors duration-200 hover:bg-gray-200 focus:bg-gray-800 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
+      className="relative mt-1 flex flex h-10 cursor-pointer items-center gap-3 rounded-lg border-white bg-gray-50 px-2 px-3 py-2 text-black transition-colors duration-200 focus-within:bg-gray-200 hover:bg-gray-200 dark:bg-gray-750 dark:text-white dark:focus-within:bg-gray-800 dark:hover:bg-gray-800"
     >
       {<Search className="absolute left-3 h-4 w-4" />}
       <input

client/src/components/Nav/SettingsTabs/General/General.tsx

@@ -14,6 +14,7 @@ import {
 import type { TDangerButtonProps } from '~/common';
 import HideSidePanelSwitch from './HideSidePanelSwitch';
 import AutoScrollSwitch from './AutoScrollSwitch';
+import ShowCodeSwitch from './ShowCodeSwitch';
 import { Dropdown } from '~/components/ui';
 import DangerButton from '../DangerButton';
 import store from '~/store';
@@ -181,6 +182,17 @@ function General() {
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <LangSelector langcode={selectedLang} onChange={changeLang} />
         </div>
+
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+          <AutoScrollSwitch />
+        </div>
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+          <ShowCodeSwitch />
+        </div>
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+          <HideSidePanelSwitch />
+        </div>
+        {/* Clear Chats should be last */}
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <ClearChatsButton
             confirmClear={confirmClear}
@@ -189,12 +201,6 @@ function General() {
             mutation={clearConvosMutation}
           />
         </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
-          <AutoScrollSwitch />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
-          <HideSidePanelSwitch />
-        </div>
       </div>
     </Tabs.Content>
   );

client/src/components/Nav/SettingsTabs/General/ShowCodeSwitch.tsx

@@ -0,0 +1,33 @@
+import { useRecoilState } from 'recoil';
+import { Switch } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+export default function ShowCodeSwitch({
+  onCheckedChange,
+}: {
+  onCheckedChange?: (value: boolean) => void;
+}) {
+  const [showCode, setShowCode] = useRecoilState<boolean>(store.showCode);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setShowCode(value);
+    if (onCheckedChange) {
+      onCheckedChange(value);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div> {localize('com_nav_show_code')} </div>
+      <Switch
+        id="showCode"
+        checked={showCode}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4 mt-2"
+        data-testid="showCode"
+      />
+    </div>
+  );
+}