图片文本一起发送

ruoyi-ui/src/views/diseaseTreatment/onlineConsult/ai/index.vue

@@ -109,6 +109,20 @@
                         :class="{ 'is-streaming': m.streaming }"
                         v-html="renderChatMarkdown(m.content)"
                       />
+                      <div
+                        v-else-if="m.msgType === 1 && isUserMessage(m)"
+                        class="chat-bubble__user-body"
+                      >
+                        <el-image
+                          v-for="(img, ii) in userMessageImages(m)"
+                          :key="'uimg-' + ii"
+                          :src="mediaUrl(img)"
+                          :preview-src-list="userMessageImages(m).map((u) => mediaUrl(u))"
+                          fit="cover"
+                          class="chat-bubble__img chat-bubble__img--inline"
+                        />
+                        <div v-if="userMessageText(m)" class="chat-bubble__text">{{ userMessageText(m) }}</div>
+                      </div>
                       <div v-else-if="m.msgType === 1" class="chat-bubble__text">{{ m.content }}</div>
                       <el-image
                         v-else-if="m.msgType === 2"
@@ -175,7 +189,7 @@
                 :show-file-list="false"
                 accept=".jpg,.jpeg,.png,.gif"
                 :before-upload="(f) => beforeMediaUpload(f, 'image')"
-                :on-success="(res, file) => onMediaUploadSuccess(res, file, 2)"
+                :on-success="(res, file) => onMediaUploadSuccess(res, file)"
                 :on-error="onUploadError"
               >
                 <el-button
@@ -256,17 +270,29 @@
                 </button>
               </el-popover>
             </div>
-            <div v-if="pendingAttachments.length" class="composer-attachments">
-              <el-tag
+            <div v-if="pendingAttachments.length" class="composer-pending">
+              <div
                 v-for="(a, i) in pendingAttachments"
-                :key="i"
-                closable
-                size="small"
-                class="composer-attach-tag"
-                @close="removeAttachment(i)"
+                :key="a.id || i"
+                class="composer-pending__item"
               >
-                {{ a.kind === "image" ? dtT("uploadImage") : dtT("uploadVideo") }} · {{ a.name }}
-              </el-tag>
+                <el-image
+                  v-if="a.kind === 'image'"
+                  class="composer-pending__thumb"
+                  :src="a.previewUrl || mediaUrl(a.url)"
+                  fit="cover"
+                />
+                <div v-if="a.uploading" class="composer-pending__loading">
+                  <i class="el-icon-loading" />
+                </div>
+                <el-button
+                  v-if="!a.uploading"
+                  type="text"
+                  icon="el-icon-close"
+                  class="composer-pending__remove"
+                  @click="removeAttachment(i)"
+                />
+              </div>
             </div>
             <div class="composer-input-row">
               <el-input
@@ -417,7 +443,14 @@ export default {
     },
     sendDisabled() {
       const t = (this.draft || "").trim()
-      return this.sending || (!t && !this.pendingAttachments.length)
+      if (this.sending) {
+        return true
+      }
+      if (this.pendingAttachments.some((a) => a.uploading)) {
+        return true
+      }
+      const hasReadyAttach = this.pendingAttachments.some((a) => a.url)
+      return !t && !hasReadyAttach
     },
     showThinking() {
       if (!this.sending) {
@@ -498,7 +531,32 @@ export default {
       this.model = value
       this.modelPickerVisible = false
     },
+    revokeAttachmentPreview(a) {
+      if (a && a.objectUrl) {
+        try {
+          URL.revokeObjectURL(a.objectUrl)
+        } catch (e) {
+          /* ignore */
+        }
+      }
+    },
+    setPendingAttachment(item) {
+      this.pendingAttachments.forEach((a) => this.revokeAttachmentPreview(a))
+      this.pendingAttachments = [
+        {
+          id: genLocalId(),
+          kind: item.kind,
+          name: item.name,
+          previewUrl: item.previewUrl,
+          objectUrl: item.objectUrl || "",
+          uploading: !!item.uploading,
+          url: item.url || ""
+        }
+      ]
+    },
     removeAttachment(i) {
+      const a = this.pendingAttachments[i]
+      this.revokeAttachmentPreview(a)
       this.pendingAttachments.splice(i, 1)
     },
     isUserMessage(m) {
@@ -662,7 +720,7 @@ export default {
       this.hydrateLlmSessionId(session)
       this.noMoreOlder = false
       this.messages = []
-      this.draft = ""
+      this.clearComposer()
       this.loadMessages(false)
       this.startPolling()
     },
@@ -881,6 +939,16 @@ export default {
       let content = m.content
       if (m.msgType === 2 && content) {
         content = [{ type: "image_url", image_url: { url: this.mediaUrl(content) } }]
+      } else if (m.msgType === 1 && this.userMessageImages(m).length) {
+        const parts = []
+        for (const u of this.userMessageImages(m)) {
+          parts.push({ type: "image_url", image_url: { url: this.mediaUrl(u) } })
+        }
+        const text = this.userMessageText(m)
+        if (text) {
+          parts.push({ type: "text", text })
+        }
+        content = parts.length === 1 && parts[0].type === "text" ? parts[0].text : parts
       }
       return { role, content: this.contentForLlm(content) }
     },
@@ -909,9 +977,44 @@ export default {
       }
     },
     clearComposer() {
+      this.pendingAttachments.forEach((a) => this.revokeAttachmentPreview(a))
       this.draft = ""
       this.pendingAttachments = []
     },
+    userMessageText(m) {
+      if (!m) {
+        return ""
+      }
+      const c = m.content
+      if (c && typeof c === "object" && !Array.isArray(c)) {
+        return c.text || ""
+      }
+      if (typeof c === "string") {
+        return c
+      }
+      return ""
+    },
+    userMessageImages(m) {
+      if (!m) {
+        return []
+      }
+      const c = m.content
+      if (c && typeof c === "object" && !Array.isArray(c) && Array.isArray(c.imageUrls)) {
+        return c.imageUrls.filter(Boolean)
+      }
+      return []
+    },
+    resolveUserDisplayMessage(draftText, pendingSnapshot) {
+      const text = (draftText || "").trim()
+      const imgs = pendingSnapshot.filter((a) => a.kind === "image" && a.url).map((a) => a.url)
+      if (imgs.length && text) {
+        return { msgType: 1, content: { text, imageUrls: imgs } }
+      }
+      if (imgs.length) {
+        return { msgType: 2, content: imgs[0] }
+      }
+      return { msgType: 1, content: text }
+    },
     resolvePayloadUserContent(payload) {
       if (payload.msgType === 1) {
         return payload.content
@@ -1186,7 +1289,11 @@ export default {
     },
     sendText() {
       const text = (this.draft || "").trim()
-      if (!text && !this.pendingAttachments.length) {
+      if (this.pendingAttachments.some((a) => a.uploading)) {
+        this.$modal.msgWarning(this.dtT("uploading"))
+        return
+      }
+      if (!text && !this.pendingAttachments.some((a) => a.url)) {
         this.$modal.msgWarning(this.dtT("inputOrAttach"))
         return
       }
@@ -1214,9 +1321,9 @@ export default {
       const msgType = (payload && payload.msgType) || 1
       const draftText = (this.draft || "").trim()
       const pendingSnapshot = this.pendingAttachments.slice()
-      const displayContent = msgType !== 1 ? payload.content : userContent
       const persistBody = this.buildPersistSendBody(msgType, payload, draftText, pendingSnapshot)
-      this.appendLocalMessage(SENDER_ROLE_USER, msgType, displayContent)
+      const displayMsg = this.resolveUserDisplayMessage(draftText, pendingSnapshot)
+      this.appendLocalMessage(SENDER_ROLE_USER, displayMsg.msgType, displayMsg.content)
       this.clearComposer()
       this.$nextTick(() => this.scrollChatBottom())
 
@@ -1325,22 +1432,46 @@ export default {
         this.$modal.msgError(this.dtT(rule.errMb))
         return false
       }
-      this.$modal.loading(this.dtT("uploading"))
+      const objectUrl = URL.createObjectURL(file)
+      this.setPendingAttachment({
+        kind,
+        name: file.name,
+        previewUrl: objectUrl,
+        objectUrl,
+        uploading: true,
+        url: ""
+      })
       return true
     },
-    onMediaUploadSuccess(res, file, msgType) {
-      this.$modal.closeLoading()
+    onMediaUploadSuccess(res, file) {
       if (res.code === 200 && (res.url || res.fileName)) {
-        this.sendViaLlm({
-          msgType,
-          content: res.url || res.fileName
-        })
+        const url = res.url || res.fileName
+        const pending = this.pendingAttachments[0]
+        if (pending && pending.uploading) {
+          this.$set(pending, "url", url)
+          this.$set(pending, "uploading", false)
+          this.$set(pending, "previewUrl", this.mediaUrl(url))
+          if (pending.objectUrl) {
+            this.revokeAttachmentPreview(pending)
+            this.$set(pending, "objectUrl", "")
+          }
+        } else {
+          this.setPendingAttachment({
+            kind: "image",
+            name: file.name,
+            previewUrl: this.mediaUrl(url),
+            url
+          })
+        }
       } else {
+        this.pendingAttachments.forEach((a) => this.revokeAttachmentPreview(a))
+        this.pendingAttachments = []
         this.$modal.msgError(res.msg || this.dtT("uploadFail"))
       }
     },
     onUploadError() {
-      this.$modal.closeLoading()
+      this.pendingAttachments.forEach((a) => this.revokeAttachmentPreview(a))
+      this.pendingAttachments = []
       this.$modal.msgError(this.dtT("uploadFail"))
     },
     stopVoice() {
@@ -1786,6 +1917,17 @@ export default {
   border-radius: 6px;
 }
 
+.chat-bubble__user-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.chat-bubble__img--inline {
+  display: block;
+}
+
 .chat-bubble__video {
   max-width: 240px;
   max-height: 180px;
@@ -1954,12 +2096,55 @@ export default {
   transition: transform 0.2s;
 }
 
-.composer-attachments {
-  margin-bottom: 8px;
+.composer-pending {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.composer-pending__item {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f0f2f5;
+  flex-shrink: 0;
+}
+
+.composer-pending__thumb {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.composer-pending__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.35);
+  color: #fff;
+  font-size: 22px;
 }
 
-.composer-attach-tag {
-  margin-right: 6px;
+.composer-pending__remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  padding: 0;
+  width: 22px;
+  height: 22px;
+  min-height: 22px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.45);
+  color: #fff;
+
+  ::v-deep i {
+    color: #fff;
+  }
 }
 
 .composer-upload {