fix: command input

mobilon-dev · Feb 24, 2025 · 09d5162 · 09d5162
1 parent 1469d56
commit 09d5162
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 100 deletions.
diff --git a/src/BaseAdaptiveExtendedChatApp.vue b/src/BaseAdaptiveExtendedChatApp.vue
@@ -132,6 +132,7 @@
                 />
                 <ChatInput 
                   :focus-on-input-area="inputFocus"
+                  :commands="commands"
                   @send="addMessage"
                 >
                   <template #buttons>
@@ -186,7 +187,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch, unref, nextTick } from "vue";
+import { onMounted, ref, computed, unref, nextTick } from "vue";
 import moment from 'moment';
 
 import {
@@ -309,6 +310,11 @@ const description = ref()
 const refContainer = ref()
 const refChatWrapper = ref()
 
+const commands = computed(() => {
+  if (selectedChat.value && selectedChat.value.commands) return selectedChat.value.commands
+  else return null
+})
+
 const handleOpenSearchPanel = () => {
   isOpenSearchPanel.value = !isOpenSearchPanel.value
   isShowFeedWhileSearch.value = !isShowFeedWhileSearch.value
@@ -456,19 +462,24 @@ const onSelectChannel = (channel) => {
 const addMessage = (message) => {
   console.log(message);
   // Добавление сообщения в хранилище
-
-  props.dataProvider.addMessage({
-    text: message.text,
-    type: message.type,
-    chatId: selectedChat.value.chatId,
-    url: message.url || null,
-    filename: message.filename || null,
-    status: 'sent',
-    direction: "outgoing",
-    timestamp: moment().unix(),
-    reply: message.reply || null,
-  });
-  messages.value = getFeedObjects(); // Обновление сообщений
+  if (message.type != 'message.command'){
+    props.dataProvider.addMessage({
+      text: message.text,
+      type: message.type,
+      chatId: selectedChat.value.chatId,
+      url: message.url || null,
+      filename: message.filename || null,
+      status: 'sent',
+      direction: "outgoing",
+      timestamp: moment().unix(),
+      reply: message.reply || null,
+    });
+    messages.value = getFeedObjects(); // Обновление сообщений
+  }
+  else {
+    //обработка команды 
+  }
+  
 };
 
 const sendWabaValues = (obj) => {

diff --git a/src/data/chats.ts b/src/data/chats.ts
@@ -131,6 +131,18 @@ export const chats = [
         },
       ],
     },
+    commands: [
+      {
+        action: 'start',
+        title: '/start',
+        description: 'начать работу с чатботом'
+      },
+      {
+        action: 'info',
+        title: '/info',
+        description: 'информация о чатботе'
+      }
+    ]
   },
   {
     chatId: 3, name: "Анна",

diff --git a/src/library/components/ButtonContextMenu.stories.ts b/src/library/components/ButtonContextMenu.stories.ts
@@ -31,8 +31,8 @@ const actionsFileDropDown = [
 ]
 
 const actionsLA = [
-  {action: 'edit', title: 'слишком длинное-длинное поле в слишком коротком-коротком меню'},
-  {action: 'delete', title: 'слишком длинное-длинное поле в слишком коротком-коротком меню'},
+  {action: 'edit', description: 'слишком длинное-длинное поле в слишком коротком-коротком меню'},
+  {action: 'delete', description: 'слишком длинное-длинное поле в слишком коротком-коротком меню'},
 ];
 
 export const StandardRight: Story = {

diff --git a/src/library/components/ChatInput.vue b/src/library/components/ChatInput.vue
@@ -9,7 +9,15 @@
       class="chat-input__file-line"
     />
     <div class="chat-input__second-line">
-
+      <ButtonContextMenu
+        ref="refBCM"
+        v-if="commands"
+        :disabled="getMessage().isRecording"
+        :actions="commands"
+        button-title="/"
+        @click="sendCommand"
+      />
+
       <textarea
         :disabled="state == 'disabled' || getMessage().isRecording"
         ref="refInput"
@@ -32,33 +40,23 @@
     <div class="chat-input__third-line">
       <slot name="buttons" />
     </div>
-    <teleport
-      v-if="getMessage().file"
-      :to="'#chat-input-file-line-'+chatAppId"
-    >
-      <FilePreview
-        v-if="fileInfo"
-        :file-info="fileInfo"
-        @reset="resetSelectedFile"
-      />
-    </teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { unref, ref, watch, nextTick, inject, computed, onMounted } from 'vue';
+import { unref, ref, watch, nextTick, inject, computed } from 'vue';
 import { useMessage } from '../../helpers/useMessage';
 import { t } from '../../locale/useLocale';
 import { IFilePreview, IInputMessage } from '../../types';
 import useImmediateDebouncedRef from '../../helpers/useImmediateDebouncedRef';
-import { uploadFile } from '../../helpers/uploadFile';
-import FilePreview from './FilePreview.vue';
+import ButtonContextMenu from './ButtonContextMenu.vue';
 
 const emit = defineEmits(['send', 'typing']);
 
 const chatAppId = inject('chatAppId')
-const { resetMessage, getMessage, setMessageText, setForceSendMessage, setMessageFile, resetMessageFile, setRecordingMessage } = useMessage(chatAppId as string)
+const { resetMessage, getMessage, setMessageText, setForceSendMessage } = useMessage(chatAppId as string)
 
+const refBCM = ref<typeof ButtonContextMenu>()
 const refInput = ref<HTMLTextAreaElement>();
 const typing = useImmediateDebouncedRef('', 2000)
 const fileInfo = ref<IFilePreview>()
@@ -74,9 +72,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
-  filebumpUrl: {
-    type: String,
-  },
+  commands: {
+    type: Array,
+    required: false,
+    default: null
+  }
 })
 
 const disabledSendButton = computed(() => {
@@ -114,6 +114,16 @@ watch(
         refInput.value.style.height = refInput.value.scrollHeight + 'px'
       }
     })
+    if (props.commands) {
+      if (getMessage().text.startsWith('/')){
+        const element = refBCM.value?.$el.lastChild
+        element.style.display = 'inherit'
+      }
+      else {
+        const element = refBCM.value?.$el.lastChild
+        element.style.display = 'none'
+      }
+    }
   }
 );
 
@@ -148,6 +158,15 @@ const keyEnter = (event: KeyboardEvent) => {
   }
 }
 
+const sendCommand = (command) => {
+  console.log(command)
+  const messageObject: IInputMessage = {
+      type: 'message.command',
+      text: command.action,
+    };
+  emit('send', messageObject)
+}
+
 // Define the method to send the message
 const sendMessage = () => {
   const Message = ref(getMessage())
@@ -181,52 +200,6 @@ const sendMessage = () => {
   }
 };
 
-const pasteFromClipboard = async (event: ClipboardEvent) => {
-  const items = event.clipboardData?.items
-  if (items) {
-    for(let item of items){
-      if (item.type.indexOf('image')!==-1){
-        event.preventDefault()
-        const file = item.getAsFile()
-        if (file){
-          setRecordingMessage(true)
-          const f = typeof props.filebumpUrl == 'string' ? props.filebumpUrl : null 
-          await uploadFile(f, file)
-          .then((data) => {
-            setRecordingMessage(false)
-            if (data.status == 'success'){
-              setMessageFile({
-                url: data.url,
-                name: data.name,
-                size: data.size,
-                type: data.type,
-              })
-              if (data.preview)
-                fileInfo.value = ({
-                  previewUrl: data.preview.previewUrl,
-                  isImage: data.preview.isImage,
-                  isVideo: data.preview.isVideo,
-                  isAudio: data.preview.isAudio,
-                  fileName: data.name,
-                  fileSize: data.preview.fileSize,
-                })
-            }
-          }) 
-        }
-      }
-    }
-  }
-}
-
-const resetSelectedFile = () => {
-  resetMessageFile()
-  fileInfo.value = undefined
-};
-
-onMounted(() => {
-  window.addEventListener('paste', pasteFromClipboard)
-})
-
 </script>
 
 <style

diff --git a/src/library/components/ContextMenu.vue b/src/library/components/ContextMenu.vue
@@ -17,7 +17,13 @@
           v-else-if="action.prime"
           :class="'pi pi-' + action.prime" 
         />
-        <span>{{ action.title }}</span>
+        <span 
+          v-if="action.title" 
+          style="white-space: nowrap;"
+        >
+          {{ action.title }}
+        </span>
+        <span v-if="action.description">{{ action.description }}</span>
       </li>
     </ul>
   </div>

diff --git a/src/library/components/FileUploader.vue b/src/library/components/FileUploader.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, inject } from "vue";
+import { ref, computed, inject, onMounted } from "vue";
 import ButtonContextMenu from "./ButtonContextMenu.vue";
 import FilePreview from "./FilePreview.vue";
 import { useMessage } from "../../helpers/useMessage";
@@ -57,7 +57,7 @@ const fileInput = ref<HTMLInputElement>();
 const fileInfo = ref<IFilePreview>()
 
 const chatAppId = inject('chatAppId')
-const { setMessageFile, resetMessageFile, getMessage } = useMessage(chatAppId as string)
+const { setMessageFile, resetMessageFile, getMessage, setRecordingMessage } = useMessage(chatAppId as string)
 
 const actions = [
   {
@@ -96,12 +96,46 @@ const resetSelectedFile = () => {
 
 const onFileSelected = async () => {
   resetSelectedFile()
-  //console.log("onFileSelected", event.target.files[0]);
   if (fileInput.value?.files) {
-    uploadStatus.value = "uploading";
-    const f = typeof props.filebumpUrl == 'string' ? props.filebumpUrl : null 
-    await uploadFile(f, fileInput.value?.files[0])
+    handleFileUpload(fileInput.value?.files[0])
+  }
+};
+
+const triggerFileUpload = (action) => {
+  if (fileInput.value && canUploadFile) {
+    fileInput.value.accept = action.action
+    fileInput.value.click();
+  }
+};
+
+const triggerFileUploadDefault = () => {
+  if (fileInput.value && canUploadFile  && props.state == 'active') {
+    fileInput.value.click();
+  }
+};
+
+const pasteFromClipboard = async (event: ClipboardEvent) => {
+  const items = event.clipboardData?.items
+  if (items) {
+    for(let item of items){
+      if (item.type.indexOf('image')!==-1){
+        event.preventDefault()
+        const file = item.getAsFile()
+        if (file){
+          handleFileUpload(file)
+        }
+      }
+    }
+  }
+}
+
+const handleFileUpload = async (file: File) => {
+  uploadStatus.value = "uploading";
+  setRecordingMessage(true)
+  const f = typeof props.filebumpUrl == 'string' ? props.filebumpUrl : null 
+  await uploadFile(f, file)
     .then((data) => {
+      setRecordingMessage(false)
       uploadStatus.value = data.status
       if (data.status == 'success'){
         setMessageFile({
@@ -121,21 +155,12 @@ const onFileSelected = async () => {
           })
       }
     }) 
-  }
-};
+}
 
-const triggerFileUpload = (action) => {
-  if (fileInput.value && canUploadFile) {
-    fileInput.value.accept = action.action
-    fileInput.value.click();
-  }
-};
+onMounted(() => {
+  window.addEventListener('paste', pasteFromClipboard)
+})
 
-const triggerFileUploadDefault = () => {
-  if (fileInput.value && canUploadFile  && props.state == 'active') {
-    fileInput.value.click();
-  }
-};
 
 </script>