Merge pull request #505 from refly-ai/feat/model-tip

Feat/model tip
refly-ai · Feb 14, 2025 · a8e568b · a8e568b
2 parents eda8954 + 48b482c
commit a8e568b
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 28 deletions.
diff --git a/packages/ai-workspace-common/src/components/canvas/launchpad/chat-actions/index.tsx b/packages/ai-workspace-common/src/components/canvas/launchpad/chat-actions/index.tsx
@@ -11,6 +11,7 @@ import { ModelInfo } from '@refly/openapi-schema';
 import { cn } from '@refly-packages/utils/index';
 import { useCanvasContext } from '@refly-packages/ai-workspace-common/context/canvas';
 import { useUploadImage } from '@refly-packages/ai-workspace-common/hooks/use-upload-image';
+import { IContextItem } from '@refly-packages/ai-workspace-common/stores/context-panel';
 
 export interface CustomAction {
   icon: React.ReactNode;
@@ -28,12 +29,21 @@ interface ChatActionsProps {
   handleAbort: () => void;
   customActions?: CustomAction[];
   onUploadImage?: (file: File) => Promise<void>;
+  contextItems: IContextItem[];
 }
 
 export const ChatActions = memo(
   (props: ChatActionsProps) => {
-    const { query, model, setModel, handleSendMessage, customActions, className, onUploadImage } =
-      props;
+    const {
+      query,
+      model,
+      setModel,
+      handleSendMessage,
+      customActions,
+      className,
+      onUploadImage,
+      contextItems,
+    } = props;
     const { t } = useTranslation();
     const { canvasId } = useCanvasContext();
     const { handleUploadImage } = useUploadImage();
@@ -69,7 +79,13 @@ export const ChatActions = memo(
     return (
       <div className={cn('flex justify-between items-center', className)} ref={containerRef}>
         <div className="flex gap-2.5">
-          <ModelSelector model={model} setModel={setModel} briefMode={false} trigger={['click']} />
+          <ModelSelector
+            model={model}
+            setModel={setModel}
+            briefMode={false}
+            trigger={['click']}
+            contextItems={contextItems}
+          />
         </div>
         <div className="flex flex-row items-center gap-2">
           {customActions?.map((action, index) => (
@@ -107,7 +123,8 @@ export const ChatActions = memo(
   (prevProps, nextProps) => {
     return (
       prevProps.handleSendMessage === nextProps.handleSendMessage &&
-      prevProps.handleAbort === nextProps.handleAbort
+      prevProps.handleAbort === nextProps.handleAbort &&
+      prevProps.contextItems === nextProps.contextItems
     );
   },
 );

diff --git a/packages/ai-workspace-common/src/components/canvas/launchpad/chat-actions/model-selector.tsx b/packages/ai-workspace-common/src/components/canvas/launchpad/chat-actions/model-selector.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState, useMemo, useCallback, memo } from 'react';
 import { Button, Dropdown, DropdownProps, MenuProps, Progress, Skeleton, Tooltip } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { IconDown } from '@arco-design/web-react/icon';
-import { MdOutlineImageNotSupported } from 'react-icons/md';
 
 import { getPopupContainer } from '@refly-packages/ai-workspace-common/utils/ui';
 import { useUserStoreShallow } from '@refly-packages/ai-workspace-common/stores/user';
@@ -15,17 +14,21 @@ import {
   ModelProviderIcons,
 } from '@refly-packages/ai-workspace-common/components/common/icon';
 import { useListModels } from '@refly-packages/ai-workspace-common/queries';
-import { IconSubscription } from '@refly-packages/ai-workspace-common/components/common/icon';
+import {
+  IconSubscription,
+  IconError,
+} from '@refly-packages/ai-workspace-common/components/common/icon';
 import { LuInfinity } from 'react-icons/lu';
 import { useSiderStoreShallow } from '@refly-packages/ai-workspace-common/stores/sider';
 import { useSubscriptionUsage } from '@refly-packages/ai-workspace-common/hooks/use-subscription-usage';
-
+import { IContextItem } from '@refly-packages/ai-workspace-common/stores/context-panel';
 interface ModelSelectorProps {
   model: ModelInfo | null;
   setModel: (model: ModelInfo | null) => void;
   briefMode?: boolean;
   placement?: DropdownProps['placement'];
   trigger?: DropdownProps['trigger'];
+  contextItems?: IContextItem[];
 }
 
 const UsageProgress = memo(
@@ -184,19 +187,22 @@ const SelectedModelDisplay = memo(({ model }: { model: ModelInfo | null }) => {
 
 SelectedModelDisplay.displayName = 'SelectedModelDisplay';
 
-const ModelLabel = memo(({ model }: { model: ModelInfo }) => {
-  const { t } = useTranslation();
-  return (
-    <span className="text-xs flex items-center gap-1">
-      {model.label}
-      {!model.capabilities?.vision && (
-        <Tooltip title={t('copilot.modelSelector.noVisionSupport')}>
-          <MdOutlineImageNotSupported className="w-3.5 h-3.5 text-gray-400" />
-        </Tooltip>
-      )}
-    </span>
-  );
-});
+const ModelLabel = memo(
+  ({ model, isContextIncludeImage }: { model: ModelInfo; isContextIncludeImage: boolean }) => {
+    const { t } = useTranslation();
+
+    return (
+      <span className="text-xs flex items-center gap-1">
+        {model.label}
+        {!model.capabilities?.vision && isContextIncludeImage && (
+          <Tooltip title={t('copilot.modelSelector.noVisionSupport')}>
+            <IconError className="w-3.5 h-3.5 text-[#faad14]" />
+          </Tooltip>
+        )}
+      </span>
+    );
+  },
+);
 
 ModelLabel.displayName = 'ModelLabel';
 
@@ -207,6 +213,7 @@ export const ModelSelector = memo(
     briefMode = false,
     model,
     setModel,
+    contextItems,
   }: ModelSelectorProps) => {
     const [dropdownOpen, setDropdownOpen] = useState(false);
     const { t } = useTranslation();
@@ -243,6 +250,10 @@ export const ModelSelector = memo(
       [userProfile?.subscription?.planType],
     );
 
+    const isContextIncludeImage = useMemo(() => {
+      return contextItems?.some((item) => item.type === 'image');
+    }, [contextItems]);
+
     const t1Models = useMemo(
       () =>
         modelList
@@ -251,11 +262,11 @@ export const ModelSelector = memo(
           .map((model) => ({
             key: model.name,
             icon: <ModelOption provider={model.provider} />,
-            label: <ModelLabel model={model} />,
+            label: <ModelLabel model={model} isContextIncludeImage={isContextIncludeImage} />,
             disabled: t1Disabled,
             capabilities: model.capabilities,
           })),
-      [modelList, t1Disabled],
+      [modelList, t1Disabled, isContextIncludeImage],
     );
 
     const t2Models = useMemo(
@@ -266,11 +277,11 @@ export const ModelSelector = memo(
           .map((model) => ({
             key: model.name,
             icon: <ModelOption provider={model.provider} />,
-            label: <ModelLabel model={model} />,
+            label: <ModelLabel model={model} isContextIncludeImage={isContextIncludeImage} />,
             disabled: t2Disabled,
             capabilities: model.capabilities,
           })),
-      [modelList, t2Disabled],
+      [modelList, t2Disabled, isContextIncludeImage],
     );
 
     const freeModels = useMemo(
@@ -281,10 +292,10 @@ export const ModelSelector = memo(
           .map((model) => ({
             key: model.name,
             icon: <ModelOption provider={model.provider} />,
-            label: <ModelLabel model={model} />,
+            label: <ModelLabel model={model} isContextIncludeImage={isContextIncludeImage} />,
             capabilities: model.capabilities,
           })),
-      [modelList],
+      [modelList, isContextIncludeImage],
     );
 
     // Optimize droplist creation
@@ -398,9 +409,9 @@ export const ModelSelector = memo(
           <span className="text-xs flex items-center gap-1.5 text-gray-500 cursor-pointer transition-all duration-300 hover:text-gray-700">
             <SelectedModelDisplay model={model} />
             <IconDown />
-            {!model?.capabilities?.vision && (
+            {!model?.capabilities?.vision && isContextIncludeImage && (
               <Tooltip title={t('copilot.modelSelector.noVisionSupport')}>
-                <MdOutlineImageNotSupported className="w-3.5 h-3.5 text-gray-400" />
+                <IconError className="w-3.5 h-3.5 text-[#faad14]" />
               </Tooltip>
             )}
           </span>
@@ -415,6 +426,7 @@ export const ModelSelector = memo(
       prevProps.placement === nextProps.placement &&
       prevProps.briefMode === nextProps.briefMode &&
       prevProps.model === nextProps.model &&
+      prevProps.contextItems === nextProps.contextItems &&
       JSON.stringify(prevProps.trigger) === JSON.stringify(nextProps.trigger)
     );
   },

diff --git a/packages/ai-workspace-common/src/components/canvas/launchpad/chat-panel.tsx b/packages/ai-workspace-common/src/components/canvas/launchpad/chat-panel.tsx
@@ -299,6 +299,7 @@ export const ChatPanel = () => {
             handleAbort={handleAbort}
             customActions={customActions}
             onUploadImage={handleImageUpload}
+            contextItems={contextItems}
           />
         </div>
       </div>

diff --git a/...ai-workspace-common/src/components/canvas/node-preview/skill-response/edit-chat-input.tsx b/...ai-workspace-common/src/components/canvas/node-preview/skill-response/edit-chat-input.tsx
@@ -212,6 +212,7 @@ const EditChatInputComponent = (props: EditChatInputProps) => {
           handleAbort={() => {}}
           customActions={customActions}
           onUploadImage={handleImageUpload}
+          contextItems={editContextItems}
         />
 
         {/* {skillStore.selectedSkill?.configSchema?.items?.length > 0 && (

diff --git a/packages/ai-workspace-common/src/components/canvas/nodes/skill.tsx b/packages/ai-workspace-common/src/components/canvas/nodes/skill.tsx
@@ -418,6 +418,7 @@ export const SkillNode = memo(
                 handleSendMessage={handleSendMessage}
                 handleAbort={abortAction}
                 onUploadImage={handleImageUpload}
+                contextItems={contextItems}
               />
             </div>
           </div>

diff --git a/...es/ai-workspace-common/src/components/editor/components/generative/common/ai-selector.tsx b/...es/ai-workspace-common/src/components/editor/components/generative/common/ai-selector.tsx
@@ -337,6 +337,7 @@ export const AISelector = memo(({ onOpenChange, inPlaceEditType }: AISelectorPro
                 placement="bottom"
                 briefMode={true}
                 trigger={['click']}
+                contextItems={contextItems}
               />
             </Button>
             <AddBaseMarkContext contextItems={contextItems} setContextItems={setContextItems} />