feat: support gemini

Author: rpidanny

apps/chrome-extension/README.md

@@ -2,11 +2,11 @@
 
 The LLM Prompt Templates Chrome Extension is a powerful tool that offers quick access to a collection of reusable prompt templates for various LLMs. With this extension installed, you can easily insert effective and relevant prompts with just a few clicks.
 
-| LLM                                 | Status   |
-| ----------------------------------- | -------- |
-| [ChatGPT](https://chat.openai.com/) | 🎉 Done  |
-| [Bard](https://bard.google.com/)    | 🎉 Done  |
-| Bing                                | 📝 To-do |
+| LLM                                         | Status   |
+| ------------------------------------------- | -------- |
+| [ChatGPT](https://chat.openai.com/)         | 🎉 Done  |
+| [Gemini (Bard)](https://gemini.google.com/) | 🎉 Done  |
+| Bing                                        | 📝 To-do |
 
 ## Installation
 

apps/chrome-extension/src/manifest.json

@@ -23,11 +23,18 @@
       "css": ["bard.content.styles.css"],
       "run_at": "document_end"
     },
+    {
+      "matches": ["https://gemini.google.com/*"],
+      "js": ["geminiContentScript.bundle.js"],
+      "css": ["gemini.content.styles.css"],
+      "run_at": "document_end"
+    },
     {
       "matches": ["<all_urls>"],
       "exclude_matches": [
         "https://chat.openai.com/*",
         "https://bard.google.com/*",
+        "https://gemini.google.com/*",
         "https://chatgpt.com/*"
       ],
       "js": ["defaultContentScript.bundle.js"]
@@ -49,6 +56,10 @@
     {
       "resources": ["bard.content.styles.css"],
       "matches": ["https://bard.google.com/*"]
+    },
+    {
+      "resources": ["gemini.content.styles.css"],
+      "matches": ["https://gemini.google.com/*"]
     }
   ],
   "permissions": ["storage"]

apps/chrome-extension/src/pages/Content/llms/gemini/.gitkeep

@@ -0,0 +1,16 @@
+import { IPrompt } from '@rpidanny/llm-prompt-templates';
+
+import { LLMDom } from '../llm.dom';
+
+export class GeminiDom extends LLMDom {
+  protected name = 'Gemini';
+  protected textAreaSelector = 'rich-textarea > .ql-editor';
+
+  protected usePrompt(prompt: IPrompt) {
+    const textArea = this.getTextArea();
+    console.log('Setting text', prompt.content);
+    textArea.focus();
+    textArea.textContent = prompt.content;
+    textArea.style.height = textArea.scrollHeight + 'px';
+  }
+}

apps/chrome-extension/src/pages/Content/llms/gemini/gemini.content.styles.css

@@ -0,0 +1,9 @@
+import { GeminiDom } from './gemini.dom';
+
+function init() {
+  const geminiDom = new GeminiDom();
+
+  setTimeout(geminiDom.init, 1000);
+}
+
+init();

apps/chrome-extension/src/pages/Content/llms/gemini/gemini.dom.ts

@@ -55,6 +55,15 @@ module.exports = composePlugins(withNx(), withReact(), (config) => {
         'bard',
         'index.ts'
       ),
+      geminiContentScript: path.join(
+        config.context,
+        'src',
+        'pages',
+        'Content',
+        'llms',
+        'gemini',
+        'index.ts'
+      ),
       defaultContentScript: path.join(
         config.context,
         'src',
@@ -198,6 +207,15 @@ module.exports = composePlugins(withNx(), withReact(), (config) => {
           },
         ],
       }),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: 'src/pages/Content/llms/gemini/gemini.content.styles.css',
+            to: path.join(config.output.path),
+            force: true,
+          },
+        ],
+      }),
       new HtmlWebpackPlugin({
         template: path.join(
           config.context,