WIP: Update UI to match Official Style; Vision and Assistants 👷🏽 (#1190)

* wip: initial client side code

* wip: initial api code

* refactor: export query keys from own module, export assistant hooks

* refactor(SelectDropDown): more customization via props

* feat: create Assistant and render real Assistants

* refactor: major refactor of UI components to allow multi-chat, working alongside CreationPanel

* refactor: move assistant routes to own directory

* fix(CreationHeader): state issue with assistant select

* refactor: style changes for form, fix setSiblingIdx from useChatHelpers to use latestMessageParentId, fix render issue with ChatView and change location

* feat: parseCompactConvo: begin refactor of slimmer JSON payloads between client/api

* refactor(endpoints): add assistant endpoint, also use EModelEndpoint as much as possible

* refactor(useGetConversationsQuery): use object to access query data easily

* fix(MultiMessage): react warning of bad state set, making use of effect during render (instead of useEffect)

* fix(useNewConvo): use correct atom key (index instead of convoId) for reset latestMessageFamily

* refactor: make routing navigation/conversation change simpler

* chore: add removeNullishValues for smaller payloads, remove unused fields, setup frontend pinging of assistant endpoint

* WIP: initial complete assistant run handling

* fix: CreationPanel form correctly setting internal state

* refactor(api/assistants/chat): revise functions to working run handling strategy

* refactor(UI): initial major refactor of ChatForm and options

* feat: textarea hook

* refactor: useAuthRedirect hook and change directory name

* feat: add ChatRoute (/c/), make optionsBar absolute and change on textarea height, add temp header

* feat: match new toggle Nav open button to ChatGPT's

* feat: add OpenAI custom classnames

* feat: useOriginNavigate

* feat: messages loading view

* fix: conversation navigation and effects

* refactor: make toggle change nav opacity

* WIP: new endpoint menu

* feat: NewEndpointsMenu complete

* fix: ensure set key dialog shows on endpoint change, and new conversation resets messages

* WIP: textarea styling fix, add temp footer, create basic file handling component

* feat: image file handling (UI)

* feat: PopOver and ModelSelect in Header, remove GenButtons

* feat: drop file handling

* refactor: bug fixes
use SSE at route level
add opts to useOriginNavigate
delay render of unfinishedMessage to avoid flickering
pass params (convoId) to chatHelpers to set messages query data based on param when the route is new (fixes can't continue convo on /new/)
style(MessagesView): matches height to official
fix(SSE): pass paramId and invalidate convos
style(Message): make bg uniform

* refactor(useSSE): setStorage within setConversation updates

* feat: conversationKeysAtom, allConversationsSelector, update convos query data on created message (if new), correctly handle convo deletion (individual)

* feat: add popover select dropdowns to allow options in header while allowing horizontal scroll for mobile

* style(pluginsSelect): styling changes

* refactor(NewEndpointsMenu): make UI components modular

* feat: Presets complete

* fix: preset editing, make by index

* fix: conversations not setting on inital navigation, fix getMessages() based on query param

* fix: changing preset no longer resets latestMessage

* feat: useOnClickOutside for OptionsPopover and fix bug that causes selection of preset when deleting

* fix: revert /chat/ switchToConvo, also use NewDeleteButton in Convo

* fix: Popover correctly closes on close Popover button using custom condition for useOnClickOutside

* style: new message and nav styling

* style: hover/sibling buttons and preset menu scrolling

* feat: new convo header button

* style(Textarea): minor style changes to textarea buttons

* feat: stop/continue generating and hide hoverbuttons when submitting

* feat: compact AI Provider schemas to make json payloads and db saves smaller

* style: styling changes for consistency on chat route

* fix: created usePresetIndexOptions to prevent bugs between /c/ and /chat/ routes when editing presets, removed redundant code from the new dialog

* chore: make /chat/ route default for now since we still lack full image support

client/src/components/Chat/Input/Files/AttachFile.tsx

@@ -0,0 +1,24 @@
+import type { EModelEndpoint } from 'librechat-data-provider';
+import { AttachmentIcon } from '~/components/svg';
+import { FileUpload } from '~/components/ui';
+import { useFileHandling } from '~/hooks';
+import { supportsFiles } from '~/common';
+
+export default function AttachFile({ endpoint }: { endpoint: EModelEndpoint | '' }) {
+  const { handleFileChange } = useFileHandling();
+  if (!supportsFiles[endpoint]) {
+    return null;
+  }
+
+  return (
+    <div className="absolute bottom-1 left-0 md:left-1">
+      <FileUpload handleFileChange={handleFileChange} className="flex">
+        <button className="btn relative p-0 text-black dark:text-white" aria-label="Attach files">
+          <div className="flex w-full items-center justify-center gap-2">
+            <AttachmentIcon />
+          </div>
+        </button>
+      </FileUpload>
+    </div>
+  );
+}

client/src/components/Chat/Input/Files/DragDropOverlay.tsx

@@ -0,0 +1,56 @@
+export default function DragDropOverlay() {
+  return (
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-100 opacity-80 dark:bg-gray-800 dark:text-gray-100">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 132 108"
+        fill="none"
+        width="132"
+        height="108"
+      >
+        <g clipPath="url(#clip0_3605_64419)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M25.2025 29.3514C10.778 33.2165 8.51524 37.1357 11.8281 49.4995L13.4846 55.6814C16.7975 68.0453 20.7166 70.308 35.1411 66.443L43.3837 64.2344C57.8082 60.3694 60.0709 56.4502 56.758 44.0864L55.1016 37.9044C51.7887 25.5406 47.8695 23.2778 33.445 27.1428L29.3237 28.2471L25.2025 29.3514ZM18.1944 42.7244C18.8572 41.5764 20.325 41.1831 21.4729 41.8459L27.3517 45.24C28.4996 45.9027 28.8929 47.3706 28.2301 48.5185L24.836 54.3972C24.1733 55.5451 22.7054 55.9384 21.5575 55.2757C20.4096 54.613 20.0163 53.1451 20.6791 51.9972L22.8732 48.1969L19.0729 46.0028C17.925 45.3401 17.5317 43.8723 18.1944 42.7244ZM29.4091 56.3843C29.066 55.104 29.8258 53.7879 31.1062 53.4449L40.3791 50.9602C41.6594 50.6172 42.9754 51.377 43.3184 52.6573C43.6615 53.9376 42.9017 55.2536 41.6214 55.5967L32.3485 58.0813C31.0682 58.4244 29.7522 57.6646 29.4091 56.3843Z"
+            fill="#AFC1FF"
+          />
+        </g>
+        <g clipPath="url(#clip1_3605_64419)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M86.8124 13.4036C81.0973 11.8722 78.5673 13.2649 77.0144 19.0603L68.7322 49.97C67.1793 55.7656 68.5935 58.2151 74.4696 59.7895L97.4908 65.958C103.367 67.5326 105.816 66.1184 107.406 60.1848L115.393 30.379C115.536 29.8456 115.217 29.2959 114.681 29.16C113.478 28.8544 112.435 28.6195 111.542 28.4183C106.243 27.2253 106.22 27.2201 109.449 20.7159C109.73 20.1507 109.426 19.4638 108.816 19.3004L86.8124 13.4036ZM87.2582 28.4311C86.234 28.1567 85.1812 28.7645 84.9067 29.7888C84.6323 30.813 85.2401 31.8658 86.2644 32.1403L101.101 36.1158C102.125 36.3902 103.178 35.7824 103.453 34.7581C103.727 33.7339 103.119 32.681 102.095 32.4066L87.2582 28.4311ZM82.9189 37.2074C83.1934 36.1831 84.2462 35.5753 85.2704 35.8497L100.107 39.8252C101.131 40.0996 101.739 41.1524 101.465 42.1767C101.19 43.201 100.137 43.8088 99.1132 43.5343L84.2766 39.5589C83.2523 39.2844 82.6445 38.2316 82.9189 37.2074ZM83.2826 43.2683C82.2584 42.9939 81.2056 43.6017 80.9311 44.626C80.6567 45.6502 81.2645 46.703 82.2888 46.9775L89.7071 48.9652C90.7313 49.2396 91.7841 48.6318 92.0586 47.6076C92.333 46.5833 91.7252 45.5305 90.7009 45.256L83.2826 43.2683Z"
+            fill="#7989FF"
+          />
+        </g>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M40.4004 71.8426C40.4004 57.2141 44.0575 53.5569 61.1242 53.5569H66.0004H70.8766C87.9432 53.5569 91.6004 57.2141 91.6004 71.8426V79.1569C91.6004 93.7855 87.9432 97.4426 70.8766 97.4426H61.1242C44.0575 97.4426 40.4004 93.7855 40.4004 79.1569V71.8426ZM78.8002 67.4995C78.8002 70.1504 76.6512 72.2995 74.0002 72.2995C71.3492 72.2995 69.2002 70.1504 69.2002 67.4995C69.2002 64.8485 71.3492 62.6995 74.0002 62.6995C76.6512 62.6995 78.8002 64.8485 78.8002 67.4995ZM60.7204 70.8597C60.2672 70.2553 59.5559 69.8997 58.8004 69.8997C58.045 69.8997 57.3337 70.2553 56.8804 70.8597L47.2804 83.6597C46.4851 84.72 46.7 86.2244 47.7604 87.0197C48.8208 87.8149 50.3251 87.6 51.1204 86.5397L58.8004 76.2997L66.4804 86.5397C66.8979 87.0962 67.5363 87.4443 68.2303 87.4936C68.9243 87.5429 69.6055 87.2887 70.0975 86.7967L74.8004 82.0938L79.5034 86.7967C80.4406 87.734 81.9602 87.734 82.8975 86.7967C83.8347 85.8595 83.8347 84.3399 82.8975 83.4026L76.4975 77.0026C75.5602 76.0653 74.0406 76.0653 73.1034 77.0026L68.6601 81.4459L60.7204 70.8597Z"
+          fill="#3C46FF"
+        />
+        <defs>
+          <clipPath id="clip0_3605_64419">
+            <rect
+              width="56"
+              height="56"
+              fill="white"
+              transform="translate(0 26.9939) rotate(-15)"
+            />
+          </clipPath>
+          <clipPath id="clip1_3605_64419">
+            <rect
+              width="64"
+              height="64"
+              fill="white"
+              transform="translate(69.5645 0.5) rotate(15)"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+      <h3>Add anything</h3>
+      <h4 className="w-2/3">Drop any file here to add it to the conversation</h4>
+    </div>
+  );
+}

client/src/components/Chat/Input/Files/Image.tsx

@@ -0,0 +1,113 @@
+type styleProps = {
+  backgroundImage?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  backgroundRepeat?: string;
+};
+
+const Image = ({
+  imageBase64,
+  url,
+  onDelete,
+  progress = 1,
+}: {
+  imageBase64?: string;
+  url?: string;
+  onDelete: () => void;
+  progress: number; // between 0 and 1
+}) => {
+  let style: styleProps = {
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+  };
+  if (imageBase64) {
+    style = {
+      ...style,
+      backgroundImage: `url(${imageBase64})`,
+    };
+  } else if (url) {
+    style = {
+      ...style,
+      backgroundImage: `url(${url})`,
+    };
+  }
+
+  if (!style.backgroundImage) {
+    return null;
+  }
+
+  const radius = 55; // Radius of the SVG circle
+  const circumference = 2 * Math.PI * radius;
+
+  // Calculate the offset based on the loading progress
+  const offset = circumference - progress * circumference;
+  const circleCSSProperties = {
+    transition: 'stroke-dashoffset 0.3s linear',
+  };
+
+  return (
+    <div className="group relative inline-block text-sm text-black/70 dark:text-white/90">
+      <div className="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
+        <div className="h-14 w-14">
+          <button
+            type="button"
+            aria-haspopup="dialog"
+            aria-expanded="false"
+            className="h-full w-full"
+            style={style}
+          />
+          {progress < 1 && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black/5 text-white">
+              <svg width="120" height="120" viewBox="0 0 120 120" className="h-6 w-6">
+                <circle
+                  className="origin-[50%_50%] -rotate-90 stroke-gray-400"
+                  strokeWidth="10"
+                  fill="transparent"
+                  r="55"
+                  cx="60"
+                  cy="60"
+                />
+                {/* <circle className="origin-[50%_50%] -rotate-90 transition-[stroke-dashoffset]" stroke="currentColor" strokeWidth="10" strokeDashoffset="311.01767270538954" strokeDasharray="345.57519189487726 345.57519189487726" fill="transparent" r="55" cx="60" cy="60"/>*/}
+                <circle
+                  className="origin-[50%_50%] -rotate-90 transition-[stroke-dashoffset]"
+                  stroke="currentColor"
+                  strokeWidth="10"
+                  strokeDasharray={`${circumference} ${circumference}`}
+                  strokeDashoffset={offset}
+                  fill="transparent"
+                  r="55"
+                  cx="60"
+                  cy="60"
+                  style={circleCSSProperties}
+                />
+              </svg>
+            </div>
+          )}
+        </div>
+      </div>
+      <button
+        className="absolute right-1 top-1 -translate-y-1/2 translate-x-1/2 rounded-full border border-white bg-gray-500 p-0.5 text-white transition-colors hover:bg-black hover:opacity-100 group-hover:opacity-100 md:opacity-0"
+        onClick={onDelete}
+      >
+        <span>
+          <svg
+            stroke="currentColor"
+            fill="none"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="icon-sm"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default Image;

client/src/components/Chat/Input/Files/Images.tsx

@@ -0,0 +1,29 @@
+import Image from './Image';
+import { ExtendedFile } from '~/common';
+
+export default function Images({
+  files,
+  setFiles,
+}: {
+  files: ExtendedFile[];
+  setFiles: React.Dispatch<React.SetStateAction<ExtendedFile[]>>;
+}) {
+  if (files.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mx-2 mt-2 flex flex-wrap gap-2 px-2.5 md:pl-0 md:pr-4">
+      {files.map((file: ExtendedFile, index: number) => {
+        const handleDelete = () => {
+          setFiles((currentFiles) =>
+            currentFiles.filter((_file) => file.preview !== _file.preview),
+          );
+        };
+        return (
+          <Image key={index} url={file.preview} onDelete={handleDelete} progress={file.progress} />
+        );
+      })}
+    </div>
+  );
+}