From fe68d34d1c8fca0eaebe7f01e6f9d49afef8015d Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Thu, 23 Mar 2023 13:00:30 +0100
Subject: [PATCH] Add support for awesome prompts, fixes ChatGPT pre-written
 prompts #66

---
 README.md              |  5 +++++
 src/app.scss           | 10 ++++++++++
 src/lib/Chat.svelte    |  5 +++++
 src/lib/Prompts.svelte | 39 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 59 insertions(+)
 create mode 100644 src/lib/Prompts.svelte

diff --git a/README.md b/README.md
index c209568..3820ffc 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,11 @@ npm ci
 npm run dev # or: npm run build
 ```
 
+To update the [`awesome-chatgpt-prompts`](/src/awesome-chatgpt-prompts/) subtree, run :
+```bash
+git subtree pull --prefix src/awesome-chatgpt-prompts https://github.com/f/awesome-chatgpt-prompts.git main --squash
+```
+
 ## Use with Docker compose
 
 ```bash
diff --git a/src/app.scss b/src/app.scss
index e00d002..864e2e4 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -117,4 +117,14 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
   width: 1.5rem;
   height: 1.5rem;
   border-width: 0.25em;
+}
+
+/* Support for fullwidth dropdowns, see https://github.com/jgthms/bulma/issues/2055 */
+.dropdown.is-fullwidth {
+  display: flex;
+
+  .dropdown-trigger,
+  .dropdown-menu {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 428c5c1..c5646bd 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -15,6 +15,7 @@
     supportedModels
   } from './Types.svelte'
   import Code from './Code.svelte'
+  import Prompts from './Prompts.svelte'
 
   import { afterUpdate, onMount } from 'svelte'
   import { replace } from 'svelte-spa-router'
@@ -496,6 +497,10 @@
   </article>
 {/if}
 
+{#if chat.messages.length === 0}
+  <Prompts bind:input />
+{/if}
+
 <form class="field has-addons has-addons-right is-align-items-flex-end" on:submit|preventDefault={() => submitForm()}>
   <p class="control is-expanded">
     <textarea
diff --git a/src/lib/Prompts.svelte b/src/lib/Prompts.svelte
new file mode 100644
index 0000000..2bddf13
--- /dev/null
+++ b/src/lib/Prompts.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import prompts from '../awesome-chatgpt-prompts/prompts.csv'
+
+  const inputPrompt = (prompt: string) => {
+    input.value = prompt
+    input.style.height = 'auto'
+    input.style.height = input.scrollHeight + 'px'
+  }
+
+  export let input : HTMLTextAreaElement
+</script>
+
+{#if input}
+<div class="columns is-centered">
+  <div class="column is-half">
+    <div class="dropdown is-hoverable is-fullwidth">
+      <div class="dropdown-trigger">
+        <button class="button is-fullwidth" aria-haspopup="true" aria-controls="dropdown-menu">
+          <span>Select a pre-made prompt</span>
+          <span class="icon is-small">👇</span>
+        </button>
+      </div>
+      <div class="dropdown-menu" id="dropdown-menu" role="menu">
+        <div class="dropdown-content">
+          {#each prompts as prompt}
+            <a class="dropdown-item" href={'#'} on:click|preventDefault={() => inputPrompt(prompt.prompt)}>
+              {prompt.act}
+            </a>
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="columns is-centered">
+  <div class="column is-half has-text-centered">or type below:</div>
+</div>
+{/if}
\ No newline at end of file