Add support for awesome prompts, fixes ChatGPT pre-written prompts #66

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

src/app.scss

@@ -118,3 +118,13 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
   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%;
+  }
+}

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

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}