From 98be777d9e598cb00d6529296d562b015cdba4a6 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 14:32:21 +0700
Subject: [PATCH 1/5] fix modal dark mode

---
 .../app/(protected)/content/article/page.tsx  | 14 +++--------
 libs/ui-components/src/Button.tsx             |  2 +-
 libs/ui-components/src/Modal.tsx              | 25 +++++++------------
 3 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/page.tsx b/apps/cms/src/app/(protected)/content/article/page.tsx
index ae5b9aa9..99feb9a8 100644
--- a/apps/cms/src/app/(protected)/content/article/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/page.tsx
@@ -63,21 +63,15 @@ export default function DocumentTypeDocumentsPage() {
   const modalActionAudioInput = (
     <div className="flex flex-col sm:flex-row justify-end gap-3">
       {/* Start button to close the audio input modal */}
-      <button
-        className="flex justify-center rounded border border-stroke px-6 py-2 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white sm:w-full sm:text-sm"
-        onClick={resetAudioInput}
-      >
+      <Button onClick={resetAudioInput} style="outline-rounded" className={["text-black dark:text-white"]}>
         Close
-      </button>
+      </Button>
       {/* End button to close the audio input modal */}
 
       {/* Start button to save changes audio input */}
-      <button
-        className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90 sm:w-full sm:text-sm"
-        onClick={submitAudio}
-      >
+      <Button onClick={submitAudio} style="rounded" className={["text-black dark:text-white"]}>
         Save
-      </button>
+      </Button>
       {/* End button to save changes audio input */}
     </div>
   );
diff --git a/libs/ui-components/src/Button.tsx b/libs/ui-components/src/Button.tsx
index af9004cc..0c7e990c 100644
--- a/libs/ui-components/src/Button.tsx
+++ b/libs/ui-components/src/Button.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import React, {useEffect, useState} from "react";
 
 interface ButtonProps {
-  title: string;
+  title?: string;
   onClick?: () => Promise<void> | void;
   style?: "normal" | "plain-text" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
   color?: "primary" | "meta-3" | "black";
diff --git a/libs/ui-components/src/Modal.tsx b/libs/ui-components/src/Modal.tsx
index 7d21e880..270eff3b 100644
--- a/libs/ui-components/src/Modal.tsx
+++ b/libs/ui-components/src/Modal.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import {Button} from "./Button";
 
 interface ModalProps {
   isOpen: boolean;
@@ -40,24 +41,20 @@ export function Modal({
 
       <div className="flex items-center justify-center min-h-screen px-4 text-center">
         {/* Start modal content */}
-        <div className="inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
+        <div className="inline-block bg-white dark:bg-black rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
           {/* Start modal header */}
           <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-            <h3 className="text-xl font-semibold text-gray-900 dark:text-white">{title}</h3>
-            <button
-              type="button"
-              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
-              data-modal-hide="default-modal"
-              onClick={onClose}
-            >
+            <h3 className="text-xl font-semibold text-black dark:text-white">{title}</h3>
+
+            <Button onClick={onClose} style="plain-text" className={["text-black dark:text-white !p-0"]}>
               <span className="i-ic-baseline-close w-[22px] h-[22px]" />
               <span className="sr-only">Close modal</span>
-            </button>
+            </Button>
           </div>
           {/* End modal header */}
 
           {/* Start modal body */}
-          <div className="p-4 md:p-5 space-y-4">{children}</div>
+          <div className="p-4 md:p-5 space-y-4 text-black dark:text-white">{children}</div>
           {/* End modal body */}
 
           {/* Modal footer */}
@@ -65,13 +62,9 @@ export function Modal({
             {actions ? (
               actions
             ) : (
-              <button
-                type="button"
-                className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-                onClick={onClose}
-              >
+              <Button onClick={onClose} style="outline-rounded" className={["text-black dark:text-white"]}>
                 Close
-              </button>
+              </Button>
             )}
           </div>
         </div>

From 3e450d21c9f1178bb6743804b7eae02ae76e4cc3 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 15:01:20 +0700
Subject: [PATCH 2/5] fix dropdown create article dark mode

---
 apps/cms/src/app/(protected)/content/article/page.tsx       | 6 +++---
 .../src/DocumentType/DocumentTypeGenericList.tsx            | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/page.tsx b/apps/cms/src/app/(protected)/content/article/page.tsx
index 99feb9a8..b66e10b0 100644
--- a/apps/cms/src/app/(protected)/content/article/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/page.tsx
@@ -94,7 +94,7 @@ export default function DocumentTypeDocumentsPage() {
                 </Button>
 
                 <div
-                  className={`${isDropdownCreateOpen ? "block" : "hidden"} absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+                  className={`${isDropdownCreateOpen ? "block" : "hidden"} absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-black shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
                   role="menu"
                   aria-orientation="vertical"
                   aria-labelledby="dropdownCreateArticle"
@@ -102,14 +102,14 @@ export default function DocumentTypeDocumentsPage() {
                 >
                   <div className="py-1" role="none">
                     <button
-                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-black hover:bg-opacity-5 w-full text-left"
+                      className="block px-4 py-2 text-sm text-black dark:text-white bg-white dark:bg-black hover:opacity-70 dark:hover:opacity-70 w-full text-left"
                       onClick={addNewArticle}
                     >
                       <span className="i-ic-create mr-2" />
                       {`Add New ${documentType.titleSingular.translated}`}
                     </button>
                     <button
-                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-black hover:bg-opacity-5 w-full text-left"
+                      className="block px-4 py-2 text-sm text-black dark:text-white bg-white dark:bg-black hover:opacity-70 dark:hover:opacity-70 w-full text-left"
                       onClick={() => setIsDialogOpen(true)}
                     >
                       <span className="i-ic-mic mr-2" />
diff --git a/libs/ui-components/src/DocumentType/DocumentTypeGenericList.tsx b/libs/ui-components/src/DocumentType/DocumentTypeGenericList.tsx
index b0de58e1..58e1ca38 100644
--- a/libs/ui-components/src/DocumentType/DocumentTypeGenericList.tsx
+++ b/libs/ui-components/src/DocumentType/DocumentTypeGenericList.tsx
@@ -15,7 +15,9 @@ export function DocumentTypeGenericList({documents, documentType, isLoading}: Ta
       headers={["Title", "Created", "Status"]}
       rows={documents.map((document, key) => [
         <Link key={`${key}-${document.id}-id`} href={`/content/${document.documentType}/${document.id}`}>
-          <p className="font-medium text-black dark:text-white">{document.data[documentType.titleField] as string}</p>
+          <p className="font-medium text-black dark:text-white hover:opacity-70 dark:hover:opacity-70">
+            {document.data[documentType.titleField] as string}
+          </p>
         </Link>,
 
         <p key={`${key}-${document.id}-date`} className="text-black dark:text-white">

From 9575391de3df396925b1ef2e34c8f18c32e76513 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 16:10:30 +0700
Subject: [PATCH 3/5] keep capturing transcript when recording

---
 apps/cms/src/components/VoiceRecorder.tsx     |  4 ++-
 .../src/models/TanamSpeechRecognition.ts      | 27 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/apps/cms/src/components/VoiceRecorder.tsx b/apps/cms/src/components/VoiceRecorder.tsx
index 0cf7917a..46af92a1 100644
--- a/apps/cms/src/components/VoiceRecorder.tsx
+++ b/apps/cms/src/components/VoiceRecorder.tsx
@@ -203,7 +203,9 @@ export default function VoiceRecorder(props: VoiceRecorderProps): JSX.Element {
    * It handles starting, stopping, and restarting the speech recognition process.
    */
   useEffect(() => {
-    const SpeechRecognition = new TanamSpeechRecognition();
+    const SpeechRecognition = new TanamSpeechRecognition({
+      continuous: true,
+    });
 
     if (SpeechRecognition) {
       recognitionRef.current = SpeechRecognition;
diff --git a/libs/domain-frontend/src/models/TanamSpeechRecognition.ts b/libs/domain-frontend/src/models/TanamSpeechRecognition.ts
index db1a6eb3..e77de690 100644
--- a/libs/domain-frontend/src/models/TanamSpeechRecognition.ts
+++ b/libs/domain-frontend/src/models/TanamSpeechRecognition.ts
@@ -83,8 +83,15 @@ export interface SpeechRecognitionAlternative {
   confidence: number;
 }
 
+export interface TanamSpeechRecognitionOptions {
+  lang?: string;
+  interimResults?: boolean;
+  maxAlternatives?: number;
+  continuous?: boolean;
+}
+
 export class TanamSpeechRecognition implements SpeechRecognition {
-  constructor() {
+  constructor(options: TanamSpeechRecognitionOptions = {}) {
     const SpeechRecognitionConstructor = window.SpeechRecognition || window.webkitSpeechRecognition;
 
     if (!SpeechRecognitionConstructor) {
@@ -93,6 +100,16 @@ export class TanamSpeechRecognition implements SpeechRecognition {
 
     this.recognition = new SpeechRecognitionConstructor();
 
+    this.lang = options.lang || "en-US";
+    this.interimResults = options.interimResults ?? false;
+    this.maxAlternatives = options.maxAlternatives ?? 1;
+    this.continuous = options.continuous ?? false;
+
+    this.recognition.lang = this.lang;
+    this.recognition.interimResults = this.interimResults;
+    this.recognition.maxAlternatives = this.maxAlternatives;
+    this.recognition.continuous = this.continuous;
+
     // Bind event handlers
     this.recognition.onstart = this.handleEvent.bind(this, "onstart");
     this.recognition.onend = this.handleEvent.bind(this, "onend");
@@ -107,10 +124,10 @@ export class TanamSpeechRecognition implements SpeechRecognition {
     this.recognition.onnomatch = this.handleEvent.bind(this, "onnomatch");
   }
 
-  public lang = "en-US";
-  public interimResults = false;
-  public maxAlternatives = 1;
-  public continuous = false;
+  public lang: string;
+  public interimResults: boolean;
+  public maxAlternatives: number;
+  public continuous: boolean;
 
   public onaudiostart?: (event: Event) => void;
   public onsoundstart?: (event: Event) => void;

From bae1a608315b18e623a418b0fdc820317d72966e Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 16:51:05 +0700
Subject: [PATCH 4/5] handle recording state

---
 .../app/(protected)/content/article/page.tsx   | 14 +++++++++++++-
 libs/ui-components/src/Modal.tsx               | 18 +++++++++++++-----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/page.tsx b/apps/cms/src/app/(protected)/content/article/page.tsx
index b66e10b0..03287d3e 100644
--- a/apps/cms/src/app/(protected)/content/article/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/page.tsx
@@ -60,7 +60,9 @@ export default function DocumentTypeDocumentsPage() {
    * @constant
    * @type {JSX.Element}
    */
-  const modalActionAudioInput = (
+  const modalActionAudioInput: JSX.Element = isRecording ? (
+    <span className="animate-pulse">Recording...</span>
+  ) : (
     <div className="flex flex-col sm:flex-row justify-end gap-3">
       {/* Start button to close the audio input modal */}
       <Button onClick={resetAudioInput} style="outline-rounded" className={["text-black dark:text-white"]}>
@@ -76,6 +78,15 @@ export default function DocumentTypeDocumentsPage() {
     </div>
   );
 
+  /**
+   * Modal header right.
+   * @constant
+   * @type {JSX.Element}
+   */
+  const headerRight: JSX.Element = (
+    <span className="i-ic-baseline-fiber-manual-record text-red animate-pulse w-[22px] h-[22px]" />
+  );
+
   return (
     <>
       <Suspense fallback={<Loader />}>
@@ -139,6 +150,7 @@ export default function DocumentTypeDocumentsPage() {
                 disableOverlayClose={true}
                 onClose={resetAudioInput}
                 actions={modalActionAudioInput}
+                headerRight={isRecording ? headerRight : null}
                 title={"Tell your story"}
               >
                 {status === ProcessingState.Ready ? (
diff --git a/libs/ui-components/src/Modal.tsx b/libs/ui-components/src/Modal.tsx
index 270eff3b..9b73b47c 100644
--- a/libs/ui-components/src/Modal.tsx
+++ b/libs/ui-components/src/Modal.tsx
@@ -8,6 +8,8 @@ interface ModalProps {
   title: string;
   children: React.ReactNode;
   actions?: React.ReactNode;
+  headerRight?: React.ReactNode;
+  headerLeft?: React.ReactNode;
 }
 
 /**
@@ -21,6 +23,8 @@ export function Modal({
   title,
   children,
   actions,
+  headerRight,
+  headerLeft,
   onClose,
 }: ModalProps): JSX.Element | null {
   // If the modal is not open, don't render anything
@@ -44,12 +48,16 @@ export function Modal({
         <div className="inline-block bg-white dark:bg-black rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
           {/* Start modal header */}
           <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-            <h3 className="text-xl font-semibold text-black dark:text-white">{title}</h3>
+            {headerLeft ? headerLeft : <h3 className="text-xl font-semibold text-black dark:text-white">{title}</h3>}
 
-            <Button onClick={onClose} style="plain-text" className={["text-black dark:text-white !p-0"]}>
-              <span className="i-ic-baseline-close w-[22px] h-[22px]" />
-              <span className="sr-only">Close modal</span>
-            </Button>
+            {headerRight ? (
+              headerRight
+            ) : (
+              <Button onClick={onClose} style="plain-text" className={["text-black dark:text-white !p-0"]}>
+                <span className="i-ic-baseline-close w-[22px] h-[22px]" />
+                <span className="sr-only">Close modal</span>
+              </Button>
+            )}
           </div>
           {/* End modal header */}
 

From 5f41879f5c40c8bb8b4d7a0afbccb950a69187d8 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 16:55:32 +0700
Subject: [PATCH 5/5] peakjs dark mode

---
 apps/cms/src/components/VoiceRecorder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/cms/src/components/VoiceRecorder.tsx b/apps/cms/src/components/VoiceRecorder.tsx
index 46af92a1..085c916d 100644
--- a/apps/cms/src/components/VoiceRecorder.tsx
+++ b/apps/cms/src/components/VoiceRecorder.tsx
@@ -274,7 +274,7 @@ export default function VoiceRecorder(props: VoiceRecorderProps): JSX.Element {
         <div className="text-center">
           <h3 className="text-lg font-medium mb-2">Your Recording:</h3>
           <div className="waveform-container">
-            <div id="overviewContainer" className="w-full h-30"></div>
+            <div id="overviewContainer" className="w-full h-30 bg-white"></div>
           </div>
           <audio controls src={audioUrl} id="audio" className="w-full rounded-md shadow-sm"></audio>
           <button