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/svg/AnthropicIcon.tsx

@@ -1,6 +1,13 @@
-export default function AnthropicIcon({ size = 25 }) {
+import { cn } from '~/utils';
+export default function AnthropicIcon({ size = 25, className = '' }) {
   return (
-    <svg viewBox="0 0 24 16" overflow="visible" width={size} height={size}>
+    <svg
+      viewBox="0 0 24 16"
+      overflow="visible"
+      width={size}
+      height={size}
+      className={cn('fill-current text-black', className)}
+    >
       <g
         style={{
           transform: 'translateX(13px) rotateZ(0deg)',
@@ -9,7 +16,7 @@ export default function AnthropicIcon({ size = 25 }) {
       >
         <path
           shapeRendering="geometricPrecision"
-          fill="rgb(24,24,24)"
+          // fill="rgb(24,24,24)"
           fillOpacity="1"
           d=" M0,0 C0,0 6.1677093505859375,15.470022201538086 6.1677093505859375,15.470022201538086 C6.1677093505859375,15.470022201538086 9.550004005432129,15.470022201538086 9.550004005432129,15.470022201538086 C9.550004005432129,15.470022201538086 3.382294178009033,0 3.382294178009033,0 C3.382294178009033,0 0,0 0,0 C0,0 0,0 0,0z"
         ></path>
@@ -23,7 +30,7 @@ export default function AnthropicIcon({ size = 25 }) {
       >
         <path
           shapeRendering="geometricPrecision"
-          fill="rgb(24,24,24)"
+          // fill="rgb(24,24,24)"
           fillOpacity="1"
           d=" M5.824605464935303,9.348296165466309 C5.824605464935303,9.348296165466309 7.93500280380249,3.911694288253784 7.93500280380249,3.911694288253784 C7.93500280380249,3.911694288253784 10.045400619506836,9.348296165466309 10.045400619506836,9.348296165466309 C10.045400619506836,9.348296165466309 5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309 C5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309z M6.166755199432373,0 C6.166755199432373,0 0,15.470022201538086 0,15.470022201538086 C0,15.470022201538086 3.4480772018432617,15.470022201538086 3.4480772018432617,15.470022201538086 C3.4480772018432617,15.470022201538086 4.709278583526611,12.22130012512207 4.709278583526611,12.22130012512207 C4.709278583526611,12.22130012512207 11.16093635559082,12.22130012512207 11.16093635559082,12.22130012512207 C11.16093635559082,12.22130012512207 12.421928405761719,15.470022201538086 12.421928405761719,15.470022201538086 C12.421928405761719,15.470022201538086 15.87000560760498,15.470022201538086 15.87000560760498,15.470022201538086 C15.87000560760498,15.470022201538086 9.703250885009766,0 9.703250885009766,0 C9.703250885009766,0 6.166755199432373,0 6.166755199432373,0 C6.166755199432373,0 6.166755199432373,0 6.166755199432373,0z"
         ></path>

client/src/components/svg/AttachmentIcon.tsx

@@ -0,0 +1,19 @@
+export default function AttachmentIcon({ className = '' }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 7C9 4.23858 11.2386 2 14 2C16.7614 2 19 4.23858 19 7V15C19 18.866 15.866 22 12 22C8.13401 22 5 18.866 5 15V9C5 8.44772 5.44772 8 6 8C6.55228 8 7 8.44772 7 9V15C7 17.7614 9.23858 20 12 20C14.7614 20 17 17.7614 17 15V7C17 5.34315 15.6569 4 14 4C12.3431 4 11 5.34315 11 7V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V9C13 8.44772 13.4477 8 14 8C14.5523 8 15 8.44772 15 9V15C15 16.6569 13.6569 18 12 18C10.3431 18 9 16.6569 9 15V7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

client/src/components/svg/BingAIMinimalIcon.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-
-export default function BingAIMinimalIcon() {
+import { cn } from '~/utils';
+export default function BingAIMinimalIcon({ className = '' }) {
   return (
     <svg
       stroke="currentColor"
@@ -9,7 +8,7 @@ export default function BingAIMinimalIcon() {
       viewBox="0 0 24 24"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="h-4 w-4"
+      className={cn('h-4 w-4', className)}
       height="1em"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"

client/src/components/svg/CheckMark.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import { cn } from '~/utils';
 
-export default function CheckMark() {
+export default function CheckMark({ className = '' }: { className?: string }) {
   return (
     <svg
       stroke="currentColor"
@@ -9,7 +9,7 @@ export default function CheckMark() {
       viewBox="0 0 24 24"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="h-4 w-4"
+      className={cn('h-4 w-4', className)}
       height="1em"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"

client/src/components/svg/LightningIcon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import { cn } from '~/utils';
 
-export default function LightningIcon() {
+export default function LightningIcon({ className = '' }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,7 +9,7 @@ export default function LightningIcon() {
       strokeWidth="1.5"
       stroke="currentColor"
       aria-hidden="true"
-      className="h-6 w-6"
+      className={cn('h-6 w-6', className)}
     >
       <path
         strokeLinecap="round"

client/src/components/svg/MinimalPlugin.tsx

@@ -0,0 +1,21 @@
+import { cn } from '~/utils';
+
+export default function MinimalPlugin({ className = '' }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('icon-md', className)}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.4646 19C15.2219 20.6961 13.7632 22 12 22C10.2368 22 8.77806 20.6961 8.53544 19H6C4.34315 19 3 17.6569 3 16V13.5C3 12.9477 3.44772 12.5 4 12.5H4.5C5.32843 12.5 6 11.8284 6 11C6 10.1716 5.32843 9.5 4.5 9.5H4C3.44772 9.5 3 9.05229 3 8.5L3 6C3 4.34315 4.34315 3 6 3L18 3C19.6569 3 21 4.34315 21 6L21 16C21 17.6569 19.6569 19 18 19H15.4646ZM12 20C12.8284 20 13.5 19.3284 13.5 18.5V18C13.5 17.4477 13.9477 17 14.5 17H18C18.5523 17 19 16.5523 19 16L19 6C19 5.44772 18.5523 5 18 5L6 5C5.44772 5 5 5.44772 5 6V7.53544C6.69615 7.77806 8 9.23676 8 11C8 12.7632 6.69615 14.2219 5 14.4646L5 16C5 16.5523 5.44771 17 6 17H9.5C10.0523 17 10.5 17.4477 10.5 18V18.5C10.5 19.3284 11.1716 20 12 20Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}

client/src/components/svg/RenameIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function RenameIcon() {
   return (
     <svg

client/src/components/svg/SendIcon.tsx

@@ -0,0 +1,21 @@
+import { cn } from '~/utils';
+
+export default function SendIcon({ size = 24, className = '' }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={'0 0 24 24'}
+      fill="none"
+      className={cn('text-white dark:text-black', className)}
+    >
+      <path
+        d="M7 11L12 6L17 11M12 18V7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

client/src/components/svg/index.ts

@@ -8,6 +8,8 @@ export { default as Clipboard } from './Clipboard';
 export { default as CheckMark } from './CheckMark';
 export { default as CrossIcon } from './CrossIcon';
 export { default as LogOutIcon } from './LogOutIcon';
+export { default as LightningIcon } from './LightningIcon';
+export { default as AttachmentIcon } from './AttachmentIcon';
 export { default as MessagesSquared } from './MessagesSquared';
 export { default as StopGeneratingIcon } from './StopGeneratingIcon';
 export { default as RegenerateIcon } from './RegenerateIcon';
@@ -18,10 +20,13 @@ export { default as OpenIDIcon } from './OpenIDIcon';
 export { default as GithubIcon } from './GithubIcon';
 export { default as DiscordIcon } from './DiscordIcon';
 export { default as AnthropicIcon } from './AnthropicIcon';
+export { default as RenameIcon } from './RenameIcon';
+export { default as SendIcon } from './SendIcon';
 export { default as LinkIcon } from './LinkIcon';
 export { default as DotsIcon } from './DotsIcon';
 export { default as GearIcon } from './GearIcon';
 export { default as TrashIcon } from './TrashIcon';
+export { default as MinimalPlugin } from './MinimalPlugin';
 export { default as AzureMinimalIcon } from './AzureMinimalIcon';
 export { default as OpenAIMinimalIcon } from './OpenAIMinimalIcon';
 export { default as ChatGPTMinimalIcon } from './ChatGPTMinimalIcon';