From 82d4ce393b12ecd6ec63778adacb2bb08f6c6006 Mon Sep 17 00:00:00 2001
From: anastasiia <anastasiya1155@gmail.com>
Date: Tue, 12 Dec 2023 07:29:40 -0500
Subject: [PATCH] fix folder mentions in autocomplete input

---
 .../ChatTab/Input/InputCore.tsx               | 28 ++--------------
 .../CurrentTabContent/ChatTab/Input/index.tsx | 22 ++-----------
 .../CurrentTabContent/ChatTab/Input/nodes.ts  |  8 +++--
 .../CurrentTabContent/ChatTab/Input/utils.ts  | 32 +++++++++++++++++++
 4 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx
index 8de29ea15f..019d1102a3 100644
--- a/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx
@@ -13,15 +13,11 @@ import {
 import { schema as basicSchema } from 'prosemirror-schema-basic';
 import * as icons from 'file-icons-js';
 import { useTranslation } from 'react-i18next';
-import {
-  InputEditorContent,
-  ParsedQueryType,
-  ParsedQueryTypeEnum,
-} from '../../../../types/general';
+import { InputEditorContent, ParsedQueryType } from '../../../../types/general';
 import { getFileExtensionForLang } from '../../../../utils';
 import { blurInput } from '../../../../utils/domUtils';
 import { getMentionsPlugin } from './mentionPlugin';
-import { addMentionNodes } from './utils';
+import { addMentionNodes, mapEditorContentToInputValue } from './utils';
 import { placeholderPlugin } from './placeholderPlugin';
 
 const schema = new Schema({
@@ -142,25 +138,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,
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
index 8e8dd07343..b3266d19af 100644
--- a/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
@@ -22,6 +22,7 @@ import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
 import KeyboardHint from '../../../../components/KeyboardHint';
 import { focusInput } from '../../../../utils/domUtils';
 import InputCore from './InputCore';
+import { mapEditorContentToInputValue } from './utils';
 
 type Props = {
   value?: { parsed: ParsedQueryType[]; plain: string };
@@ -122,26 +123,7 @@ const ConversationInput = ({
   );
 
   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(() => {
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/nodes.ts b/client/src/Project/CurrentTabContent/ChatTab/Input/nodes.ts
index 48eeafa016..b9d2eafb36 100644
--- a/client/src/Project/CurrentTabContent/ChatTab/Input/nodes.ts
+++ b/client/src/Project/CurrentTabContent/ChatTab/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 h-[22px] items-center align-bottom bg-bg-base border border-bg-border rounded px-1',
       },
-      node.attrs.type === 'dir'
+      isDir
         ? folderIcon
         : [
             'span',
@@ -55,7 +59,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(),
     ];
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/utils.ts b/client/src/Project/CurrentTabContent/ChatTab/Input/utils.ts
index dea740a9be..132da7663b 100644
--- a/client/src/Project/CurrentTabContent/ChatTab/Input/utils.ts
+++ b/client/src/Project/CurrentTabContent/ChatTab/Input/utils.ts
@@ -1,5 +1,9 @@
 import OrderedMap from 'orderedmap';
 import { type NodeSpec } from 'prosemirror-model';
+import {
+  InputEditorContent,
+  ParsedQueryTypeEnum,
+} from '../../../../types/general';
 import { mentionNode } from './nodes';
 
 export function addMentionNodes(nodes: OrderedMap<NodeSpec>) {
@@ -7,3 +11,31 @@ export function addMentionNodes(nodes: OrderedMap<NodeSpec>) {
     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,
+  };
+};