feat(chat): marketplace application view (Issue #2037)

.ort.yml

@@ -31,7 +31,8 @@ resolutions:
         'NPM:@plotly:mapbox-gl:1\\.13\\.4'\\."
       reason: 'CANT_FIX_EXCEPTION'
       comment: 'The dependency has BSD-3-Clause license in github repo'
-    - message: "The license NOASSERTION is currently not covered by policy rules\\. \
+    - message:
+        "The license NOASSERTION is currently not covered by policy rules\\. \
         The license was declared in package 'NPM:@plotly:mapbox-gl:1\\.13\\.4'\\."
       reason: 'CANT_FIX_EXCEPTION'
       comment: 'The dependency has BSD-3-Clause license in github repo'

apps/chat/src/components/Chat/Chat.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'next-i18next';
 import classNames from 'classnames';
 
 import { clearStateForMessages } from '@/src/utils/app/clear-messages-state';
+import { getConversationModelParams } from '@/src/utils/app/conversation';
 import { isSmallScreen } from '@/src/utils/app/mobile';
 
 import {
@@ -14,7 +15,6 @@ import {
   LikeState,
   MergedMessages,
   Message,
-  Replay,
   Role,
 } from '@/src/types/chat';
 import { EntityType, UploadStatus } from '@/src/types/common';
@@ -39,7 +39,6 @@ import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UISelectors } from '@/src/store/ui/ui.reducers';
 
 import { REPLAY_AS_IS_MODEL } from '@/src/constants/chat';
-import { DEFAULT_ASSISTANT_SUBMODEL_ID } from '@/src/constants/default-ui-settings';
 
 import Loader from '../Common/Loader';
 import { NotFoundEntity } from '../Common/NotFoundEntity';
@@ -334,51 +333,6 @@ export const ChatView = memo(() => {
     [dispatch],
   );
 
-  const applySelectedModel = useCallback(
-    (
-      conversation: Conversation,
-      modelId: string | undefined,
-    ): Partial<Conversation> => {
-      if (modelId === REPLAY_AS_IS_MODEL && conversation.replay) {
-        return {
-          replay: {
-            ...conversation.replay,
-            replayAsIs: true,
-          },
-        };
-      }
-      const newAiEntity = modelId ? modelsMap[modelId] : undefined;
-      if (!modelId || !newAiEntity) {
-        return {};
-      }
-
-      const updatedReplay: Replay | undefined = !conversation.replay?.isReplay
-        ? conversation.replay
-        : {
-            ...conversation.replay,
-            replayAsIs: false,
-          };
-      const updatedAddons =
-        conversation.replay &&
-        conversation.replay.isReplay &&
-        conversation.replay.replayAsIs &&
-        !updatedReplay?.replayAsIs
-          ? conversation.selectedAddons.filter((addonId) => addonsMap[addonId])
-          : conversation.selectedAddons;
-
-      return {
-        model: { id: newAiEntity.reference },
-        assistantModelId:
-          newAiEntity.type === EntityType.Assistant
-            ? DEFAULT_ASSISTANT_SUBMODEL_ID
-            : undefined,
-        replay: updatedReplay,
-        selectedAddons: updatedAddons,
-      };
-    },
-    [addonsMap, modelsMap],
-  );
-
   const handleSelectModel = useCallback(
     (conversation: Conversation, modelId: string) => {
       const newAiEntity = modelsMap[modelId];
@@ -390,12 +344,17 @@ export const ChatView = memo(() => {
         ConversationsActions.updateConversation({
           id: conversation.id,
           values: {
-            ...applySelectedModel(conversation, modelId),
+            ...getConversationModelParams(
+              conversation,
+              modelId,
+              modelsMap,
+              addonsMap,
+            ),
           },
         }),
       );
     },
-    [applySelectedModel, dispatch, modelsMap],
+    [addonsMap, dispatch, modelsMap],
   );
 
   const handleSelectAssistantSubModel = useCallback(
@@ -560,7 +519,12 @@ export const ChatView = memo(() => {
             id: conversation.id,
             values: {
               messages: clearStateForMessages(conversation.messages),
-              ...applySelectedModel(conversation, temporarySettings.modelId),
+              ...getConversationModelParams(
+                conversation,
+                temporarySettings.modelId,
+                modelsMap,
+                addonsMap,
+              ),
               prompt: temporarySettings.prompt,
               temperature: temporarySettings.temperature,
               assistantModelId: temporarySettings.currentAssistentModelId,
@@ -573,7 +537,7 @@ export const ChatView = memo(() => {
         );
       }
     });
-  }, [selectedConversations, dispatch, applySelectedModel, addonsMap]);
+  }, [selectedConversations, dispatch, modelsMap, addonsMap]);
 
   const handleTemporarySettingsSave = useCallback(
     (conversation: Conversation, args: ConversationsTemporarySettings) => {

apps/chat/src/components/Chat/ModelList.tsx

@@ -118,6 +118,11 @@ const ModelGroup = ({
     }),
   );
 
+  const handleSelectVersion = useCallback(
+    (entity: DialAIEntityModel) => onSelect(entity.id),
+    [onSelect],
+  );
+
   const menuItems: DisplayMenuItemProps[] = useMemo(
     () => [
       {
@@ -227,7 +232,7 @@ const ModelGroup = ({
                 <ModelVersionSelect
                   className="h-max"
                   entities={entities}
-                  onSelect={onSelect}
+                  onSelect={handleSelectVersion}
                   currentEntity={currentEntity}
                 />
                 {isCustomApplicationsEnabled &&

apps/chat/src/components/Chat/ModelVersionSelect.tsx

@@ -1,8 +1,8 @@
-import { MouseEvent, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 
-import { DialAIEntity } from '@/src/types/models';
+import { DialAIEntity, DialAIEntityModel } from '@/src/types/models';
 
 import { Menu, MenuItem } from '@/src/components/Common/DropdownMenu';
 
@@ -12,9 +12,9 @@ import ChevronDownIcon from '@/public/images/icons/chevron-down.svg';
 import orderBy from 'lodash-es/orderBy';
 
 interface ModelVersionSelectProps {
-  entities: DialAIEntity[];
+  entities: DialAIEntityModel[];
   currentEntity: DialAIEntity;
-  onSelect: (id: string) => void;
+  onSelect: (id: DialAIEntityModel) => void;
   className?: string;
 }
 
@@ -26,8 +26,8 @@ export const ModelVersionSelect = ({
 }: ModelVersionSelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const onChangeHandler = (e: MouseEvent<HTMLButtonElement>) => {
-    onSelect(e.currentTarget.value);
+  const onChangeHandler = (entity: DialAIEntityModel) => {
+    onSelect(entity);
     setIsOpen(false);
   };
 
@@ -46,6 +46,7 @@ export const ModelVersionSelect = ({
       type="contextMenu"
       placement="bottom-end"
       onOpenChange={setIsOpen}
+      listClassName="z-[60]"
       data-qa="model-version-select"
       trigger={
         <div
@@ -81,7 +82,7 @@ export const ModelVersionSelect = ({
             </div>
           }
           value={entity.id}
-          onClick={onChangeHandler}
+          onClick={() => onChangeHandler(entity)}
           data-model-versions
           data-qa="model-version-option"
         />

apps/chat/src/components/Chatbar/ModelIcon.tsx

@@ -18,6 +18,7 @@ interface Props {
   animate?: boolean;
   isCustomTooltip?: boolean;
   isInvalid?: boolean;
+  enableShrinking?: boolean;
 }
 
 const ModelIconTemplate = memo(
@@ -27,6 +28,7 @@ const ModelIconTemplate = memo(
     animate,
     entityId,
     isInvalid,
+    enableShrinking,
   }: Omit<Props, 'isCustomTooltip'>) => {
     const fallbackUrl =
       entity?.type === EntityType.Addon
@@ -40,6 +42,7 @@ const ModelIconTemplate = memo(
           'relative inline-block shrink-0 leading-none',
           isInvalid ? 'text-secondary' : 'text-primary',
           animate && 'animate-bounce',
+          enableShrinking && 'shrink',
         )}
         style={{ height: `${size}px`, width: `${size}px` }}
       >

apps/chat/src/components/Common/FullScreenImages.tsx

@@ -0,0 +1,103 @@
+import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react';
+import { useState } from 'react';
+
+import Image from 'next/image';
+
+import classNames from 'classnames';
+
+import { useMobileSwipe } from '@/src/hooks/useMobileSwipe';
+
+import { ModalState } from '@/src/types/modal';
+
+import Modal from './Modal';
+
+interface Props {
+  images: string[];
+  alt: string;
+  onClose: () => void;
+  defaultIdx?: number;
+}
+
+const FullScreenImages = ({ images, alt, onClose, defaultIdx }: Props) => {
+  const [currentImage, setCurrentImage] = useState(defaultIdx ?? 0);
+
+  const swipeHandlers = useMobileSwipe({
+    onSwipedLeft: () => {
+      if (currentImage + 1 < images.length) {
+        setCurrentImage((idx) => idx + 1);
+      }
+    },
+    onSwipedRight: () => {
+      if (currentImage !== 0) {
+        setCurrentImage((idx) => idx - 1);
+      }
+    },
+  });
+
+  return (
+    <Modal
+      state={ModalState.OPENED}
+      portalId="theme-main"
+      hideClose
+      dataQa="full-screen-img"
+      containerClassName="flex items-center justify-center size-full !bg-layer-0"
+      overlayClassName="z-[60] bg-layer-0"
+      onClose={onClose}
+    >
+      <div className="size-full px-4 py-2">
+        <div className="flex w-full justify-end">
+          <div className="flex w-1/2 items-center justify-between">
+            <span className="font-semibold md:text-lg">
+              {currentImage + 1} / {images.length}
+            </span>
+          </div>
+          <button
+            className="rounded text-secondary hover:text-accent-primary"
+            onClick={onClose}
+          >
+            <IconX height={24} width={24} />
+          </button>
+        </div>
+
+        <div className="relative mt-10 flex h-5/6 w-full items-center">
+          <button
+            onClick={() => setCurrentImage((idx) => idx - 1)}
+            disabled={currentImage === 0}
+            className={classNames(
+              'mr-10 hidden rounded-full border-[2px] p-3 md:block',
+              currentImage === 0
+                ? 'cursor-not-allowed border-primary text-controls-disable'
+                : 'border-hover hover:border-accent-primary hover:text-accent-primary',
+            )}
+          >
+            <IconChevronLeft size={18} />
+          </button>
+          <div className="relative flex size-full">
+            <Image
+              src={images[currentImage]}
+              alt={alt}
+              fill
+              sizes="(max-width: 768px) 100vw"
+              className="object-cover"
+              {...swipeHandlers}
+            />
+          </div>
+          <button
+            onClick={() => setCurrentImage((idx) => idx + 1)}
+            disabled={currentImage >= images.length - 1}
+            className={classNames(
+              'ml-10 hidden rounded-full border-[2px] p-3 md:block',
+              currentImage >= images.length - 1
+                ? 'cursor-not-allowed border-primary text-controls-disable'
+                : 'border-hover hover:border-accent-primary hover:text-accent-primary',
+            )}
+          >
+            <IconChevronRight size={18} />
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default FullScreenImages;