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;
@@ -632,3 +626,15 @@ aside.menu.main-menu .menu-expanse {
   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,15 +46,16 @@
 
 {#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}">
+      <div class="message-header">
+        <p>{title}</p>
         <button class="delete" aria-label="close" type="button" on:click={doClose}></button>
-    </header>
+      </div>
-    <section class="modal-card-body">
+        <div class="message-body">        
           <div class="field">
             <label class="label" for="text-input">{label}</label>
             <div class="control" class:has-icons-left={icon} class:has-icons-right={error} >
@@ -71,20 +76,31 @@
             <p class="help is-danger">{error}</p>
             {/if}
           </div>
-    </section>
-    <footer class="modal-card-foot">
-      <input type="submit" class="button is-info" value="{saveButton}" />
-      <button class="button" type="button" on:click={doClose} >{closeButton}</button>
-    </footer>
         </div>
-</form>
+        <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>
 </div>
 {/if}
-<!-- 
+
 <svelte:window
   on:keydown={(event) => {
     if (event.key === 'Escape') {
       closeModal()
     }
   }}
-/> -->
+/>