Fix folder mentions in chat

client/src/components/Chat/ChatFooter/Input/InputCore.tsx

@@ -19,7 +19,7 @@ import {
   ParsedQueryTypeEnum,
 } from '../../../../types/general';
 import { getMentionsPlugin } from './mentionPlugin';
-import { addMentionNodes } from './utils';
+import { addMentionNodes, mapEditorContentToInputValue } from './utils';
 import { placeholderPlugin } from './placeholderPlugin';
 
 const schema = new Schema({
@@ -125,25 +125,7 @@ const InputCore = ({
           if (!parts) {
             return false;
           }
-          onSubmit?.({
-            parsed:
-              parts?.map((s: InputEditorContent) =>
-                s.type === 'mention'
-                  ? {
-                      type:
-                        s.attrs.type === 'lang'
-                          ? ParsedQueryTypeEnum.LANG
-                          : ParsedQueryTypeEnum.PATH,
-                      text: s.attrs.id,
-                    }
-                  : { type: ParsedQueryTypeEnum.TEXT, text: s.text },
-              ) || [],
-            plain: parts
-              ?.map((s: InputEditorContent) =>
-                s.type === 'mention' ? `${s.attrs.type}:${s.attrs.id}` : s.text,
-              )
-              .join(''),
-          });
+          onSubmit?.(mapEditorContentToInputValue(parts));
           return true;
         },
         'Ctrl-Enter': baseKeymap.Enter,

client/src/components/Chat/ChatFooter/Input/nodes.ts

@@ -18,6 +18,10 @@ export const mentionNode: NodeSpec = {
   draggable: false,
 
   toDOM: (node) => {
+    const isDir =
+      node.attrs.type === 'dir' ||
+      node.attrs.display.endsWith('/') ||
+      node.attrs.display.endsWith('\\');
     const folderIcon = document.createElement('span');
     folderIcon.innerHTML = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
@@ -36,7 +40,7 @@ export const mentionNode: NodeSpec = {
         class:
           'prosemirror-tag-node inline-flex gap-1.5 items-center align-bottom bg-chat-bg-border-hover rounded px-1',
       },
-      node.attrs.type === 'dir'
+      isDir
         ? folderIcon
         : [
             'span',
@@ -53,7 +57,7 @@ export const mentionNode: NodeSpec = {
           ],
       node.attrs.type === 'lang'
         ? node.attrs.display
-        : node.attrs.type === 'dir'
+        : isDir
         ? splitPath(node.attrs.display).slice(-2)[0]
         : splitPath(node.attrs.display).pop(),
     ];

client/src/components/Chat/ChatFooter/Input/utils.ts

@@ -1,9 +1,38 @@
 import OrderedMap from 'orderedmap';
 import { type NodeSpec } from 'prosemirror-model';
+import { InputEditorContent } from '../../../../utils';
+import { ParsedQueryTypeEnum } from '../../../../types/general';
 import { mentionNode } from './nodes';
 
 export function addMentionNodes(nodes: OrderedMap<NodeSpec>) {
   return nodes.append({
     mention: mentionNode,
   });
 }
+export const mapEditorContentToInputValue = (
+  inputState: InputEditorContent[],
+) => {
+  const getType = (type: string) => (type === 'lang' ? 'lang' : 'path');
+  const newValue = inputState
+    .map((s) =>
+      s.type === 'mention'
+        ? `${getType(s.attrs.type)}:${s.attrs.id}`
+        : s.text.replace(new RegExp(String.fromCharCode(160), 'g'), ' '),
+    )
+    .join('');
+  const newValueParsed = inputState.map((s) =>
+    s.type === 'mention'
+      ? {
+          type:
+            s.attrs.type === 'lang'
+              ? ParsedQueryTypeEnum.LANG
+              : ParsedQueryTypeEnum.PATH,
+          text: s.attrs.id,
+        }
+      : { type: ParsedQueryTypeEnum.TEXT, text: s.text },
+  );
+  return {
+    plain: newValue,
+    parsed: newValueParsed,
+  };
+};

client/src/components/Chat/ChatFooter/NLInput.tsx

@@ -10,11 +10,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { FeatherSelected, QuillIcon, SendIcon, Sparkles } from '../../../icons';
 import ClearButton from '../../ClearButton';
 import Tooltip from '../../Tooltip';
-import {
-  ChatLoadingStep,
-  ParsedQueryType,
-  ParsedQueryTypeEnum,
-} from '../../../types/general';
+import { ChatLoadingStep, ParsedQueryType } from '../../../types/general';
 import LiteLoader from '../../Loaders/LiteLoader';
 import { UIContext } from '../../../context/uiContext';
 import { DeviceContext } from '../../../context/deviceContext';
@@ -24,6 +20,7 @@ import { FileResItem, LangItem } from '../../../types/api';
 import { InputEditorContent } from '../../../utils';
 import InputLoader from './InputLoader';
 import InputCore from './Input/InputCore';
+import { mapEditorContentToInputValue } from './Input/utils';
 
 type Props = {
   value?: { parsed: ParsedQueryType[]; plain: string };
@@ -130,26 +127,7 @@ const NLInput = ({
   );
 
   const onChangeInput = useCallback((inputState: InputEditorContent[]) => {
-    const newValue = inputState
-      .map((s) =>
-        s.type === 'mention' ? `${s.attrs.type}:${s.attrs.id}` : s.text,
-      )
-      .join('');
-    const newValueParsed = inputState.map((s) =>
-      s.type === 'mention'
-        ? {
-            type:
-              s.attrs.type === 'lang'
-                ? ParsedQueryTypeEnum.LANG
-                : ParsedQueryTypeEnum.PATH,
-            text: s.attrs.id,
-          }
-        : { type: ParsedQueryTypeEnum.TEXT, text: s.text },
-    );
-    setInputValue({
-      plain: newValue,
-      parsed: newValueParsed,
-    });
+    setInputValue(mapEditorContentToInputValue(inputState));
   }, []);
 
   const onSubmitButtonClicked = useCallback(() => {