feat: select files as contexts

Author: feiskyer

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v4.6.3
+
+* feat: chat with files (including text files and images)
+
 ## v4.6.2
 
 * feat: set selected prompt as system prompt

media/main.css

@@ -176,12 +176,13 @@ input:not([type='checkbox']),
 textarea {
     display: block;
     width: 100%;
-    border: none;
     font-family: var(--vscode-font-family);
     padding: var(--input-padding-vertical) var(--input-padding-horizontal);
     color: var(--vscode-input-foreground);
     outline-color: var(--vscode-input-border);
     background-color: var(--vscode-input-background);
+    border: 1px solid var(--vscode-input-border);
+    border-width: 1px;
 }
 
 input::placeholder,
@@ -250,28 +251,83 @@ textarea::placeholder {
 
 .textarea-wrapper {
     display: grid;
-    max-height: 20rem;
-    font-size: var(--vscode-font-size);
+    position: relative;
+    width: 100%;
+}
+
+.textarea-wrapper>textarea {
+    resize: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    min-height: 40px;
+    max-height: 240px;
+    line-height: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    color: var(--vscode-input-foreground);
+    background-color: var(--vscode-input-background);
+    display: block;
+    outline: none;
+    box-sizing: border-box;
+    border: 1px solid var(--vscode-focusBorder);
+    border-radius: 2px;
+    padding: 6px 8px;
+    padding-right: 76px;
+    white-space: nowrap;
+    grid-area: 1 / 1 / 2 / 2;
 }
 
 .textarea-wrapper::after {
     content: attr(data-replicated-value) " ";
     white-space: pre-wrap;
     visibility: hidden;
+    grid-area: 1 / 1 / 2 / 2;
+    border: 1px solid transparent;
+    padding: 6px 8px;
+    padding-right: 76px;
+    box-sizing: border-box;
 }
 
-.textarea-wrapper>textarea {
-    resize: none;
-    overflow: hidden auto;
-    max-height: 20rem;
+.input-container {
+    position: relative;
+    width: 100%;
+    display: grid;
 }
 
-.textarea-wrapper>textarea,
-.textarea-wrapper::after {
-    border: 1px solid black;
-    padding: .5rem 5rem .5rem .5rem;
-    font: inherit;
-    grid-area: 1 / 1 / 2 / 2;
+/* 文件引用样式 */
+.file-reference {
+    display: inline-block;
+    background-color: rgba(24, 119, 232, 0.2);
+    color: var(--vscode-input-foreground);
+    padding: 2px 4px;
+    margin: 0 2px;
+    border-radius: 3px;
+    font-size: inherit;
+    white-space: nowrap;
+    cursor: default;
+    user-select: none;
+}
+
+/* 输入框容器样式 */
+.scrollable-input-container {
+    width: 100%;
+    min-height: 40px;
+    max-height: 240px;
+    overflow-y: auto;
+    background-color: var(--vscode-input-background);
+    border: 1px solid var(--vscode-input-border);
+    border-radius: 2px;
+}
+
+/* 隐藏滚动条但保持功能 */
+.textarea-wrapper>textarea::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+}
+
+.textarea-wrapper>textarea {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
 .pre-code-element:not(:last-child) {
@@ -480,4 +536,89 @@ pre>code {
     background-color: var(--vscode-textCodeBlock-background, var(--vscode-editor-background));
     border-radius: 6px;
     margin: 1em 0;
+}
+
+.file-references-container {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    gap: 4px;
+    padding: 4px 8px;
+    min-height: 32px;
+    border-bottom: 1px solid var(--vscode-input-border);
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.file-references-container::-webkit-scrollbar {
+    display: none;
+}
+
+.file-references-container:empty {
+    display: none;
+}
+
+.file-reference-tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: rgba(24, 119, 232, 0.2);
+    color: var(--vscode-input-foreground);
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-size: inherit;
+    white-space: nowrap;
+    user-select: none;
+    gap: 4px;
+}
+
+.file-reference-tag .remove-file {
+    cursor: pointer;
+    opacity: 0.7;
+}
+
+.file-reference-tag .remove-file:hover {
+    opacity: 1;
+}
+
+/* 修改按钮容器的定位和对齐 */
+#question-input-buttons {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    pointer-events: auto;
+    z-index: 1;
+}
+
+/* 调整按钮样式 */
+#question-input-buttons button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    min-height: 28px;
+    padding: 0;
+    border-radius: 4px;
+    background: var(--vscode-button-secondaryBackground);
+}
+
+#question-input-buttons svg {
+    width: 16px;
+    height: 16px;
+}
+
+/* 添加悬停和焦点状态 */
+.textarea-wrapper>textarea:hover {
+    border-color: var(--vscode-input-border);
+    border-width: 1px;
+}
+
+.textarea-wrapper>textarea:focus {
+    border-color: var(--vscode-focusBorder);
+    border-width: 1px;
 }

media/main.js

@@ -248,22 +248,70 @@
             case "setActivePrompt":
                 showActivePrompt(message.name);
                 break;
+            case "insertFileReference":
+                const input = document.getElementById("question-input");
+                const fileRefsContainer = document.getElementById("file-references");
+
+                if (message.isAuto) {
+                    const autoTags = fileRefsContainer.querySelectorAll('.file-reference-tag[data-auto="true"]');
+                    autoTags.forEach(tag => tag.remove());
+                }
+
+                // Add file type icon based on extension
+                const isImage = message.fileName.match(/\.(jpg|jpeg|png|gif|webp|svg)$/i);
+                const fileIcon = isImage ?
+                    '<svg xmlns="http://www.w3.org/2000/svg" class="file-icon" viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M4 5h13v7h2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h8v-2H4V5zm16 14v-3h2v3c0 1.1-.9 2-2 2h-3v-2h3zM14 17h2v3h-2zM10 17h2v3h-2zM21 11v2h-2v-2z"/></svg>' :
+                    '<svg xmlns="http://www.w3.org/2000/svg" class="file-icon" viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>';
+
+                const fileTag = document.createElement('span');
+                fileTag.className = 'file-reference-tag';
+                if (message.isAuto) {
+                    fileTag.setAttribute('data-auto', 'true');
+                }
+
+                fileTag.innerHTML = `
+                    ${fileIcon}
+                    ${message.displayName}
+                    <span class="remove-file" data-filepath="${message.fileName}">×</span>
+                `;
+
+                fileTag.querySelector('.remove-file').addEventListener('click', function () {
+                    const filepath = this.getAttribute('data-filepath');
+                    this.parentElement.remove();
+                    vscode.postMessage({
+                        type: "removeFileReference",
+                        fileName: filepath
+                    });
+                });
+
+                fileRefsContainer.appendChild(fileTag);
+
+                if (!message.isAuto) {
+                    const cursorPos = input.selectionStart;
+                    input.value = input.value.substring(0, cursorPos - 1) + input.value.substring(cursorPos);
+                    input.setSelectionRange(cursorPos - 1, cursorPos - 1);
+                }
+                break;
+            case "clearFileReferences":
+                document.getElementById('file-references').innerHTML = '';
+                break;
             default:
                 break;
         }
     });
 
     const addFreeTextQuestion = () => {
         const input = document.getElementById("question-input");
-        if (input.value?.length > 0) {
-            // Ignore if input starts with / or #
-            if (input.value.startsWith("/") || input.value.startsWith("#")) {
-                return;
-            }
+        const value = input.value;
 
+        if (value.startsWith('/') || value.startsWith('#') || value.startsWith('@')) {
+            return;
+        }
+
+        if (value?.length > 0) {
             vscode.postMessage({
                 type: "addFreeTextQuestion",
-                value: input.value,
+                value: value,
             });
 
             input.value = "";
@@ -294,12 +342,29 @@
     };
 
     document.getElementById('question-input').addEventListener("keydown", function (event) {
-        if (event.key == "Enter" && !event.shiftKey && !event.isComposing) {
+        if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
             event.preventDefault();
+            // 如果是命令，不阻止默认行为
+            if (this.value.startsWith('/') || this.value.startsWith('#') || this.value.startsWith('@')) {
+                return;
+            }
             addFreeTextQuestion();
         }
     });
 
+    document.getElementById('question-input').addEventListener("keyup", function (event) {
+        if (event.key === "@") {
+            const cursorPos = this.selectionStart;
+            const textBeforeCursor = this.value.substring(0, cursorPos);
+
+            if (cursorPos === 1 || textBeforeCursor.charAt(cursorPos - 2) === ' ') {
+                vscode.postMessage({
+                    type: "searchFile"
+                });
+            }
+        }
+    });
+
     document.addEventListener("click", (e) => {
         const targetButton = e.target.closest('button');
 
@@ -496,6 +561,11 @@
 
         $("#question-input").autocomplete({
             source: function (request, response) {
+                if (request.term.startsWith('@')) {
+                    response([]);
+                    return;
+                }
+
                 if (request.term.startsWith('#')) {
                     vscode.postMessage({
                         type: "searchPrompts",
@@ -518,7 +588,7 @@
 
                             response(message.titles.map(title => ({
                                 label: title.name,
-                                value: title.content,  // Store the content in value
+                                value: title.content,
                                 promptId: title.id,
                                 name: title.name
                             })));
@@ -546,7 +616,6 @@
                 if (ui.item.isManagePrompt) {
                     vscode.postMessage({ type: "togglePromptManager" });
                 } else if (ui.item.promptId) {
-                    // Send the prompt selection message
                     vscode.postMessage({
                         type: "selectPrompt",
                         prompt: {
@@ -567,12 +636,12 @@
                 // Clear the input after selection
                 $(this).val("");
                 return false;
-            }
+            },
         });
 
-        // Add keydown handler to prevent sending when # is typed
+        // Add keydown handler to prevent sending when # or @ is typed
         $("#question-input").on("keydown", function (event) {
-            if (event.key === "Enter" && this.value.startsWith("#")) {
+            if (event.key === "Enter" && (this.value.startsWith("#") || this.value.startsWith("@"))) {
                 event.preventDefault();
                 return false;
             }
@@ -775,6 +844,16 @@
         #qa-list, #introduction, #conversation-list {
             margin-top: 20px;
         }
-    `;
 
+        .file-reference-tag {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .file-icon {
+            display: inline-block;
+            vertical-align: middle;
+        }
+    `;
 })();

media/prompt-manager.js

@@ -142,7 +142,6 @@
             }
 
             if (button.classList.contains('delete-prompt')) {
-                console.log('Sending delete message for prompt:', promptId);
                 vscode.postMessage({
                     type: 'deletePrompt',
                     id: promptId