From 9f5df958233e9e071968ad2b00f715a73f13c820 Mon Sep 17 00:00:00 2001
From: Nicolas Bonamy <nicolas@bonamy.fr>
Date: Thu, 26 Dec 2024 18:44:12 -0400
Subject: [PATCH] dialog refactor

---
 src/components/AlertDialog.vue | 141 ++++++++++++++++++++++-----------
 src/screens/ChatEditor.vue     |  22 +++--
 src/screens/Main.vue           |   5 +-
 3 files changed, 116 insertions(+), 52 deletions(-)

diff --git a/src/components/AlertDialog.vue b/src/components/AlertDialog.vue
index 3a55ecb..5358818 100644
--- a/src/components/AlertDialog.vue
+++ b/src/components/AlertDialog.vue
@@ -1,20 +1,36 @@
 
 <template>
-  <dialog class="alert-dialog swal2-show">
+  <dialog class="alert-dialog show">
     <form method="dialog" @submit.prevent>
       <div class="icon">
         <img src="/assets/icon.png" alt="RAG Logo" />
       </div>
+      <slot name="header"></slot>
       <slot name="body"></slot>
-      <div class="buttons">
-        <slot name="footer"></slot>
-      </div>
+      <slot name="footer"></slot>
     </form>
   </dialog>
 </template>
 
 <script setup lang="ts">
 
+defineExpose({
+  show(id: string) {
+    const dialog =  document.querySelector<HTMLDialogElement>(id)
+    dialog.classList.remove('hide')
+    dialog.classList.add('show')
+    dialog.showModal()
+  },
+  close(id: string) {
+    const dialog =  document.querySelector<HTMLDialogElement>(id)
+    dialog.addEventListener('animationend', () => {
+      dialog.close()
+    }, { once: true })
+    dialog.classList.remove('show')
+    dialog.classList.add('hide')
+  }
+})
+
 </script>
 
 <style scoped>
@@ -22,67 +38,102 @@
 @import '../../css/form.css';
 </style>
 
-<style>
+<style scoped>
 
 .alert-dialog {
   
   width: 260px !important;
 
+  &.show {
+    animation: show 0.3s;
+  }
+
+  &.hide {
+    animation: hide 0.15s forwards;
+  }
+
   form {
+    
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 16px;
-    padding-top: 26px
-  }
+    padding-top: 26px;
+    color: var(--text-color);
 
-  .icon, .icon img {
-    width: 60px;
-    height: 60px;
-    margin-bottom: 1.5rem;
-  }
+    .icon, .icon img {
+      width: 60px;
+      height: 60px;
+      margin-bottom: 1.5rem;
+    }
 
-  form .group {
-    flex-direction: column !important;
-    align-items: flex-start !important;
-    gap: 0.33rem !important;
-    width: 100%;
+    &:deep() .title {
+      font-size: 10pt;
+      line-height: 150%;
+      font-weight: bold;
+      margin-top: 12px;
+    }
+
+    &:deep() .text {
+      font-size: 8.5pt;
+      margin-top: 12px;
+    }
 
-    label {
-      min-width: auto !important;
-      margin-left: 2px;
-      color: var(--text-color);
+    &:deep() .group {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 0.33rem !important;
+      width: 100%;
 
-      &::after {
-        content: '' !important;
+      label {
+        min-width: auto !important;
+        margin-left: 2px;
+
+        &::after {
+          content: '' !important;
+        }
+      }
+
+      input, select {
+        width: 100%;
       }
+
     }
-  }
 
-  input, select {
-    width: 100%;
-  }
+    &:deep().buttons {
+      margin-top: 1rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      width: 100%;
+      gap: 8px;
 
-  .buttons {
-    margin-top: 1rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    width: 100%;
-    gap: 8px;
-
-    button {
-      box-sizing: border-box;
-      width: auto !important;
-      margin: 0px !important;
-      padding: 4px 8px !important;
-      border-radius: .3rem !important;
-      box-shadow: 0px 2px 1.5px -2px rgba(0, 0, 0, .3) !important;
-      font-size: 10pt !important;
-      font-weight: normal !important;
-      flex: 1;
+      button {
+        box-sizing: border-box;
+        width: auto !important;
+        margin: 0px !important;
+        padding: 4px 8px !important;
+        border-radius: .3rem !important;
+        box-shadow: 0px 2px 1.5px -2px rgba(0, 0, 0, .3) !important;
+        font-size: 10pt !important;
+        font-weight: normal !important;
+        flex: 1;
+      }
     }
+
   }
 }
 
+@keyframes show {
+  0% { transform: scale(0.7); }
+  45% { transform: scale(1.05); }
+  80% { transform: scale(0.95); }
+  100% { transform: scale(1); }
+}
+
+@keyframes hide {
+  0% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(0.5); opacity: 0; }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/screens/ChatEditor.vue b/src/screens/ChatEditor.vue
index 6efdc62..77957c0 100644
--- a/src/screens/ChatEditor.vue
+++ b/src/screens/ChatEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <AlertDialog id="chat-editor">
+  <AlertDialog id="chat-editor" ref="dialog">
     <template v-slot:body>
       <div class="group">
         <label>Title</label>
@@ -15,8 +15,10 @@
       </div>
     </template> 
     <template v-slot:footer>
-      <button @click="onCancel" class="alert-neutral" formnovalidate>Cancel</button>
-      <button @click="onSave" class="alert-confirm">{{ confirmButtonText }}</button>
+      <div class="buttons">
+        <button @click="onCancel" class="alert-neutral" formnovalidate>Cancel</button>
+        <button @click="onSave" class="alert-confirm">{{ confirmButtonText }}</button>
+      </div>
     </template>
   </AlertDialog>
 </template>
@@ -34,6 +36,7 @@ import Chat from '../models/chat'
 
 export type ChatEditorCallback = ({title, engine, model}: {title: string, engine: string, model: string}) => void
 
+const dialog = ref(null)
 const title = ref('')
 const engine = ref('')
 const model = ref('')
@@ -60,13 +63,17 @@ onMounted(async () => {
   }, { immediate: true })
 })
 
+const close = () => {
+  dialog.value.close('#chat-editor')
+}
+
 const onChangeEngine = () => {
   const llmFactory = new LlmFactory(store.config)
   model.value = llmFactory.getChatModel(engine.value, false)
 }
 
 const onCancel = () => {
-  document.querySelector<HTMLDialogElement>('#chat-editor').close()
+  close()
 }
 
 const onSave = () => {
@@ -86,9 +93,14 @@ const onSave = () => {
     engine: engine.value,
     model: model.value,
   })
-  onCancel()
+  close()
 }
 
+defineExpose({
+  show: () => dialog.value.show('#chat-editor'),
+  close,
+})
+
 </script>
 
 <style scoped>
diff --git a/src/screens/Main.vue b/src/screens/Main.vue
index c5dd03b..54458d6 100644
--- a/src/screens/Main.vue
+++ b/src/screens/Main.vue
@@ -2,7 +2,7 @@
   <div class="main">
     <Sidebar :chat="assistant.chat" v-if="!isStandaloneChat" ref="sidebar" />
     <ChatArea :chat="assistant.chat" :standalone="isStandaloneChat" />
-    <ChatEditor id="chat-editor" :chat="assistant.chat" :confirm-button-text="chatEditorConfirmButtonText" :on-confirm="chatEditorCallback" />
+    <ChatEditor id="chat-editor" :chat="assistant.chat" :confirm-button-text="chatEditorConfirmButtonText" :on-confirm="chatEditorCallback" ref="chatEditor" />
     <Settings id="settings" />
     <DocRepos />
   </div>
@@ -39,6 +39,7 @@ const tipsManager = useTipsManager(store)
 // assistant
 const assistant = ref(new Assistant(store.config))
 
+const chatEditor: Ref<typeof ChatEditor> = ref(null)
 const sidebar: Ref<typeof Sidebar> = ref(null)
 const prompt = ref(null)
 const engine = ref(null)
@@ -317,7 +318,7 @@ const onForkChat = (message: Message) => {
   }
 
   // show editor
-  document.querySelector<HTMLDialogElement>('#chat-editor').showModal()
+  chatEditor.value.show()
 }
 
 const forkChat = (chat: Chat, message: Message, title: string, engine: string, model: string) => {