fix: bard text area selector

apps/chrome-extension/src/pages/Content/base.dom.tsx

@@ -1,4 +1,5 @@
 import { IPrompt } from '@rpidanny/llm-prompt-templates';
+import { message } from 'antd';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
@@ -28,7 +29,16 @@ export abstract class BaseDom {
 
   private handlePromptSelected(prompt: IPrompt): void {
     this.isPromptsViewOpen = false;
-    this.usePrompt(prompt);
+    try {
+      this.usePrompt(prompt);
+    } catch (error) {
+      console.error(error);
+      message.error(
+        'Failed to use prompt. Copying prompt to clipboard instead.',
+        5
+      );
+      this.copyPromptToClipboard(prompt);
+    }
     this.hidePrompts();
   }
 
@@ -50,6 +60,15 @@ export abstract class BaseDom {
     );
   }
 
+  protected copyPromptToClipboard(prompt: IPrompt) {
+    const clipboardItem = new ClipboardItem({
+      'text/plain': new Blob([prompt.content], { type: 'text/plain' }),
+    });
+    navigator.clipboard.write([clipboardItem]);
+
+    message.info(`${prompt.name} prompt copied to clipboard`, 7);
+  }
+
   protected async showPrompts() {
     this.isPromptsViewOpen = true;
     await this.render();

apps/chrome-extension/src/pages/Content/generic.dom.ts

@@ -1,5 +1,4 @@
 import { IPrompt } from '@rpidanny/llm-prompt-templates';
-import { message } from 'antd';
 
 import { BaseDom } from './base.dom';
 
@@ -10,12 +9,7 @@ export class GenericDom extends BaseDom {
   protected addCustomTrigger() {}
 
   protected usePrompt(prompt: IPrompt) {
-    const clipboardItem = new ClipboardItem({
-      'text/plain': new Blob([prompt.content], { type: 'text/plain' }),
-    });
-    navigator.clipboard.write([clipboardItem]);
-
-    message.info(`${prompt.name} prompt copied to clipboard`);
+    this.copyPromptToClipboard(prompt);
   }
 }
 

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

@@ -1,6 +1,16 @@
-import { ChatGPTDom } from '../chatgpt/chatgpt.dom';
+import { IPrompt } from '@rpidanny/llm-prompt-templates';
 
-export class BardDom extends ChatGPTDom {
+import { LLMDom } from '../llm.dom';
+
+export class BardDom extends LLMDom {
   protected name = 'Bard';
-  protected textAreaSelector = 'div > textarea';
+  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/chatgpt/chatgpt.dom.ts

@@ -1,34 +1,11 @@
 import { IPrompt } from '@rpidanny/llm-prompt-templates';
 
-import { BaseDom } from '../../base.dom';
+import { LLMDom } from '../llm.dom';
 
-export class ChatGPTDom extends BaseDom {
+export class ChatGPTDom extends LLMDom {
   protected name = 'ChatGPT';
   protected textAreaSelector = 'div.relative > textarea';
 
-  private getTextArea(): HTMLTextAreaElement {
-    const textArea = document.querySelector<HTMLTextAreaElement>(
-      this.textAreaSelector
-    );
-
-    if (!textArea) throw new Error('Could not find text area');
-
-    return textArea;
-  }
-
-  protected addCustomTrigger() {
-    this.getTextArea().addEventListener('input', (event) => {
-      const input = event.target as HTMLTextAreaElement;
-      const text = input.value;
-
-      if (text === '/templates' || text === '/lpt') {
-        this.showPrompts();
-      } else if (this.isPromptsViewOpen) {
-        this.hidePrompts();
-      }
-    });
-  }
-
   protected usePrompt(prompt: IPrompt) {
     const textArea = this.getTextArea();
     console.log('Setting text', prompt.content);

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

@@ -0,0 +1,31 @@
+import { BaseDom } from '../base.dom';
+
+export abstract class LLMDom extends BaseDom {
+  protected abstract name: string;
+  protected abstract textAreaSelector: string;
+
+  protected getTextArea(): HTMLTextAreaElement {
+    const textArea = document.querySelector<HTMLTextAreaElement>(
+      this.textAreaSelector
+    );
+
+    if (!textArea) {
+      throw new Error('Could not find text area');
+    }
+
+    return textArea;
+  }
+
+  protected addCustomTrigger() {
+    this.getTextArea().addEventListener('input', (event) => {
+      const input = event.target as HTMLTextAreaElement;
+      const text = input.value;
+
+      if (text === '/templates' || text === '/lpt') {
+        this.showPrompts();
+      } else if (this.isPromptsViewOpen) {
+        this.hidePrompts();
+      }
+    });
+  }
+}