Add more changes

app/javascript/dashboard/components/widgets/AIAssistanceButton.vue

@@ -80,13 +80,19 @@
       :show.sync="showAIAssistanceModal"
       :on-close="hideAIAssistanceModal"
     >
-      <AIAssistanceModal @close="hideAIAssistanceModal" />
+      <AIAssistanceModal
+        @apply-text="insertText"
+        @close="hideAIAssistanceModal"
+      />
     </woot-modal>
     <woot-modal
       :show.sync="showAIAssistanceReply"
       :on-close="hideAIAssistanceReplyModal"
     >
-      <AIAssistanceReply @close="hideAIAssistanceReplyModal" />
+      <AIAssistanceReply
+        @apply-text="insertText"
+        @close="hideAIAssistanceReplyModal"
+      />
     </woot-modal>
   </div>
 </template>
@@ -184,8 +190,8 @@ export default {
       ninja.open({ parent: 'ai_assist' });
     },
     onAIAssist() {
-      this.showAIAssistanceModal = true;
+      // this.showAIAssistanceModal = true;
-      // this.showAIAssistanceReply = true;
+      this.showAIAssistanceReply = true;
     },
     toggleDropdown() {
       this.showDropdown = !this.showDropdown;
@@ -202,6 +208,11 @@ export default {
         });
       }
     },
+    insertText(message) {
+      console.log('message', message);
+
+      this.$emit('replace-text', message);
+    },
     async processEvent(type = 'rephrase') {
       this.uiFlags[type] = true;
       try {

app/javascript/dashboard/components/widgets/AIAssistanceModal.vue

@@ -16,22 +16,15 @@
           AI generated content
         </h4>
       </div>
-      <!-- <TypingIndicator /> -->
+      <div class="animation-container margin-top-1">
-      <div class="animation-container">
+        <div class="ai-typing--wrap ">
-        <label>AI is typing</label> <span class="loader" />
+          <fluent-icon icon="wand" size="14" class="ai-typing--icon" />
+          <label>AI is writing</label>
+        </div>
+        <span class="loader" />
+        <span class="loader" />
+        <span class="loader" />
       </div>
-      <!-- <div class="loading loading04">
-        <label>AI is typing</label>
-        <span>.</span>
-        <span>.</span>
-        <span>.</span>
-      </div> -->
-
-      <!-- <div v-else>
-        <p>
-          {{ aiContent }}
-        </p>
-      </div> -->
 
       <div class="modal-footer justify-content-end w-full">
         <!-- <woot-button
@@ -61,12 +54,7 @@
 </template>
 
 <script>
-import TypingIndicator from './TypingIndicator.vue';
-
 export default {
-  components: {
-    TypingIndicator,
-  },
   data() {
     return {
       draftContent:
@@ -109,71 +97,56 @@ export default {
   width: 100%;
 }
 
-.animation-container {
+.ai-typing--wrap {
-  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  gap: 4px;
-  label {
+
-    width: 8rem;
+  .ai-typing--icon {
+    color: var(--v-500);
   }
 }
-.loader {
+
-  width: 8px;
+.animation-container {
-  height: 8px;
-  border-radius: 50%;
-  display: block;
   position: relative;
-  color: #000;
+  display: flex;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite;
 }
 
-@keyframes animloader {
+.animation-container label {
-  0% {
-    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
-  }
-  25% {
-    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
-  }
-  50% {
-    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
-  }
-  75% {
-    box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
-  }
-  100% {
-    box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
-  }
-}
-
-.loading {
-  font-weight: 800;
-  text-align: center;
-  border-radius: 50%;
-  span {
   display: inline-block;
-    margin: 0 -0.05em;
+  margin-right: 8px;
-  }
+  color: var(--v-400);
 }
 
-.loading04 {
+.loader {
-  span {
+  display: inline-block;
-    animation: loading04 0.7s infinite;
+  width: 6px;
-    @for $i from 1 through 6 {
+  height: 6px;
-      &:nth-child(#{$i + 1}) {
+  margin-right: 4px;
-        animation-delay: #{$i * 0.1}s;
+  margin-top: 12px;
-      }
+  background-color: var(--v-300);
-    }
+  border-radius: 50%;
-  }
+  animation: bubble-scale 1.2s infinite;
 }
-@keyframes loading04 {
+
+.loader:nth-child(2) {
+  animation-delay: 0.4s;
+}
+
+.loader:nth-child(3) {
+  animation-delay: 0.8s;
+}
+
+@keyframes bubble-scale {
   0%,
   100% {
-    transform: translateY(0);
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.3);
   }
   50% {
-    transform: translateY(15px);
+    transform: scale(1);
   }
 }
 </style>

app/javascript/dashboard/components/widgets/AIAssistanceReply.vue

@@ -2,7 +2,13 @@
   <div class="column">
     <woot-modal-header header-title="Reply suggestion with AI" />
     <form class="row modal-content" @submit.prevent="chooseTime">
-      <div v-if="!generatedContent" class="animation-container">
+      <div v-if="!generatedContent" class="animation-container margin-top-1">
+        <div class="ai-typing--wrap ">
+          <fluent-icon icon="wand" size="14" class="ai-typing--icon" />
+          <label>AI is writing</label>
+        </div>
+        <span class="loader" />
+        <span class="loader" />
         <span class="loader" />
       </div>
 
@@ -31,7 +37,7 @@
           :disabled="!enableButtons"
           >Retry
         </woot-button> -->
-        <woot-button :disabled="!enableButtons">
+        <woot-button :disabled="!enableButtons" @click="applyContent">
           Apply
         </woot-button>
       </div>
@@ -70,6 +76,10 @@ export default {
       this.$emit('close');
     },
     chooseTime() {},
+    applyContent() {
+      this.$emit('apply-text', this.generatedContent);
+      this.$emit('close');
+    },
   },
 };
 </script>
@@ -83,39 +93,56 @@ export default {
   width: 100%;
 }
 
-.animation-container {
+.ai-typing--wrap {
-  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 4px;
-}
+
-.loader {
+  .ai-typing--icon {
-  width: 12px;
+    color: var(--v-500);
-  height: 12px;
+  }
-  border-radius: 50%;
-  display: block;
-  margin-top: 2rem;
-  position: relative;
-  color: #000;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite;
 }
 
-@keyframes animloader {
+.animation-container {
-  0% {
+  position: relative;
-    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
+  display: flex;
+}
+
+.animation-container label {
+  display: inline-block;
+  margin-right: 8px;
+  color: var(--v-400);
+}
+
+.loader {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 4px;
+  margin-top: 12px;
+  background-color: var(--v-300);
+  border-radius: 50%;
+  animation: bubble-scale 1.2s infinite;
+}
+
+.loader:nth-child(2) {
+  animation-delay: 0.4s;
+}
+
+.loader:nth-child(3) {
+  animation-delay: 0.8s;
+}
+
+@keyframes bubble-scale {
+  0%,
+  100% {
+    transform: scale(1);
   }
   25% {
-    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
+    transform: scale(1.3);
   }
   50% {
-    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
+    transform: scale(1);
-  }
-  75% {
-    box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
-  }
-  100% {
-    box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
   }
 }