Use message for prompt input modal

src/app.scss

@@ -147,12 +147,6 @@ select option.is-default {
   width: fit-content;
 }
 
-/* Show the edit button on hover of the user message */
-.user-message:hover .editbutton {
-  /* TODO: add when ready: display: block !important; */
-  text-decoration: none !important;
-}
-
 /* Swap the border on user messages to the other side */
 .user-message>.message-body {
   border-width: 0 4px 0 0 !important;
@@ -631,4 +625,16 @@ aside.menu.main-menu .menu-expanse {
 .modal-card .notification {
   margin-left: -.5em;
   margin-right: -.5em;
-}
+}
+
+.message-footer {
+  padding: $message-header-padding;
+}
+
+.modal .message-body {
+  overflow-y: auto;max-height: calc(100vh - 150px);
+}
+
+.modal .modal-content.nomax {
+  max-height: none;
+}

src/lib/Chat.svelte

@@ -476,6 +476,7 @@
       title: 'Enter Name for Chat',
       label: 'Name',
       value: chat.name,
+      class: 'is-info',
       onSubmit: (value) => {
         chat.name = (value || '').trim() || chat.name
         saveChatStore()

src/lib/PromptInput.svelte

@@ -7,7 +7,6 @@
   import { onMount } from 'svelte'
   import { v4 as uuidv4 } from 'uuid'
 
-  // provided by <Modals />
   export let isOpen:boolean
 
   export let title:string
@@ -16,11 +15,16 @@
 
   export let onSubmit:(value:any)=>boolean|void
   export let onClose:(()=>boolean|void) = () => {}
+
   export let saveButton:string = 'Save'
+  export let saveButtonClass:string = 'is-info'
   export let closeButton:string = 'Cancel'
+  export let closeButtonClass:string = ''
   export let placeholder:string = ''
   export let error:string = ''
   export let icon:Fa|null = null
+  let classes = ''
+  export { classes as class }
 
   const id = uuidv4()
 
@@ -42,49 +46,61 @@
 
 {#if isOpen}
 <div class="modal is-active">
-<form action="{'#'}" on:submit|preventDefault={() => { doSubmit(value) }}>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="modal-background" on:click={doClose} />
-  <div class="modal-card">
+  <div class="modal-content nomax">
-    <header class="modal-card-head">
+    <form action="{'#'}" on:submit|preventDefault={() => { doSubmit(value) }}> 
-      <p class="modal-card-title">{title}</p>
+    <article class="message {classes}">
-      <button class="delete" aria-label="close" type="button" on:click={doClose}></button>
+      <div class="message-header">
-    </header>
+        <p>{title}</p>
-    <section class="modal-card-body">
+        <button class="delete" aria-label="close" type="button" on:click={doClose}></button>
-      <div class="field">
-      <label class="label" for="text-input">{label}</label>
-      <div class="control" class:has-icons-left={icon} class:has-icons-right={error} >
-        <input id={id} name="text-input" class="input" class:is-danger={error} type="text" placeholder={placeholder} bind:value={value}>
-        {#if icon}
-        <span class="icon is-small is-left">
-          <Fa icon={icon}/>
-        </span>
-        {/if}
-        {#if error}
-        <span class="icon is-small is-right">
-          <Fa icon={faExclamation}/>
-          <i class="fas fa-exclamation-triangle"></i>
-        </span>
-        {/if}
       </div>
-      {#if error}
+        <div class="message-body">        
-      <p class="help is-danger">{error}</p>
+          <div class="field">
-      {/if}
+            <label class="label" for="text-input">{label}</label>
-    </div>
+            <div class="control" class:has-icons-left={icon} class:has-icons-right={error} >
-    </section>
+              <input id={id} name="text-input" class="input" class:is-danger={error} type="text" placeholder={placeholder} bind:value={value}>
-    <footer class="modal-card-foot">
+              {#if icon}
-      <input type="submit" class="button is-info" value="{saveButton}" />
+              <span class="icon is-small is-left">
-      <button class="button" type="button" on:click={doClose} >{closeButton}</button>
+                <Fa icon={icon}/>
-    </footer>
+              </span>
+              {/if}
+              {#if error}
+              <span class="icon is-small is-right">
+                <Fa icon={faExclamation}/>
+                <i class="fas fa-exclamation-triangle"></i>
+              </span>
+              {/if}
+            </div>
+            {#if error}
+            <p class="help is-danger">{error}</p>
+            {/if}
+          </div>
+        </div>
+        <div class="message-footer">
+          <div class="level is-mobile">
+            <div class="level-right">
+            </div>
+            <div class="level-right">
+              <div class="level-item">
+                <input type="submit" class="button {saveButtonClass}" value="{saveButton}" />
+              </div>
+              <div class="level-item">      
+                <button class="button {closeButtonClass}" type="button" on:click={doClose} >{closeButton}</button>
+              </div>
+            </div>
+          </div>
+        </div>     
+      </article>
+    </form>  
   </div>
-</form>
 </div>
 {/if}
-<!-- 
+
 <svelte:window
   on:keydown={(event) => {
     if (event.key === 'Escape') {
       closeModal()
     }
   }}
-/> -->
+/>