fix: unify icon display for new builder (refly-ai#1604)

* fix: remove content selection

- Eliminated unnecessary context and selection logic from ActionStepCard, CollaborativeEditor, ResourceContent, and related components to streamline functionality and improve performance.
- Removed buildContextItem and getSourceNode functions that were not utilized, enhancing code clarity.
- Updated components to ensure proper handling of potentially undefined values using optional chaining and nullish coalescing.
- Ensured adherence to Tailwind CSS for consistent styling across components.

* refactor(icon): streamline file handling and icon rendering in various components

- Removed unnecessary resource type and metadata handling in FileItem, ContextItem, and other components to simplify file rendering.
- Updated NodeIcon usage to directly accept filename for better clarity and performance.
- Enhanced mention handling in MentionNodeView and related components to utilize new class names for consistent styling.
- Ensured adherence to Tailwind CSS for styling and optimized component rendering with React.memo.
- Applied optional chaining and nullish coalescing for safer property access throughout the codebase.

* fix: enable type check and remove type errors

- Updated the rsbuild.config.ts to enable type checking based on environment variables for better development practices.
- Removed the useCanvasInitialActions hook to simplify the canvas component logic and improve performance.
- Cleaned up imports in the canvas index file and adjusted the ChatBox component to eliminate unnecessary properties.
- Ensured adherence to best practices for property access and component structure, including the use of optional chaining and nullish coalescing.

* fix: further fix build errors and remove deprecated components

- Removed FollowingActions component from MediaActionContainer and refactored the component to streamline its logic.
- Eliminated unnecessary context items and model info preparation, enhancing performance and maintainability.
- Ensured adherence to best practices for property access using optional chaining and nullish coalescing.
- Updated ResourceNodePreview and ActionContainer to remove FollowingActions, improving overall component clarity and performance.
- Applied Tailwind CSS for consistent styling across components.

Author: mrcfps

apps/web/rsbuild.config.ts

@@ -18,8 +18,8 @@ const isProduction = process.env.NODE_ENV === 'production';
 export default defineConfig({
   plugins: [
     pluginTypeCheck({
-      enable: false,
-      // process.env.NODE_ENV === 'development' || process.env.VITE_ENFORCE_TYPE_CHECK === 'true',
+      enable:
+        process.env.NODE_ENV === 'development' || process.env.VITE_ENFORCE_TYPE_CHECK === 'true',
     }),
     pluginReact(),
     pluginSvgr(),

packages/ai-workspace-common/src/components/canvas/canvas-resources/file-list/file-item.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { cn } from '@refly/utils/cn';
 import { FileItemAction } from '../share/file-item-action';
 import { NodeIcon } from '@refly-packages/ai-workspace-common/components/canvas/nodes/shared/node-icon';
-import type { DriveFile, ResourceType } from '@refly/openapi-schema';
+import type { DriveFile } from '@refly/openapi-schema';
 import { useCanvasContext } from '@refly-packages/ai-workspace-common/context/canvas';
 
 const { Text } = Typography;
@@ -15,20 +15,6 @@ export interface FileItemProps {
   onSelect: (resource: DriveFile, beforeParsed: boolean) => void;
 }
 
-// Convert DriveFile type to ResourceType
-const getResourceType = (fileType: string): ResourceType => {
-  const typeMap: Record<string, ResourceType> = {
-    'text/plain': 'file',
-    'application/pdf': 'document',
-    'image/jpeg': 'image',
-    'image/png': 'image',
-    'image/gif': 'image',
-    'video/mp4': 'video',
-    'audio/mpeg': 'audio',
-  };
-  return typeMap[fileType] || 'file';
-};
-
 /**
  * Render a single file item.
  */
@@ -48,13 +34,7 @@ export const FileItem = memo(({ file, isActive, onSelect }: FileItemProps) => {
       onClick={() => onSelect(file, beforeParsed)}
     >
       <div className="flex items-center gap-2 flex-1 min-w-0">
-        <NodeIcon
-          type="resource"
-          resourceType={getResourceType(file.type)}
-          resourceMeta={{ contentType: file.type }}
-          filled={false}
-          small
-        />
+        <NodeIcon type="file" filename={file.name} filled={false} small />
 
         <Text
           ellipsis={{ tooltip: { placement: 'left' } }}

packages/ai-workspace-common/src/components/canvas/common/label-display/index.tsx

@@ -30,7 +30,7 @@ export const LabelItem = memo(
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
-        {icon && icon}
+        {icon}
         <Paragraph
           className="text-xs text-refly-text-0 max-w-[100px] leading-4 !m-0"
           ellipsis={{

packages/ai-workspace-common/src/components/canvas/copilot/chat-box.tsx

@@ -82,10 +82,7 @@ export const ChatBox = memo(({ canvasId, query, setQuery, onSendMessage }: ChatB
       {
         query,
         resultId,
-        selectedSkill: undefined,
         modelInfo: null,
-        tplConfig: {},
-        runtimeConfig: {},
         agentMode: 'copilot_agent',
         copilotSessionId: sessionId,
       },

packages/ai-workspace-common/src/components/canvas/index.tsx

@@ -60,7 +60,6 @@ import {
   nodeOperationsEmitter,
 } from '@refly-packages/ai-workspace-common/events/nodeOperations';
 import { WorkflowRun } from './workflow-run';
-import { useCanvasInitialActions } from '@refly-packages/ai-workspace-common/hooks/use-canvas-initial-actions';
 import { CanvasDrive, CanvasResourcesWidescreenModal } from './canvas-resources';
 import { ToolbarButtons } from './top-toolbar/toolbar-buttons';
 import { CanvasControlButtons } from './top-toolbar/canvas-control-buttons';
@@ -136,8 +135,6 @@ const Flow = memo(({ canvasId, copilotWidth, setCopilotWidth, maxPanelWidth }: F
 
   useHandleOrphanNode();
 
-  useCanvasInitialActions(canvasId);
-
   const { addNode } = useAddNode();
   const { nodes, edges } = useStore(
     useShallow((state) => ({

packages/ai-workspace-common/src/components/canvas/launchpad/context-manager/components/base-mark-context-selector/home.tsx

@@ -34,13 +34,7 @@ export function Home({
             item?.onItemClick?.(item.data);
           }}
         >
-          <NodeIcon
-            type={item.type}
-            resourceType={item?.data?.metadata?.resourceType}
-            resourceMeta={item?.data?.metadata?.resourceMeta}
-            filled={false}
-            iconSize={14}
-          />
+          <NodeIcon type={item.type} filename={item?.data?.title} filled={false} iconSize={14} />
           <div className="search-res-container">
             <p
               className="search-res-title dark:!text-gray-200"

packages/ai-workspace-common/src/components/canvas/launchpad/context-manager/context-item.tsx

@@ -151,8 +151,7 @@ export const ContextItem = ({
           type={type}
           small
           url={node?.data?.metadata?.imageUrl as string}
-          resourceType={node?.data?.metadata?.resourceType ?? item.metadata?.resourceType}
-          resourceMeta={node?.data?.metadata?.resourceMeta ?? item.metadata?.resourceMeta}
+          filename={node?.data?.title ?? item.title}
           iconSize={16}
           iconColor={NODE_COLORS[type]}
           filled={false}

packages/ai-workspace-common/src/components/canvas/launchpad/rich-chat-input/mention-node-view.tsx

@@ -1,43 +1,31 @@
 import React from 'react';
+import { cn } from '@refly/utils';
 import { NodeViewWrapper } from '@tiptap/react';
 import type { NodeViewProps } from '@tiptap/react';
 import { NodeIcon } from '@refly-packages/ai-workspace-common/components/canvas/nodes/shared/node-icon';
-import { getVariableIcon } from '@refly-packages/ai-workspace-common/components/canvas/launchpad/variable/getVariableIcon';
+import { X } from 'refly-icons';
 import type { CanvasNodeType } from '@refly/openapi-schema';
 import { ToolsetIcon } from '@refly-packages/ai-workspace-common/components/canvas/common/toolset-icon';
+import { MentionItemSource } from './const';
+import { AGENT_CONFIG_KEY_CLASSNAMES } from '@refly-packages/ai-workspace-common/components/canvas/nodes/shared/colors';
 
 const TOOLSET_ICON_CONFIG = {
   size: 14,
   className: 'flex-shrink-0',
   builtinClassName: '!w-3.5 !h-3.5',
 } as const;
 
-function renderNodeIcon(source: string, variableType: string, nodeAttrs: any) {
+function renderNodeIcon(source: MentionItemSource, variableType: string, nodeAttrs: any) {
   if (source === 'variables') {
-    return getVariableIcon(variableType);
+    return <X size={12} className="flex-shrink-0" />;
   }
-  if (source === 'stepRecord') {
-    return (
-      <NodeIcon
-        type={'skillResponse' as CanvasNodeType}
-        small
-        filled={false}
-        className="!w-3.5 !h-3.5"
-      />
-    );
+  if (source === 'agents') {
+    return <NodeIcon type="skillResponse" small filled={false} className="!w-3.5 !h-3.5" />;
   }
-  if (source === 'resultRecord' || source === 'myUpload') {
-    const nodeType = variableType || 'document';
+  if (source === 'files' || source === 'products') {
+    const filename = nodeAttrs?.label as string;
     return (
-      <NodeIcon
-        type={nodeType as CanvasNodeType}
-        small
-        filled={false}
-        url={nodeType === 'image' ? (nodeAttrs?.url ?? undefined) : undefined}
-        resourceType={nodeAttrs?.resourceType}
-        resourceMeta={nodeAttrs?.resourceMeta}
-        className="!w-3.5 !h-3.5"
-      />
+      <NodeIcon type="file" small filled={false} filename={filename} className="!w-3.5 !h-3.5" />
     );
   }
   if (source === 'toolsets' || source === 'tools') {
@@ -55,16 +43,32 @@ function renderNodeIcon(source: string, variableType: string, nodeAttrs: any) {
   );
 }
 
+const getMentionClassName = (source: MentionItemSource) => {
+  if (source === 'variables') {
+    return AGENT_CONFIG_KEY_CLASSNAMES.inputs;
+  }
+  if (source === 'toolsets' || source === 'tools') {
+    return AGENT_CONFIG_KEY_CLASSNAMES.tools;
+  }
+  if (source === 'files' || source === 'products') {
+    return AGENT_CONFIG_KEY_CLASSNAMES.files;
+  }
+  if (source === 'agents') {
+    return AGENT_CONFIG_KEY_CLASSNAMES.agents;
+  }
+  return '';
+};
+
 function MentionNodeViewBase(props: NodeViewProps) {
   const { node } = props;
   const labelText = (node?.attrs?.label as string) ?? (node?.attrs?.id as string) ?? '';
-  const source = (node?.attrs?.source as string) ?? '';
-  const variableType = (node?.attrs?.variableType as string) ?? source ?? '';
+  const source = node?.attrs?.source as MentionItemSource;
+  const variableType = node?.attrs?.variableType as string;
 
   return (
     <NodeViewWrapper
       as="span"
-      className="mention"
+      className={cn('mention', getMentionClassName(source))}
       contentEditable={false}
       draggable={false}
       data-mention="true"

packages/ai-workspace-common/src/components/canvas/launchpad/rich-chat-input/mentionList.tsx

@@ -487,11 +487,9 @@ export const MentionList = ({
       },
       files: {
         nodeIconProps: (item: MentionItem) => ({
-          type: item.variableType as CanvasNodeType,
+          type: 'file' as const,
           small: true,
-          url: item.variableType === 'image' ? item.metadata?.imageUrl : undefined,
-          resourceType: item.metadata?.resourceType,
-          resourceMeta: item.metadata?.resourceMeta,
+          filename: item.name,
         }),
         emptyStateKey: 'noFiles',
       },

packages/ai-workspace-common/src/components/canvas/launchpad/variable/mention-style.ts

@@ -43,7 +43,6 @@ export const mentionStyles = `
   }
   
   [data-cy="rich-chat-input"] .mention {
-    background-color: var(--refly-tertiary-default);
     border-radius: 4px;
     padding: 2px 4px 2px;
     border: 1px solid var(--refly-Card-Border);