点击按钮 填充表单

js/ai-service.js

@@ -5,9 +5,12 @@
 class AIService {
   constructor() {
     this.apiEndpoint = CONFIG.AI_API.ENDPOINT;
+    this.messageContainer = document.getElementById("chat-messages");
     this.model = CONFIG.AI_API.MODEL;
+    
     this.context = [];
     this.currentExcelData = null; // 保存当前Excel数据
+    this.response = ''
     // 使用默认API密钥
     this.apiKey = CONFIG.AI_API.DEFAULT_API_KEY;
     this.controller = null; // 用于中断请求的 AbortController
@@ -65,7 +68,8 @@ class AIService {
       });
       // console.log(completion);
       const signal = response.controller.signal;
-      let text = ''
+      let text = '匹配到的关系为：'
+      const paragraph = window.chatUI.addMessage(text, "assistant");
       try {
         const iterator = response.iterator();
         for await (const chunk of iterator) {
@@ -75,9 +79,21 @@ class AIService {
             const decodedChunk = chunk.choices[0].delta.content;
             if (decodedChunk) {
               text += decodedChunk;
+              paragraph.innerHTML = text
             }
+         
           }
         }
+        console.log(document.getElementById("fill-button"));
+        
+        document.getElementById("fill-button").onclick = () => {
+          window.parent.postMessage({
+            type: "HANDLE_FILL_INPUT", data: {
+              formData: JSON.parse(this.response.split('json')[1].split('```')[0])  //根据不同返回修改res
+            }
+          }, "*");
+        }
+        this.response = text
         console.log(text);
         
       } catch (error) {

js/chat-ui.js

@@ -64,19 +64,19 @@ class ChatUI {
     );
 
     // 创建打断按钮
-    this.stopButton.className = "stop-button";
-    this.stopButton.innerHTML = `
-      <svg viewBox="0 0 24 24" fill="currentColor">
-        <path d="M6 6h12v12H6z"/>
-      </svg>
-      <span>停止生成</span>
-    `;
+    // this.stopButton.className = "stop-button";
+    // this.stopButton.innerHTML = `
+    //   <svg viewBox="0 0 24 24" fill="currentColor">
+    //     <path d="M6 6h12v12H6z"/>
+    //   </svg>
+    //   <span>停止生成</span>
+    // `;
 
     // 将打断按钮添加到输入按钮区域
-    document.querySelector(".input-buttons").appendChild(this.stopButton);
+    // document.querySelector(".input-buttons").appendChild(this.stopButton);
 
     // 添加打断按钮事件监听
-    this.stopButton.addEventListener("click", () => this.handleStop());
+    // this.stopButton.addEventListener("click", () => this.handleStop());
 
     this.isTyping = false; // 添加打字状态标记
     this.loadingDiv = null; // 添加加载动画的引用
@@ -245,9 +245,9 @@ class ChatUI {
     this.adjustInputHeight();
 
     try {
-      this.stopButton.classList.add("show");
+      // this.stopButton.classList.add("show");
       this.setInputState(true); // 禁用输入框
-      this.loadingDiv = this.createLoadingMessage();
+      this.loadingDiv = ''
       console.log(this.aiService.currentExcelData);
 
       // 如果存在Excel数据，添加上下文提示
@@ -279,7 +279,7 @@ console.log(response);
       this.isTyping = false;
       await this.addMessage(response, "assistant", true);
 
-      this.stopButton.classList.remove("show");
+      // this.stopButton.classList.remove("show");
       this.setInputState(false); // 这里会自动聚焦输入框
 
       this.aiService.updateContext(response, "assistant");
@@ -289,7 +289,7 @@ console.log(response);
         this.loadingDiv = null;
       }
 
-      this.stopButton.classList.remove("show");
+      // this.stopButton.classList.remove("show");
       this.setInputState(false); // 这里也会自动聚焦输入框
       this.isTyping = false;
 
@@ -309,12 +309,13 @@ console.log(response);
    * @param {boolean} typing 是否使用打字效果
    * @param {boolean} isInterrupted 是否是中断消息
    */
-  async addMessage(
+  addMessage(
     content,
     type,
     typing = type === "assistant",
     isInterrupted = false
   ) {
+    if (!content) return
     const messageDiv = document.createElement("div");
     messageDiv.className = `message ${type}`;
 
@@ -349,13 +350,7 @@ console.log(response);
     messageDiv.appendChild(messageContent);
     this.messageContainer.appendChild(messageDiv);
 
-    if (typing) {
-      messageContent.classList.add("typing");
-      await this.typeMessage(paragraph, content);
-      messageContent.classList.remove("typing");
-    } else {
-      paragraph.innerHTML = this.formatMessage(content);
-    }
+    paragraph.innerHTML = this.formatMessage(content);
 
     const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
     const wasAtBottom = scrollHeight - scrollTop - clientHeight < 100;
@@ -365,6 +360,7 @@ console.log(response);
     } else {
       this.newMessageIndicator.classList.add("show");
     }
+    return paragraph
   }
 
   /**
@@ -552,18 +548,10 @@ console.log(response);
   }
   createFillButton() {
     const button = document.createElement("button");
+    button.id = 'fill-button'
     button.className = "fill-button";
     button.innerHTML = `填充`;
-    button.addEventListener("click", () => {
-      window.parent.postMessage(
-        {
-          type: "FILL_INPUT",
-          data: this.excelData,
-        },
-        "*"
-      );
-      //从夫窗口获取信息
-    });
+  
     return button;
   }
   /**
@@ -648,7 +636,7 @@ console.log(response);
         this.loadingDiv = null;
       }
 
-      this.stopButton.classList.remove("show");
+      // this.stopButton.classList.remove("show");
       this.setInputState(false); // 中断后也自动聚焦输入框
 
       this.addMessage("用户手动停止生成", "assistant", false, true);
@@ -666,7 +654,7 @@ console.log(response);
       this.stopButton.classList.add("show");
     } else {
       this.inputWrapper.classList.remove("generating");
-      this.stopButton.classList.remove("show");
+      // this.stopButton.classList.remove("show");
       // AI回复完成后，自动聚焦到输入框
       this.input.focus();
     }
@@ -721,7 +709,7 @@ console.log(response);
     try {
       // 显示加载状态
       this.setInputState(true);
-      this.loadingDiv = this.createLoadingMessage();
+      this.loadingDiv = ''
 
       // 通过postMessage请求页面分析结果
       this.iframeInfo = await new Promise((resolve) => {
@@ -790,7 +778,7 @@ console.log(response);
         if (this.excelTypes[extension]) {
           try {
             this.setInputState(true);
-            this.loadingDiv = this.createLoadingMessage();
+            this.loadingDiv = ''
 
             // 读取Excel文件
             const data = await this.readExcelFile(file);
@@ -857,6 +845,12 @@ console.log(response);
       if (!this.excelData[header]) this.excelData[header] = []
       this.excelData[header].push(data[1][i])
     })
+    window.parent.postMessage({
+      type: "EXCEL_DATA", data: {
+        excelData: this.excelData,
+      }
+    }, "*");
+   
     return `我将向你展示一个通过SheetJS库读取的Excel文件内容和一个form表单。请帮我理解这些数据：
 
 文件名：${fileName}
@@ -927,7 +921,7 @@ ${this.iframeInfo}
 // 等待DOM加载完成后再初始化
 document.addEventListener("DOMContentLoaded", () => {
   try {
-    const chatUI = new ChatUI();
+    window.chatUI = new ChatUI();
 
 
   } catch (error) {

js/content.js

@@ -208,11 +208,14 @@ class SidebarManager {
         }
       }
       if (event.data.type === "HANDLE_FILL_INPUT") {
-        const { formData, excelData } = event.data.data
-        excelDataA = excelData
-        console.log(formChildren, excelDataA);
+        const { formData } = event.data.data
+        console.log(formChildren);
         await handleFillInput(formData, 0)
       }
+      if (event.data.type === "EXCEL_DATA") {
+        const { excelData } = event.data.data
+        excelDataA = excelData
+      }
     });
 
     // 监听来自iframe的消息
@@ -232,7 +235,7 @@ class SidebarManager {
           );
         }
         if (event.data.type === "ANALYZE_PAGE") {
-          form = document.querySelectorAll("form")[0];
+          form = document.querySelectorAll("form")[1];
           formChildren = [...form.elements]
           // 分析页面并返回结果
           const pageInfo = window.pageAnalyzer.analyzePage();

sidebar.html

@@ -197,6 +197,7 @@
               id="stop-button"
               class="icon-button stop-button"
               title="停止生成"
+              style="display: none;"
             >
               <svg
                 viewBox="0 0 24 24"