Update auto_commit.py with Python 3.10 requirements and dependencies.… (

#520) * Update auto_commit.py with Python 3.10 requirements and dependencies. Refactor Message component in Vue for better alignment and styling, add cancel option in zh-CN locale, and remove unused props in AudioPlayer component. Introduce edit modal for message component. * Refactor message component UI and fix modal style
swuecho · Sep 5, 2024 · 492d243 · 492d243
1 parent 5d1bbe8
commit 492d243
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 83 deletions.
diff --git a/scripts/auto_commit.py b/scripts/auto_commit.py
@@ -1,3 +1,9 @@
+# /// script
+# requires-python = ">=3.10"
+# dependencies = [
+#     "requests",
+# ]
+# ///
 """
 translate from  https://github.com/zhufengme/GPTCommit/blob/main/gptcommit.sh
 

diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
@@ -21,6 +21,7 @@
     "signup": "注册",
     "email": "邮箱",
     "confirm": "确认",
+    "cancel": "取消",
     "email_placeholder": "请输入邮箱",
     "password_placeholder": "请输入密码",
     "unauthorizedTips": "请注册或者登录",

diff --git a/web/src/views/chat/components/AudioPlayer/index.vue b/web/src/views/chat/components/AudioPlayer/index.vue
@@ -5,7 +5,6 @@ import request from '@/utils/request/axios'
 
 interface Props {
         text: string
-        right?: boolean
 }
 
 const props = defineProps<Props>()
@@ -52,9 +51,9 @@ async function playAudio() {
 
 
 <template>
-        <div :align="props.right ? 'right' : undefined ">
+        <div>
         <HoverButton :tooltip="$t('chat.playAudio')" @click="playAudio">
-                <span class="text-xl text-[#4f555e] dark:text-white">
+                <span class=" text-[#4f555e] dark:text-white">
                         <SvgIcon icon="wpf:audio-wave" />
                 </span>
         </HoverButton>

diff --git a/web/src/views/chat/components/Message/index.vue b/web/src/views/chat/components/Message/index.vue
@@ -1,14 +1,12 @@
 <script setup lang='ts'>
-import { computed, nextTick, ref } from 'vue'
-import { NDropdown } from 'naive-ui'
+import { computed, ref } from 'vue'
+import { NModal, NInput, NCard, NButton } from 'naive-ui'
 import AudioPlayer from '../AudioPlayer/index.vue'
 import TextComponent from '@/views/components/Message/Text.vue'
 import AvatarComponent from '@/views/components/Avatar/MessageAvatar.vue'
-import { SvgIcon } from '@/components/common'
+import { HoverButton, SvgIcon } from '@/components/common'
 import { copyText } from '@/utils/format'
-import { useIconRender } from '@/hooks/useIconRender'
 import { useUserStore } from '@/store'
-import { t } from '@/locales'
 import { displayLocaleDate } from '@/utils/date'
 
 interface Props {
@@ -35,55 +33,14 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<Emit>()
 
-const { iconRender } = useIconRender()
-
 const textRef = ref()
 
-const editable = ref(false)
 
 const userStore = useUserStore()
 const userInfo = computed(() => userStore.userInfo)
 
-const options = [
-  {
-    label: t('common.edit'),
-    key: 'editText',
-    icon: iconRender({ icon: 'ri:edit-line' }),
-  },
-  {
-    label: t('chat.copy'),
-    key: 'copyText',
-    icon: iconRender({ icon: 'ri:file-copy-2-line' }),
-  },
-  {
-    label: t('common.delete'),
-    key: 'delete',
-    icon: iconRender({ icon: 'ri:delete-bin-line' }),
-  },
-]
-
-function onContentChange(event: FocusEvent, index: number) {
-  editable.value = false
-  const text = (event.target as HTMLElement).innerText
-  emit('afterEdit', index, text)
-}
-
-async function handleSelect(key: 'copyText' | 'delete' | 'editText') {
-  switch (key) {
-    case 'copyText':
-      copyText({ text: props.text ?? '' })
-      return
-    case 'delete':
-      emit('delete')
-      return
-    case 'editText':
-      // make the text editable
-      editable.value = true
-      await nextTick()
-      textRef.value.textRef.focus()
-      break
-  }
-}
+const showEditModal = ref(false)
+const editedText = ref('')
 
 const code = computed(() => {
   return props?.model?.includes('davinci') ?? false
@@ -92,45 +49,101 @@ const code = computed(() => {
 function handleRegenerate() {
   emit('regenerate')
 }
+
+function handleCopy() {
+  copyText({ text: props.text ?? '' })
+}
+
+function handleEdit() {
+  editedText.value = props.text || ''
+  showEditModal.value = true
+}
+
+function handleEditConfirm() {
+  emit('afterEdit', props.index, editedText.value)
+  showEditModal.value = false
+}
+
+function handleDelete() {
+  emit('delete')
+}
 </script>
 
 <template>
   <div class="chat-message">
-  <p class="text-xs text-[#b4bbc4] text-center">{{ displayLocaleDate(dateTime) }}</p>
-  <div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
-    <div class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
-      :class="[inversion ? 'ml-2' : 'mr-2']">
-      <AvatarComponent :inversion="inversion" :model="model" />
-    </div>
-    <div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
-      <p :class="[inversion ? 'text-right' : 'text-left']">
-        {{ !inversion ? model : userInfo.name || $t('setting.defaultName') }}
-      </p>
-      <div class="flex items-end gap-1 mt-2" :class="[inversion ? 'flex-row-reverse' : 'flex-row']">
-        <TextComponent ref="textRef" class="message-text" :inversion="inversion" :error="error" :text="text"
-          :code="code" :loading="loading" :contenteditable="editable" :idex="index"
-          @blur="event => onContentChange(event, index)" />
-        <div class="flex flex-col">
-          <!-- testid="chat-message-regenerate" not ok, someting like testclass -->
-          <button v-if="!inversion"
-            class="chat-message-regenerate mb-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
-            @click="handleRegenerate">
-            <SvgIcon icon="ri:restart-line" />
-          </button>
-          <button v-if="!isPrompt && inversion"
-            class="mb-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300" :disabled="pining"
-            @click="emit('togglePin')">
-            <SvgIcon :icon="isPin ? 'ri:unpin-line' : 'ri:pushpin-line'" />
-          </button>
-          <NDropdown :placement="!inversion ? 'right' : 'left'" :options="options" @select="handleSelect">
-            <button class="transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-200">
-              <SvgIcon icon="ri:more-2-fill" />
+    <p class="text-xs text-[#b4bbc4] text-center">{{ displayLocaleDate(dateTime) }}</p>
+    <div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
+      <div class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
+        :class="[inversion ? 'ml-2' : 'mr-2']">
+        <AvatarComponent :inversion="inversion" :model="model" />
+      </div>
+      <div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
+        <p :class="[inversion ? 'text-right' : 'text-left']">
+          {{ !inversion ? model : userInfo.name || $t('setting.defaultName') }}
+        </p>
+        <div class="flex items-end gap-1 mt-2" :class="[inversion ? 'flex-row-reverse' : 'flex-row']">
+          <TextComponent ref="textRef" class="message-text" :inversion="inversion" :error="error" :text="text"
+            :code="code" :loading="loading" :idex="index" />
+          <div class="flex flex-col">
+            <!-- testid="chat-message-regenerate" not ok, someting like testclass -->
+            <button v-if="!inversion"
+              class="chat-message-regenerate mb-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
+              @click="handleRegenerate">
+              <SvgIcon icon="ri:restart-line" />
+            </button>
+            <button v-if="!isPrompt && inversion"
+              class="mb-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
+              :disabled="pining" @click="emit('togglePin')">
+              <SvgIcon :icon="isPin ? 'ri:unpin-line' : 'ri:pushpin-line'" />
             </button>
-          </NDropdown>
+
+
+          </div>
+        </div>
+        <div class="flex" :class="[inversion ? 'justify-end' : 'justify-start']">
+          <div class="flex items-center">
+            <!--
+            <AudioPlayer :text="text || ''" :right="inversion" class="mr-2" />
+          -->
+            <HoverButton :tooltip="$t('common.delete')"
+              class="transition text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-300"
+              @click="handleDelete">
+              <SvgIcon icon="ri:delete-bin-line" />
+            </HoverButton>
+            <HoverButton :tooltip="$t('common.edit')"
+              class="transition text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-300"
+              @click="handleEdit">
+              <SvgIcon icon="ri:edit-line" />
+            </HoverButton>
+            <HoverButton :tooltip="$t('chat.copy')"
+              class="transition text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-300"
+              @click="handleCopy">
+              <SvgIcon icon="ri:file-copy-2-line" />
+            </HoverButton>
+
+          </div>
         </div>
+
       </div>
-      <AudioPlayer :text="text || ''" :right="inversion"></AudioPlayer>
     </div>
   </div>
-  </div>
+
+  <!-- Updated modal for editing -->
+  <NModal v-model:show="showEditModal" :mask-closable="false" style="width: 90%; max-width: 800px;">
+    <NCard :bordered="false" size="medium" role="dialog" aria-modal="true" :title="$t('common.edit')">
+
+      <NInput v-model:value="editedText" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" :autofocus="true" />
+
+      <template #footer>
+        <div class="flex justify-end space-x-2">
+          <NButton type="default" @click="showEditModal = false">
+            {{ $t('common.cancel') }}
+          </NButton>
+          <NButton type="primary" @click="handleEditConfirm">
+            {{ $t('common.confirm') }}
+          </NButton>
+        </div>
+      </template>
+    </NCard>
+  </NModal>
 </template>