🛠️ fix: Custom Endpoint issues, Improve SSE Response Handling (#1510)

* fix(custom): prevent presets using removed custom endpoints from causing frontend errors

* refactor(abortMiddleware): send 204 status when abortController is not found/active, set expected header `application/json` when not set

* fix(useSSE): general improvements:
- Add endpointType to fetch URL in useSSE hook
- use EndpointURLs enum
- handle 204 response by setting `data` to initiated response
- add better error handling UX, make clear when there is an explicit error

client/src/components/Chat/Landing.tsx

@@ -23,6 +23,7 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
   const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
   const iconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
   const iconKey = endpointType ? 'unknown' : endpoint ?? 'unknown';
+  const Icon = icons[iconKey];
 
   return (
     <div className="relative h-full">
@@ -31,7 +32,8 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
         <div className="mb-3 h-[72px] w-[72px]">
           <div className="gizmo-shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
             {endpoint &&
-              icons[iconKey]({
+              Icon &&
+              Icon({
                 size: 41,
                 context: 'landing',
                 className: 'h-2/3 w-2/3',

client/src/components/Chat/Menus/Endpoints/MenuItem.tsx

@@ -82,7 +82,7 @@ const MenuItem: FC<MenuItemProps> = ({
         <div className="flex grow items-center justify-between gap-2">
           <div>
             <div className="flex items-center gap-2">
-              {
+              {Icon && (
                 <Icon
                   size={18}
                   endpoint={endpoint}
@@ -90,7 +90,7 @@ const MenuItem: FC<MenuItemProps> = ({
                   className="icon-md shrink-0 dark:text-white"
                   iconURL={getEndpointField(endpointsConfig, endpoint, 'iconURL')}
                 />
-              }
+              )}
               <div>
                 {title}
                 <div className="text-token-text-tertiary">{description}</div>

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -97,7 +97,8 @@ const PresetItems: FC<{
 
             const iconKey = getEndpointField(endpointsConfig, preset.endpoint, 'type')
               ? 'unknown'
-              : preset.endpoint ?? 'unknown';
+              : preset.endpointType ?? preset.endpoint ?? 'unknown';
+            const Icon = icons[iconKey];
 
             return (
               <Close asChild key={`preset-${preset.presetId}`}>
@@ -109,12 +110,15 @@ const PresetItems: FC<{
                       title={getPresetTitle(preset)}
                       disableHover={true}
                       onClick={() => onSelectPreset(preset)}
-                      icon={icons[iconKey]({
-                        context: 'menu-item',
-                        iconURL: getEndpointField(endpointsConfig, preset.endpoint, 'iconURL'),
-                        className: 'icon-md mr-1 dark:text-white',
-                        endpoint: preset.endpoint,
-                      })}
+                      icon={
+                        Icon &&
+                        Icon({
+                          context: 'menu-item',
+                          iconURL: getEndpointField(endpointsConfig, preset.endpoint, 'iconURL'),
+                          className: 'icon-md mr-1 dark:text-white',
+                          endpoint: preset.endpoint,
+                        })
+                      }
                       selected={false}
                       data-testid={`preset-item-${preset}`}
                     >