@opensumi/ide-ai-native 3.9.1-next-1749007675.0 → 3.9.1-next-1749022016.0

package/src/browser/chat/chat-proxy.service.ts

@@ -1,18 +1,16 @@
 import { Autowired, Injectable } from '@opensumi/di';
-import { AppConfig, PreferenceService } from '@opensumi/ide-core-browser';
+import { PreferenceService } from '@opensumi/ide-core-browser';
 import {
   AIBackSerivcePath,
   CancellationToken,
   ChatAgentViewServiceToken,
   ChatFeatureRegistryToken,
-  ChatServiceToken,
   Deferred,
   Disposable,
   IAIBackService,
   IAIReporter,
   IApplicationService,
   IChatProgress,
-  getOperatingSystemName,
 } from '@opensumi/ide-core-common';
 import { AINativeSettingSectionsId } from '@opensumi/ide-core-common/lib/settings/ai-native';
 import { MonacoCommandRegistry } from '@opensumi/ide-editor/lib/browser/monaco-contrib/command/command.service';
@@ -27,10 +25,10 @@ import {
   IChatAgentService,
   IChatAgentWelcomeMessage,
 } from '../../common';
+import { DEFAULT_SYSTEM_PROMPT } from '../../common/prompts/system-prompt';
 import { ChatToolRender } from '../components/ChatToolRender';
 import { IChatAgentViewService } from '../types';
 
-import { ChatService } from './chat.api.service';
 import { ChatFeatureRegistry } from './chat.feature.registry';
 
 /**
@@ -53,9 +51,6 @@ export class ChatProxyService extends Disposable {
   @Autowired(MonacoCommandRegistry)
   private readonly monacoCommandRegistry: MonacoCommandRegistry;
 
-  @Autowired(ChatServiceToken)
-  private aiChatService: ChatService;
-
   @Autowired(IAIReporter)
   private readonly aiReporter: IAIReporter;
 
@@ -71,9 +66,6 @@ export class ChatProxyService extends Disposable {
   @Autowired(IMessageService)
   private readonly messageService: IMessageService;
 
-  @Autowired(AppConfig)
-  private readonly appConfig: AppConfig;
-
   private chatDeferred: Deferred<void> = new Deferred<void>();
 
   public getRequestOptions() {
@@ -112,79 +104,74 @@ export class ChatProxyService extends Disposable {
       initialProps: {},
     });
 
-    this.addDispose(
-      this.chatAgentService.registerAgent({
-        id: ChatProxyService.AGENT_ID,
-        metadata: {
-          systemPrompt:
-            this.preferenceService.get<string>(
+    this.applicationService.getBackendOS().then(() => {
+      this.addDispose(
+        this.chatAgentService.registerAgent({
+          id: ChatProxyService.AGENT_ID,
+          metadata: {
+            systemPrompt: this.preferenceService.get<string>(
               AINativeSettingSectionsId.SystemPrompt,
-              'You are a powerful AI coding assistant working in OpenSumi, a top IDE framework. You collaborate with a USER to solve coding tasks, which may involve creating, modifying, or debugging code, or answering questions. When the USER sends a message, relevant context (e.g., open files, cursor position, edit history, linter errors) may be attached. Use this information as needed.\n\n<tool_calling>\nYou have access to tools to assist with tasks. Follow these rules:\n1. Always adhere to the tool call schema and provide all required parameters.\n2. Only use tools explicitly provided; ignore unavailable ones.\n3. Avoid mentioning tool names to the USER (e.g., say "I will edit your file" instead of "I need to use the edit_file tool").\n4. Only call tools when necessary; respond directly if the task is general or you already know the answer.\n5. Explain to the USER why you’re using a tool before calling it.\n</tool_calling>\n\n<making_code_changes>\nWhen modifying code:\n1. Use code edit tools instead of outputting code unless explicitly requested.\n2. Limit tool calls to one per turn.\n3. Ensure generated code is immediately executable by including necessary imports, dependencies, and endpoints.\n4. For new projects, create a dependency management file (e.g., requirements.txt) and a README.\n5. For web apps, design a modern, user-friendly UI.\n6. Avoid generating non-textual or excessively long code.\n7. Read file contents before editing, unless appending a small change or creating a new file.\n8. Fix introduced linter errors if possible, but stop after 3 attempts and ask the USER for guidance.\n9. Reapply reasonable code edits if they weren’t followed initially.\n</making_code_changes>\n\nUse the appropriate tools to fulfill the USER’s request, ensuring all required parameters are provided or inferred from context.',
-            ) +
-            `\n\n<user_info>\nThe user's OS is ${getOperatingSystemName()}. The absolute path of the user's workspace is ${
-              this.appConfig.workspaceDir
-            }.\n</user_info>`,
-        },
-        invoke: async (
-          request: IChatAgentRequest,
-          progress: (part: IChatProgress) => void,
-          history: CoreMessage[],
-          token: CancellationToken,
-        ): Promise<IChatAgentResult> => {
-          this.chatDeferred = new Deferred<void>();
-
-          const { message, command } = request;
-          let prompt: string = message;
-
-          if (command) {
-            const commandHandler = this.chatFeatureRegistry.getSlashCommandHandler(command);
-            if (commandHandler && commandHandler.providerPrompt) {
-              const editor = this.monacoCommandRegistry.getActiveCodeEditor();
-              const slashCommandPrompt = await commandHandler.providerPrompt(message, editor);
-              prompt = slashCommandPrompt;
+              DEFAULT_SYSTEM_PROMPT,
+            ),
+          },
+          invoke: async (
+            request: IChatAgentRequest,
+            progress: (part: IChatProgress) => void,
+            history: CoreMessage[],
+            token: CancellationToken,
+          ): Promise<IChatAgentResult> => {
+            this.chatDeferred = new Deferred<void>();
+            const { message, command } = request;
+            let prompt: string = message;
+            if (command) {
+              const commandHandler = this.chatFeatureRegistry.getSlashCommandHandler(command);
+              if (commandHandler && commandHandler.providerPrompt) {
+                const editor = this.monacoCommandRegistry.getActiveCodeEditor();
+                const slashCommandPrompt = await commandHandler.providerPrompt(message, editor);
+                prompt = slashCommandPrompt;
+              }
             }
-          }
-
-          const stream = await this.aiBackService.requestStream(
-            prompt,
-            {
-              requestId: request.requestId,
-              sessionId: request.sessionId,
-              history,
-              images: request.images,
-              ...this.getRequestOptions(),
-            },
-            token,
-          );
-
-          listenReadable<IChatProgress>(stream, {
-            onData: (data) => {
-              progress(data);
-            },
-            onEnd: () => {
-              this.chatDeferred.resolve();
-            },
-            onError: (error) => {
-              this.messageService.error(error.message);
-              this.aiReporter.end(request.sessionId + '_' + request.requestId, {
-                message: error.message,
-                success: false,
-                command,
-              });
-            },
-          });
-
-          await this.chatDeferred.promise;
-          return {};
-        },
-        provideSlashCommands: async (token: CancellationToken): Promise<IChatAgentCommand[]> =>
-          this.chatFeatureRegistry
-            .getAllSlashCommand()
-            .map((s) => ({ ...s, name: s.name, description: s.description || '' })),
-        provideChatWelcomeMessage: async (token: CancellationToken): Promise<IChatAgentWelcomeMessage | undefined> =>
-          undefined,
-      }),
-    );
+
+            const stream = await this.aiBackService.requestStream(
+              prompt,
+              {
+                requestId: request.requestId,
+                sessionId: request.sessionId,
+                history,
+                images: request.images,
+                ...this.getRequestOptions(),
+              },
+              token,
+            );
+
+            listenReadable<IChatProgress>(stream, {
+              onData: (data) => {
+                progress(data);
+              },
+              onEnd: () => {
+                this.chatDeferred.resolve();
+              },
+              onError: (error) => {
+                this.messageService.error(error.message);
+                this.aiReporter.end(request.sessionId + '_' + request.requestId, {
+                  message: error.message,
+                  success: false,
+                  command,
+                });
+              },
+            });
+
+            await this.chatDeferred.promise;
+            return {};
+          },
+          provideSlashCommands: async (): Promise<IChatAgentCommand[]> =>
+            this.chatFeatureRegistry
+              .getAllSlashCommand()
+              .map((s) => ({ ...s, name: s.name, description: s.description || '' })),
+          provideChatWelcomeMessage: async (): Promise<IChatAgentWelcomeMessage | undefined> => undefined,
+        }),
+      );
+    });
 
     queueMicrotask(() => {
       this.chatAgentService.updateAgent(ChatProxyService.AGENT_ID, {});

package/src/browser/chat/chat.view.tsx

@@ -617,7 +617,12 @@ export const AIChatView = () => {
       const { message, images, agentId, command, reportExtra } = value;
       const { actionType, actionSource } = reportExtra || {};
 
-      const request = aiChatService.createRequest(message, agentId!, images, command);
+      const request = aiChatService.createRequest(
+        message.replaceAll(LLM_CONTEXT_KEY_REGEX, ''),
+        agentId!,
+        images,
+        command,
+      );
       if (!request) {
         return;
       }
@@ -641,7 +646,7 @@ export const AIChatView = () => {
         600 * 1000,
       );
       msgHistoryManager.addUserMessage({
-        content: message.replaceAll(LLM_CONTEXT_KEY_REGEX, ''),
+        content: message,
         images: images || [],
         agentId: agentId!,
         agentCommand: command!,
@@ -695,14 +700,9 @@ export const AIChatView = () => {
       let processedContent = message;
       const filePattern = /\{\{@file:(.*?)\}\}/g;
       const fileMatches = message.match(filePattern);
-      let isCleanContext = false;
       if (fileMatches) {
         for (const match of fileMatches) {
           const filePath = match.replace(/\{\{@file:(.*?)\}\}/, '$1');
-          if (filePath && !isCleanContext) {
-            isCleanContext = true;
-            llmContextService.cleanFileContext();
-          }
           const fileUri = new URI(filePath);
           const relativePath = (await workspaceService.asRelativePath(fileUri))?.path || fileUri.displayName;
           processedContent = processedContent.replace(match, `\`${LLM_CONTEXT_KEY.AttachedFile}${relativePath}\``);
@@ -738,6 +738,18 @@ export const AIChatView = () => {
           );
         }
       }
+      const rulePattern = /\{\{@rule:(.*?)\}\}/g;
+      const ruleMatches = processedContent.match(rulePattern);
+      if (ruleMatches) {
+        for (const match of ruleMatches) {
+          const ruleName = match.replace(/\{\{@rule:(.*?)\}\}/, '$1');
+          const ruleUri = new URI(ruleName);
+          processedContent = processedContent.replace(
+            match,
+            `\`${LLM_CONTEXT_KEY.AttachedFile}${ruleUri.displayName}\``,
+          );
+        }
+      }
       return handleAgentReply({ message: processedContent, images, agentId, command, reportExtra });
     },
     [handleAgentReply],

package/src/browser/components/ChatMentionInput.tsx

@@ -10,7 +10,13 @@ import {
   useInjectable,
 } from '@opensumi/ide-core-browser';
 import { Icon, getIcon } from '@opensumi/ide-core-browser/lib/components';
-import { AINativeSettingSectionsId, ChatFeatureRegistryToken, URI, localize } from '@opensumi/ide-core-common';
+import {
+  AINativeSettingSectionsId,
+  ChatFeatureRegistryToken,
+  RulesServiceToken,
+  URI,
+  localize,
+} from '@opensumi/ide-core-common';
 import { CommandService } from '@opensumi/ide-core-common/lib/command';
 import { defaultFilesWatcherExcludes } from '@opensumi/ide-core-common/lib/preferences/file-watch';
 import { WorkbenchEditorService } from '@opensumi/ide-editor';
@@ -18,6 +24,8 @@ import { FileSearchServicePath, IFileSearchService } from '@opensumi/ide-file-se
 import { OutlineCompositeTreeNode, OutlineTreeNode } from '@opensumi/ide-outline/lib/browser/outline-node.define';
 import { OutlineTreeService } from '@opensumi/ide-outline/lib/browser/services/outline-tree.service';
 import { IMessageService } from '@opensumi/ide-overlay';
+import { IconType } from '@opensumi/ide-theme';
+import { IconService } from '@opensumi/ide-theme/lib/browser';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
 
 import { IChatInternalService } from '../../common';
@@ -25,6 +33,8 @@ import { LLMContextService } from '../../common/llm-context';
 import { ChatFeatureRegistry } from '../chat/chat.feature.registry';
 import { ChatInternalService } from '../chat/chat.internal.service';
 import { MCPConfigCommands } from '../mcp/config/mcp-config.commands';
+import { RulesCommands } from '../rules/rules.contribution';
+import { RulesService } from '../rules/rules.service';
 
 import styles from './components.module.less';
 import { MentionInput } from './mention-input/mention-input';
@@ -72,15 +82,21 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
   const workspaceService = useInjectable<IWorkspaceService>(IWorkspaceService);
   const editorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
   const labelService = useInjectable<LabelService>(LabelService);
+  const iconService = useInjectable<IconService>(IconService);
   const messageService = useInjectable<IMessageService>(IMessageService);
   const chatFeatureRegistry = useInjectable<ChatFeatureRegistry>(ChatFeatureRegistryToken);
   const outlineTreeService = useInjectable<OutlineTreeService>(OutlineTreeService);
   const prevOutlineItems = useRef<MentionItem[]>([]);
   const preferenceService = useInjectable<PreferenceService>(PreferenceService);
+  const rulesService = useInjectable<RulesService>(RulesServiceToken);
   const handleShowMCPConfig = React.useCallback(() => {
     commandService.executeCommand(MCPConfigCommands.OPEN_MCP_CONFIG.id);
   }, [commandService]);
 
+  const handleShowRules = React.useCallback(() => {
+    commandService.executeCommand(RulesCommands.OPEN_RULES_FILE.id);
+  }, [commandService]);
+
   useEffect(() => {
     if (props.value !== value) {
       setValue(props.value || '');
@@ -107,6 +123,55 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
     [outlineTreeService],
   );
 
+  // 拆分目录路径为多个层级的辅助函数
+  const expandFolderPaths = async (folderPaths: string[], workspaceRootPath: string): Promise<MentionItem[]> => {
+    const expandedPaths = new Set<string>();
+    const workspaceUri = new URI(workspaceRootPath);
+
+    // 将所有路径展开为多层级
+    for (const folderPath of folderPaths) {
+      const uri = new URI(folderPath);
+      const relativePath = await workspaceService.asRelativePath(uri);
+
+      if (relativePath?.path) {
+        const pathSegments = relativePath.path.split('/').filter(Boolean);
+
+        // 为每个层级创建路径
+        for (let i = 0; i < pathSegments.length; i++) {
+          const segmentPath = pathSegments.slice(0, i + 1).join('/');
+          const fullPath = workspaceUri.resolve(segmentPath).codeUri.fsPath;
+
+          // 避免添加工作区本身或其上级目录
+          if (fullPath !== workspaceRootPath && !workspaceRootPath.startsWith(fullPath)) {
+            expandedPaths.add(fullPath);
+          }
+        }
+      } else {
+        // 如果无法获取相对路径，直接添加（但仍要过滤工作区路径）
+        if (folderPath !== workspaceRootPath && !workspaceRootPath.startsWith(folderPath)) {
+          expandedPaths.add(folderPath);
+        }
+      }
+    }
+
+    // 转换为 MentionItem 格式
+    return Promise.all(
+      Array.from(expandedPaths).map(async (folderPath) => {
+        const uri = new URI(folderPath);
+        const relativePath = await workspaceService.asRelativePath(uri);
+        return {
+          id: uri.codeUri.fsPath,
+          type: MentionType.FOLDER,
+          text: uri.displayName,
+          value: uri.codeUri.fsPath,
+          description: relativePath?.root ? relativePath.path : '',
+          contextId: uri.codeUri.fsPath,
+          icon: getIcon('folder'),
+        };
+      }),
+    );
+  };
+
   // 默认菜单项
   const defaultMenuItems: MentionItem[] = [
     {
@@ -214,21 +279,7 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
                 .filter((folder) => folder !== workspaceService.workspace?.uri.toString() && folder !== '/'),
             ),
           );
-          folders = await Promise.all(
-            recentFolder.map(async (folder) => {
-              const uri = new URI(folder);
-              const relativePath = await workspaceService.asRelativePath(uri);
-              return {
-                id: uri.codeUri.fsPath,
-                type: MentionType.FOLDER,
-                text: uri.displayName,
-                value: uri.codeUri.fsPath,
-                description: relativePath?.root ? relativePath.path : '',
-                contextId: uri.codeUri.fsPath,
-                icon: getIcon('folder'),
-              };
-            }),
-          );
+          folders = await expandFolderPaths(recentFolder, workspaceService.workspace?.uri.toString() || '');
         } else {
           const rootUris = (await workspaceService.roots).map((root) => new URI(root.uri).codeUri.fsPath.toString());
           const files = await searchService.find(searchText, {
@@ -246,22 +297,11 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
                 .filter((folder) => folder !== workspaceService.workspace?.uri.toString()),
             ),
           );
-          return Promise.all(
-            folders.map(async (folder) => {
-              const uri = new URI(folder);
-              return {
-                id: uri.codeUri.fsPath,
-                type: MentionType.FOLDER,
-                text: uri.displayName,
-                value: uri.codeUri.fsPath,
-                description: (await workspaceService.asRelativePath(uri.parent))?.path || '',
-                contextId: uri.codeUri.fsPath,
-                icon: getIcon('folder'),
-              };
-            }),
-          );
+          return await expandFolderPaths(folders, workspaceService.workspace?.uri.toString() || '');
         }
-        return folders.filter((folder) => folder.id !== new URI(workspaceService.workspace?.uri).codeUri.fsPath);
+        return folders
+          .filter(Boolean)
+          .filter((folder) => folder.id !== new URI(workspaceService.workspace?.uri).codeUri.fsPath);
       },
     },
     {
@@ -312,13 +352,100 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
         }
       },
     },
-  ];
+    {
+      id: MentionType.RULE,
+      type: MentionType.RULE,
+      text: 'Rule',
+      icon: getIcon('rules'),
+      getHighestLevelItems: () => [],
+      getItems: async (searchText: string) => {
+        const rules = await rulesService.projectRules;
+        const mappedRules = rules.map((rule) => {
+          const uri = new URI(rule.path);
+          return {
+            id: uri.codeUri.fsPath,
+            type: MentionType.RULE,
+            text: uri.displayName,
+            value: uri.codeUri.fsPath,
+            contextId: uri.codeUri.fsPath,
+            description: rule.description,
+            icon: getIcon('rules'),
+          };
+        });
+
+        if (!searchText) {
+          return mappedRules.slice(0, 10);
+        }
+
+        const lowerSearchText = searchText.toLocaleLowerCase();
+        return mappedRules
+          .filter((rule) => rule.text.toLocaleLowerCase().includes(lowerSearchText))
+          .sort((a, b) => {
+            const aTextLower = a.text.toLocaleLowerCase();
+            const bTextLower = b.text.toLocaleLowerCase();
+            const aDescLower = a.description?.toLocaleLowerCase() || '';
+            const bDescLower = b.description?.toLocaleLowerCase() || '';
 
+            // 优先级：文件名包含搜索文本 > 描述包含搜索文本
+            const aTextMatch = aTextLower.includes(lowerSearchText);
+            const bTextMatch = bTextLower.includes(lowerSearchText);
+            const aDescMatch = aDescLower.includes(lowerSearchText);
+            const bDescMatch = bDescLower.includes(lowerSearchText);
+
+            if (aTextMatch && bTextMatch) {
+              // 如果都匹配文件名，按文件名字母序排序
+              return aTextLower.localeCompare(bTextLower);
+            }
+            if (aTextMatch && !bTextMatch) {
+              return -1;
+            }
+            if (!aTextMatch && bTextMatch) {
+              return 1;
+            }
+
+            // 如果文件名都不匹配，比较描述
+            if (aDescMatch && bDescMatch) {
+              return aTextLower.localeCompare(bTextLower);
+            }
+            if (aDescMatch && !bDescMatch) {
+              return -1;
+            }
+            if (!aDescMatch && bDescMatch) {
+              return 1;
+            }
+
+            // 如果都不匹配，按文件名字母序排序
+            return aTextLower.localeCompare(bTextLower);
+          })
+          .slice(0, 10);
+      },
+    },
+  ];
   const defaultMentionInputFooterOptions: FooterConfig = useMemo(
     () => ({
       modelOptions: [
-        { label: 'Claude 4 Sonnet', value: 'claude_sonnet4' },
-        { label: 'DeepSeek R1', value: 'deepseek-r1' },
+        {
+          label: 'Claude 4 Sonnet',
+          value: 'claude_sonnet4',
+          iconClass: iconService.fromIcon(
+            '',
+            'https://img.alicdn.com/imgextra/i3/O1CN01p0mziz1Nsl40lp1HO_!!6000000001626-55-tps-92-65.svg',
+            IconType.Background,
+          ),
+          tags: ['多模态', '长上下文理解', '思考模式'],
+          description: '高性能模型，支持多模态输入',
+        },
+        {
+          label: 'DeepSeek R1',
+          value: 'DeepSeek-R1-0528',
+          iconClass: iconService.fromIcon(
+            '',
+            'https://img.alicdn.com/imgextra/i3/O1CN01ClcK2w1JwdxcbAB3a_!!6000000001093-55-tps-30-30.svg',
+            IconType.Background,
+          ),
+          tags: ['思考模式', '长上下文理解'],
+          description: '专业创作，支持多模态输入',
+        },
       ],
       defaultModel:
         props.sessionModelId || preferenceService.get<string>(AINativeSettingSectionsId.ModelID) || 'deepseek-r1',
@@ -330,6 +457,13 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
           onClick: handleShowMCPConfig,
           position: FooterButtonPosition.LEFT,
         },
+        {
+          id: 'rules',
+          icon: 'rules',
+          title: 'Rules',
+          onClick: handleShowRules,
+          position: FooterButtonPosition.LEFT,
+        },
         {
           id: 'upload-image',
           icon: 'image',
@@ -352,7 +486,7 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
       showModelSelector: true,
       disableModelSelector: props.disableModelSelector,
     }),
-    [handleShowMCPConfig, props.disableModelSelector, props.sessionModelId],
+    [iconService, handleShowMCPConfig, handleShowRules, props.disableModelSelector, props.sessionModelId],
   );
 
   const handleStop = useCallback(() => {

package/src/browser/components/ChatReply.tsx

@@ -342,10 +342,10 @@ export const ChatReply = (props: IChatReplyProps) => {
                 }}
               >
                 <Icon iconClass='codicon codicon-sparkle' />
-                {localize('aiNative.chat.thinking')}
-                {isThinking ? (
-                  <Loading />
-                ) : collapseThinkingIndexSet.has(index) ? (
+                <span style={{ marginLeft: 4 }} className={isThinking ? styles.shiny_text : ''}>
+                  {localize('aiNative.chat.thinking')}
+                </span>
+                {isThinking ? null : collapseThinkingIndexSet.has(index) ? (
                   <Icon iconClass='codicon codicon-chevron-right' />
                 ) : (
                   <Icon iconClass='codicon codicon-chevron-down' />

package/src/browser/components/ChatToolRender.module.less

@@ -52,6 +52,7 @@
       flex: 1;
       text-overflow: ellipsis;
       direction: rtl;
+      unicode-bidi: plaintext;
       overflow: hidden;
       white-space: nowrap;
       display: inline-block;

package/src/browser/components/components.module.less

@@ -524,7 +524,6 @@
     display: flex;
     font-size: 11px;
     align-items: center;
-    min-width: 150px;
   }
 
   .mcp_desc {
@@ -585,7 +584,6 @@
   .reasoning_content {
     padding: 8px 12px;
     margin-top: 4px;
-    border-left: 2px solid var(--descriptionForeground);
     color: var(--descriptionForeground);
     background: var(--design-block-background);
     border-radius: 4px;
@@ -597,8 +595,8 @@
   align-items: center;
   padding: 0 4px;
   margin: 0 2px;
-  background: var(--badge-background);
-  color: var(--badge-foreground);
+  background-color: var(--chat-slashCommandBackground);
+  color: var(--chat-slashCommandForeground);
   border-radius: 3px;
   vertical-align: middle;
   font-size: 12px;
@@ -609,10 +607,6 @@
       margin-right: 3px;
     }
   }
-  &:hover {
-    background-color: var(--chat-slashCommandBackground);
-    color: var(--chat-slashCommandForeground);
-  }
 }
 
 .attachment_text {
@@ -620,6 +614,13 @@
   vertical-align: middle;
   font-size: 12px;
   word-break: break-all;
+  max-width: 100px;
+  text-overflow: ellipsis;
+  direction: rtl;
+  unicode-bidi: plaintext;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
 }
 
 .thumbnail_container {
@@ -672,3 +673,31 @@
   border-radius: 3px;
   overflow: hidden;
 }
+
+.shiny_text {
+  color: #b5b5b5a4; /* Adjust this color to change intensity/style */
+  background: linear-gradient(
+    120deg,
+    rgba(255, 255, 255, 0) 40%,
+    rgba(255, 255, 255, 0.8) 50%,
+    rgba(255, 255, 255, 0) 60%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  display: inline-block;
+  animation: shine 5s linear infinite;
+}
+
+@keyframes shine {
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+}
+
+.shiny_text.disabled {
+  animation: none;
+}