Use Gemini-1.5-pro-latest Stream Chat with history, Generate Git Commit message with Gemini, Add a Gemini Extension webview window, Chat mesage with Highlight Code

.gitignore

@@ -7,3 +7,4 @@
 **/venv
 **/.python-version
 **/node_modules
+**/*.vsix

examples/gemini/node/pipet-code-agent/.vscode/launch.json

@@ -5,30 +5,35 @@
 {
 	"version": "0.2.0",
 	"configurations": [
-		{
-			"name": "Run Extension",
-			"type": "extensionHost",
-			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}"
-			],
-			"outFiles": [
-				"${workspaceFolder}/out/**/*.js"
-			],
-			"preLaunchTask": "${defaultBuildTask}"
-		},
-		{
-			"name": "Extension Tests",
-			"type": "extensionHost",
-			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}",
-				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
-			],
-			"outFiles": [
-				"${workspaceFolder}/out/test/**/*.js"
-			],
-			"preLaunchTask": "${defaultBuildTask}"
-		}
-	]
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    },
+    {
+      "name": "Extension Tests",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+      ],
+      "outFiles": ["${workspaceFolder}/out/test/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    },
+    {
+      "name": "Package Extension",
+      "type": "node",
+      "console": "internalConsole",
+      "request": "launch",
+      "args": ["package", "--out", "build/PipetCodeAgent.vsix"],
+      "runtimeExecutable": "vsce",
+      "presentation": {
+        "reveal": "always"
+      }
+    }
+  ]
 }

examples/gemini/node/pipet-code-agent/.vscode/tasks.json

@@ -1,20 +1,20 @@
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 {
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "watch",
-			"problemMatcher": "$tsc-watch",
-			"isBackground": true,
-			"presentation": {
-				"reveal": "never"
-			},
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			}
-		}
-	]
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
 }

examples/gemini/node/pipet-code-agent/media/main.css

@@ -0,0 +1,84 @@
+/**
+ * Copyright 2024 Jason
+ */
+
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex: 1;
+}
+
+#dialog {
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  /* position: fixed;
+  bottom: 0;
+  width: -webkit-fill-available; */
+}
+
+#userInput {
+  height: auto;
+  line-height: 1;
+  max-height: 300px;
+  resize: none;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border: 1px solid var(--vscode-input-foreground);
+  border-radius: 3px;
+  flex: 1;
+}
+
+#sendMessage {
+  height: auto;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border: 1px solid var(--vscode-input-foreground);
+  margin-left: 5px;
+  transition: background-color 0.3s;
+  border-radius: 3px;
+}
+
+#sendMessage:hover {
+  background-color: var(--vscode-input-foreground);
+  color: var(--vscode-input-background);
+}
+
+.message-container {
+  position: relative;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-editor-foreground);
+}
+
+.code-buttons-container {
+  background-color: #ffffff00;
+  border: none;
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Layer_1'%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath stroke='null' id='svg_1' d='m11.17086,13.7471l-7.75098,0l0,-10.05744l-1.40928,0l0,10.05744c0,0.79023 0.63418,1.43678 1.40928,1.43678l7.75098,0l0,-1.43678zm2.81854,-2.87355l0,-8.62066c0,-0.79023 -0.63418,-1.43678 -1.40928,-1.43678l-6.34171,0c-0.7751,0 -1.40928,0.64655 -1.40928,1.43678l0,8.62066c0,0.79023 0.63418,1.43678 1.40928,1.43678l6.34171,0c0.7751,0 1.40928,-0.64655 1.40928,-1.43678zm-1.40928,0l-6.34171,0c0,-2.87355 0,-5.74711 0,-8.62066l6.34171,0l0,8.62066z' fill='%23bfbdb6'/%3E%3C/g%3E%3C/svg%3E");
+  transition: background-color 0.3s;
+}
+
+.code-buttons-container:hover {
+  background-color: #ffffff41;
+}
+
+.pre {
+  position: relative;
+}

examples/gemini/node/pipet-code-agent/media/main.js

@@ -0,0 +1,170 @@
+/**
+ * Copyright 2024 Google LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+document.addEventListener("DOMContentLoaded", function () {
+  const vscode = acquireVsCodeApi();
+  const oldState = vscode.getState() || {};
+  let oldHtml = oldState || "<div></div>";
+
+  const dialog = document.getElementById("dialog");
+  const userInput = document.getElementById("userInput");
+  const sendMessageButton = document.getElementById("sendMessage");
+  let chatID;
+  dialog.innerHTML = oldHtml;
+  userInput.scrollIntoView({ behavior: "smooth", block: "end" });
+
+  const allCodeButtons = Array.from(
+    dialog.getElementsByClassName("code-buttons-container")
+  );
+  if (allCodeButtons) {
+    allCodeButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        const toCopy =
+          button.parentElement.querySelectorAll("pre code")[0].textContent;
+        navigator.clipboard.writeText(toCopy);
+      });
+    });
+  }
+
+  const allChats = Array.from(
+    dialog.getElementsByClassName("message-container")
+  );
+  if (allChats) {
+    allChats.forEach((chat) => {
+      switch (chat.firstChild.textContent) {
+        case "You: ":
+          vscode.postMessage({
+            command: "updateHistory",
+            role: "user",
+            text: chat.textContent.replace("You:", "").trim(),
+          });
+          break;
+        case "Gemini: ":
+          vscode.postMessage({
+            command: "updateHistory",
+            role: "model",
+            text: chat.textContent.replace("model:", "").trim(),
+          });
+          break;
+      }
+    });
+  }
+
+  function adjustTextareaHeight() {
+    userInput.style.height = "auto";
+    userInput.style.height = userInput.scrollHeight + "px";
+    sendMessageButton.disabled = !userInput.value;
+  }
+  userInput.addEventListener("input", adjustTextareaHeight);
+  userInput.addEventListener("keydown", handleKeyDown);
+
+  function showAIMessage(text, chatID) {
+    const messageContainer = document.createElement("div");
+    if (messageContainer) {
+      messageContainer.id = chatID;
+      messageContainer.classList.add("message-container");
+      messageContainer.innerHTML =
+        "<p><strong>Gemini:</strong> " + marked.parse(text) + "</p>";
+      dialog.appendChild(messageContainer);
+      userInput.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }
+
+  function updateAIMessage(newText, chatID) {
+    const messageContainer = document.getElementById(chatID);
+    if (messageContainer) {
+      (messageContainer.innerHTML =
+        "<p><strong>Gemini:</strong> " + marked.parse(newText)),
+        +"</p>";
+      addBottons(messageContainer);
+      sendMessageButton.innerHTML = "Chat";
+      userInput.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }
+
+  function onSelection(text) {
+    userInput.placeholder = text;
+  }
+
+  function showUserMessage(text) {
+    const messageContainer = document.createElement("div");
+    if (messageContainer) {
+      messageContainer.classList.add("message-container");
+      messageContainer.innerHTML =
+        "<p><strong>You:</strong> " + marked.parse(text) + "</p>";
+      addBottons(messageContainer);
+      dialog.appendChild(messageContainer);
+      userInput.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }
+  /**
+   * @param {HTMLDivElement}
+   */
+  function addBottons(container) {
+    const codeElements = container.querySelectorAll("pre code");
+    codeElements.forEach((codeElement) => {
+      const copyButton = document.createElement("button");
+      copyButton.classList.add("code-buttons-container");
+      copyButton.addEventListener("click", () => {
+        const textToCopy = codeElement.textContent;
+        navigator.clipboard.writeText(textToCopy);
+      });
+      codeElement.parentElement.classList.add("pre");
+      codeElement.parentElement.appendChild(copyButton);
+      Prism.highlightElement(codeElement);
+    });
+  }
+
+  function handleKeyDown(event) {
+    if (event.keyCode === 13) {
+      if (!event.shiftKey) {
+        event.preventDefault();
+        sendMessageButton.click();
+      }
+    }
+  }
+
+  sendMessageButton.addEventListener("click", () => {
+    chatID = Math.random().toString().substring(2);
+    const userMessage = userInput.value;
+    vscode.postMessage({ command: "sendMessage", text: userMessage });
+    userInput.value = "";
+    userInput.style.height = "auto";
+    sendMessageButton.disabled = true;
+    sendMessageButton.innerHTML = "Thinking...";
+  });
+
+  window.addEventListener("message", (event) => {
+    const message = event.data;
+    switch (message.command) {
+      case "receiveMessage":
+        updateAIMessage(message.text, chatID);
+        break;
+      case "Message":
+        showUserMessage(message.text);
+        showAIMessage("Thinking ...", chatID);
+        break;
+      case "clearChat":
+        dialog.innerHTML = "<div></div>";
+        break;
+      case "onSelection":
+        onSelection(message.text);
+        break;
+      default:
+        console.log("Unknown command: " + message.command);
+    }
+    vscode.setState(dialog.innerHTML);
+  });
+});