From b752595554977ce48e0591a68c2905d603c6f72f Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 9 Nov 2023 21:43:12 +0700
Subject: [PATCH] Add loader buble chat

---
 uikit/src/button/styles.scss                  |   2 +-
 .../BasicPromptAccessories/index.tsx          |  26 ----
 web/components/BasicPromptInput/index.tsx     |  95 ------------
 .../ConfirmDeleteConversationModal/index.tsx  |  99 -------------
 web/components/ConfirmationModal/index.tsx    |  93 ------------
 web/components/HistoryItem/index.tsx          | 101 -------------
 web/components/HistoryList/index.tsx          |  54 -------
 web/components/InputToolbar/index.tsx         | 112 ---------------
 web/components/LoadingIndicator.tsx           |  13 --
 web/components/MainHeader/index.tsx           |  35 -----
 web/components/ModalNoActiveModel/index.tsx   |  75 ----------
 web/components/SendButton/index.tsx           |  24 ----
 web/components/SidebarEmptyHistory/index.tsx  |  63 --------
 .../SwitchingModelConfirmationModal/index.tsx | 135 ------------------
 web/components/TextAreaWithTitle/index.tsx    |  46 ------
 web/containers/Layout/BottomBar/index.tsx     |   3 +-
 web/containers/Loader/Bubble.tsx              |   9 ++
 .../ProgressBar/index.tsx                     |   0
 web/containers/Providers/index.tsx            |   4 +-
 web/helpers/atoms/Modal.atom.ts               |   5 -
 web/models/ChatMessage.ts                     |   3 +-
 web/package.json                              |   1 +
 web/screens/Chat/ChatItem/index.tsx           |   1 +
 web/screens/Chat/HistoryList/index.tsx        |   6 +-
 web/screens/Chat/SimpleTextMessage/index.tsx  |  48 ++++---
 web/screens/Chat/index.tsx                    |  18 +--
 .../ExploreModels/ExploreModelList/index.tsx  |   4 +-
 web/styles/components/code-block.scss         |   2 -
 web/styles/components/loader.scss             |  64 +++++++++
 web/styles/components/message.scss            |  34 +++++
 30 files changed, 154 insertions(+), 1021 deletions(-)
 delete mode 100644 web/components/BasicPromptAccessories/index.tsx
 delete mode 100644 web/components/BasicPromptInput/index.tsx
 delete mode 100644 web/components/ConfirmDeleteConversationModal/index.tsx
 delete mode 100644 web/components/ConfirmationModal/index.tsx
 delete mode 100644 web/components/HistoryItem/index.tsx
 delete mode 100644 web/components/HistoryList/index.tsx
 delete mode 100644 web/components/InputToolbar/index.tsx
 delete mode 100644 web/components/LoadingIndicator.tsx
 delete mode 100644 web/components/MainHeader/index.tsx
 delete mode 100644 web/components/ModalNoActiveModel/index.tsx
 delete mode 100644 web/components/SendButton/index.tsx
 delete mode 100644 web/components/SidebarEmptyHistory/index.tsx
 delete mode 100644 web/components/SwitchingModelConfirmationModal/index.tsx
 delete mode 100644 web/components/TextAreaWithTitle/index.tsx
 create mode 100644 web/containers/Loader/Bubble.tsx
 rename web/{components => containers}/ProgressBar/index.tsx (100%)

diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
index 17df7381f..69d8e522e 100644
--- a/uikit/src/button/styles.scss
+++ b/uikit/src/button/styles.scss
@@ -12,7 +12,7 @@
   }
 
   &-outline {
-    @apply border-input hover:bg-primary hover:text-primary-foreground border bg-transparent;
+    @apply border-input border bg-transparent;
   }
 
   &-secondary {
diff --git a/web/components/BasicPromptAccessories/index.tsx b/web/components/BasicPromptAccessories/index.tsx
deleted file mode 100644
index 2f082ef44..000000000
--- a/web/components/BasicPromptAccessories/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import SendButton from '../SendButton'
-
-const BasicPromptAccessories: React.FC = () => {
-  return (
-    <div className="absolute inset-x-0 bottom-0 flex justify-between p-3">
-      {/* Add future accessories here, e.g upload a file */}
-      <div className="flex items-center space-x-5">
-        <div className="flex items-center">
-          {/* <button
-            type="button"
-            className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
-          >
-            <InformationCircleIcon className="h-5 w-5" aria-hidden="true" />
-          </button> */}
-        </div>
-      </div>
-      <div className="flex-shrink-0">
-        <SendButton />
-      </div>
-    </div>
-  )
-}
-
-export default BasicPromptAccessories
diff --git a/web/components/BasicPromptInput/index.tsx b/web/components/BasicPromptInput/index.tsx
deleted file mode 100644
index df03e45d1..000000000
--- a/web/components/BasicPromptInput/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-import { ChangeEvent, useEffect, useRef } from 'react'
-
-import { useAtom, useAtomValue } from 'jotai'
-
-import { currentPromptAtom } from '@/containers/Providers/Jotai'
-
-import { useCreateConversation } from '@/hooks/useCreateConversation'
-
-import useSendChatMessage from '@/hooks/useSendChatMessage'
-
-import { getActiveConvoIdAtom } from '@/helpers/atoms/Conversation.atom'
-import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
-
-const BasicPromptInput: React.FC = () => {
-  const activeConversationId = useAtomValue(getActiveConvoIdAtom)
-  const selectedModel = useAtomValue(selectedModelAtom)
-  const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
-  const { sendChatMessage } = useSendChatMessage()
-  const { requestCreateConvo } = useCreateConversation()
-
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
-
-  const handleKeyDown = async (
-    event: React.KeyboardEvent<HTMLTextAreaElement>
-  ) => {
-    if (event.key === 'Enter') {
-      if (!event.shiftKey) {
-        if (activeConversationId) {
-          event.preventDefault()
-          sendChatMessage()
-        } else {
-          if (!selectedModel) {
-            console.log('No model selected')
-            return
-          }
-          await requestCreateConvo(selectedModel)
-          sendChatMessage()
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    adjustTextareaHeight()
-  }, [currentPrompt])
-
-  const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setCurrentPrompt(event.target.value)
-  }
-
-  // Auto adjust textarea height based on content
-  const MAX_ROWS = 30
-
-  const adjustTextareaHeight = () => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto' // 1 row
-      const scrollHeight = textareaRef.current.scrollHeight
-      const maxScrollHeight =
-        parseInt(window.getComputedStyle(textareaRef.current).lineHeight, 10) *
-        MAX_ROWS
-      textareaRef.current.style.height = `${Math.min(
-        scrollHeight,
-        maxScrollHeight
-      )}px`
-    }
-  }
-
-  return (
-    <div className=" rounded-lg border border-border shadow-sm">
-      <textarea
-        ref={textareaRef}
-        onKeyDown={handleKeyDown}
-        value={currentPrompt}
-        onChange={handleMessageChange}
-        name="comment"
-        id="comment"
-        className="text-background-reverse block w-full resize-none border-0 bg-transparent py-1.5 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
-        placeholder="Message ..."
-        rows={1}
-        style={{ overflow: 'auto' }}
-      />
-      {/* Spacer element to match the height of the toolbar */}
-      <div className="py-2" aria-hidden="true">
-        {/* Matches height of button in toolbar (1px border + 36px content height) */}
-        <div className="py-px">
-          <div className="h-9" />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default BasicPromptInput
diff --git a/web/components/ConfirmDeleteConversationModal/index.tsx b/web/components/ConfirmDeleteConversationModal/index.tsx
deleted file mode 100644
index b33a95906..000000000
--- a/web/components/ConfirmDeleteConversationModal/index.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { Fragment, useRef } from 'react'
-
-import { Dialog, Transition } from '@headlessui/react'
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
-
-import { useAtom } from 'jotai'
-
-import useDeleteConversation from '@/hooks/useDeleteConversation'
-
-import { showConfirmDeleteConversationModalAtom } from '@/helpers/atoms/Modal.atom'
-
-const ConfirmDeleteConversationModal: React.FC = () => {
-  const [show, setShow] = useAtom(showConfirmDeleteConversationModalAtom)
-  const cancelButtonRef = useRef(null)
-  const { deleteConvo } = useDeleteConversation()
-
-  const onConfirmDelete = () => {
-    deleteConvo().then(() => setShow(false))
-  }
-
-  return (
-    <Transition.Root show={show} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        initialFocus={cancelButtonRef}
-        onClose={setShow}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 z-40 h-full bg-gray-950/90 transition-opacity dark:backdrop-blur-sm" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-border bg-background/90 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <ExclamationTriangleIcon
-                      className="h-6 w-6 text-red-600"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <Dialog.Title as="h3" className="font-semibold leading-6">
-                      Delete Conversation
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-muted-foreground">
-                        Are you sure you want to delete this conversation? All
-                        of messages will be permanently removed. This action
-                        cannot be undone.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                  <button
-                    type="button"
-                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                    onClick={() => onConfirmDelete()}
-                  >
-                    Delete
-                  </button>
-                  <button
-                    type="button"
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                    onClick={() => setShow(false)}
-                    ref={cancelButtonRef}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}
-
-export default ConfirmDeleteConversationModal
diff --git a/web/components/ConfirmationModal/index.tsx b/web/components/ConfirmationModal/index.tsx
deleted file mode 100644
index ffd88765e..000000000
--- a/web/components/ConfirmationModal/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { Fragment } from 'react'
-
-import { Dialog, Transition } from '@headlessui/react'
-import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline'
-import { PrimitiveAtom, useAtom } from 'jotai'
-
-interface Props {
-  atom: PrimitiveAtom<boolean>
-  title: string
-  description: string
-  onConfirm: () => void
-}
-
-const ConfirmationModal: React.FC<Props> = ({
-  atom,
-  title,
-  description,
-  onConfirm,
-}) => {
-  const [show, setShow] = useAtom(atom)
-
-  return (
-    <Transition.Root show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={setShow}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <QuestionMarkCircleIcon
-                      className="h-6 w-6 text-green-600"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-base font-semibold leading-6 text-gray-900"
-                    >
-                      {title}
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-gray-500">{description}</p>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                  <button
-                    type="button"
-                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                    onClick={onConfirm}
-                  >
-                    OK
-                  </button>
-                  <button
-                    type="button"
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                    onClick={() => setShow(false)}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}
-
-export default React.memo(ConfirmationModal)
diff --git a/web/components/HistoryItem/index.tsx b/web/components/HistoryItem/index.tsx
deleted file mode 100644
index 1de795dc8..000000000
--- a/web/components/HistoryItem/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Model } from '@janhq/core/lib/types'
-import { useAtomValue, useSetAtom } from 'jotai'
-
-import { twMerge } from 'tailwind-merge'
-
-import { MainViewState } from '@/constants/screens'
-
-import { useActiveModel } from '@/hooks/useActiveModel'
-
-import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
-import { useMainViewState } from '@/hooks/useMainViewState'
-
-import { displayDate } from '@/utils/datetime'
-
-import {
-  getActiveConvoIdAtom,
-  setActiveConvoIdAtom,
-} from '@/helpers/atoms/Conversation.atom'
-
-import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
-
-type Props = {
-  conversation: Conversation
-  name: string
-  summary?: string
-  updatedAt?: string
-}
-
-const HistoryItem: React.FC<Props> = ({
-  conversation,
-  name,
-  summary,
-  updatedAt,
-}) => {
-  const activeConvoId = useAtomValue(getActiveConvoIdAtom)
-  const isSelected = activeConvoId === conversation._id
-  const activeModel = useAtomValue(activeAssistantModelAtom)
-  const { startModel } = useActiveModel()
-  const { setMainViewState } = useMainViewState()
-  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
-  const { downloadedModels } = useGetDownloadedModels()
-
-  const onClick = async () => {
-    if (conversation.modelId == null) {
-      console.debug('modelId is undefined')
-      return
-    }
-
-    const model = downloadedModels.find(
-      (e: Model) => e._id === conversation.modelId
-    )
-    if (model != null) {
-      if (activeModel == null) {
-        // if there's no active model, we simply load conversation's model
-        startModel(model._id)
-      } else if (activeModel._id !== model._id) {
-        // display confirmation modal
-        // TODO: temporarily disabled
-        // setConfirmationModalProps({
-        //   replacingModel: model,
-        // })
-      }
-    }
-
-    if (activeConvoId !== conversation._id) {
-      setMainViewState(MainViewState.Chat)
-      setActiveConvoId(conversation._id)
-    }
-  }
-
-  const backgroundColor = isSelected ? 'bg-background/80' : 'bg-background/20'
-  const description = conversation?.lastMessage ?? 'No new message'
-
-  return (
-    <li
-      role="button"
-      className={twMerge(
-        'flex flex-row rounded-md border border-border p-3',
-        backgroundColor
-      )}
-      onClick={onClick}
-    >
-      <div className="flex flex-1 flex-col">
-        {/* title */}
-
-        <span className="mb-1 line-clamp-1 leading-5 text-muted-foreground">
-          {updatedAt && displayDate(new Date(updatedAt).getTime())}
-        </span>
-
-        <span className="line-clamp-1">{summary ?? name}</span>
-
-        {/* description */}
-        <span className="mt-1 line-clamp-2 text-muted-foreground">
-          {description}
-        </span>
-      </div>
-    </li>
-  )
-}
-
-export default HistoryItem
diff --git a/web/components/HistoryList/index.tsx b/web/components/HistoryList/index.tsx
deleted file mode 100644
index 6eceddd3f..000000000
--- a/web/components/HistoryList/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useEffect } from 'react'
-
-import { useAtomValue } from 'jotai'
-
-import { twMerge } from 'tailwind-merge'
-
-import { searchAtom } from '@/containers/Providers/Jotai'
-
-import useGetUserConversations from '@/hooks/useGetUserConversations'
-
-import HistoryItem from '../HistoryItem'
-
-import SidebarEmptyHistory from '../SidebarEmptyHistory'
-
-import { userConversationsAtom } from '@/helpers/atoms/Conversation.atom'
-
-const HistoryList: React.FC = () => {
-  const conversations = useAtomValue(userConversationsAtom)
-  const searchText = useAtomValue(searchAtom)
-  const { getUserConversations } = useGetUserConversations()
-
-  useEffect(() => {
-    getUserConversations()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return (
-    <div className="flex flex-grow flex-col gap-2 px-4 pb-4">
-      {conversations.length > 0 ? (
-        <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
-          {conversations
-            .filter(
-              (e) =>
-                searchText.trim() === '' ||
-                e.name?.toLowerCase().includes(searchText.toLowerCase().trim())
-            )
-            .map((convo, i) => (
-              <HistoryItem
-                key={i}
-                conversation={convo}
-                summary={convo.summary}
-                name={convo.name || 'Jan'}
-                updatedAt={convo.updatedAt ?? ''}
-              />
-            ))}
-        </ul>
-      ) : (
-        <SidebarEmptyHistory />
-      )}
-    </div>
-  )
-}
-
-export default HistoryList
diff --git a/web/components/InputToolbar/index.tsx b/web/components/InputToolbar/index.tsx
deleted file mode 100644
index 6e823e2e1..000000000
--- a/web/components/InputToolbar/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-'use client'
-
-import { useAtomValue } from 'jotai'
-
-// import { useCreateConversation } from '@/hooks/useCreateConversation'
-
-import { useActiveModel } from '@/hooks/useActiveModel'
-import useGetInputState from '@/hooks/useGetInputState'
-
-import BasicPromptAccessories from '../BasicPromptAccessories'
-import BasicPromptInput from '../BasicPromptInput'
-
-import {
-  currentConvoStateAtom,
-  getActiveConvoIdAtom,
-} from '@/helpers/atoms/Conversation.atom'
-
-import { userConversationsAtom } from '@/helpers/atoms/Conversation.atom'
-// import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
-// import {
-//   activeAssistantModelAtom,
-//   stateModel,
-// } from '@/helpers/atoms/Model.atom'
-
-const InputToolbar: React.FC = () => {
-  // const activeModel = useAtomValue(activeAssistantModelAtom)
-  const currentConvoState = useAtomValue(currentConvoStateAtom)
-  const { inputState, currentConvo } = useGetInputState()
-  // const { requestCreateConvo } = useCreateConversation()
-  const { startModel } = useActiveModel()
-  // const { loading } = useAtomValue(stateModel)
-  const conversations = useAtomValue(userConversationsAtom)
-  const activeConvoId = useAtomValue(getActiveConvoIdAtom)
-  // const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
-
-  // const onNewConversationClick = () => {
-  //   if (activeModel) {
-  //     requestCreateConvo(activeModel)
-  //   } else {
-  //     setShowModalNoActiveModel(true)
-  //   }
-  // }
-
-  const onStartModelClick = () => {
-    const modelId = currentConvo?.modelId
-    if (!modelId) return
-    startModel(modelId)
-  }
-
-  if (!activeConvoId) {
-    return null
-  }
-  if (
-    (activeConvoId && inputState === 'model-mismatch') ||
-    inputState === 'loading'
-  ) {
-    // const message = inputState === 'loading' ? 'Loading..' : 'Model mismatch!'
-    return (
-      <div className="sticky bottom-0 flex items-center justify-center bg-background/90">
-        <div className="my-2">
-          {/* <p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center italic text-gray-600">
-            {message}
-          </p> */}
-          <button onClick={onStartModelClick}>
-            `Start model ${currentConvo?.modelId}`
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  if (inputState === 'model-not-found') {
-    return (
-      <div className="sticky bottom-0 flex items-center justify-center bg-background/90">
-        <p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center italic text-gray-600">
-          Model {currentConvo?.modelId} not found! Please re-download the model
-          first.
-        </p>
-      </div>
-    )
-  }
-
-  if (conversations.length > 0)
-    return (
-      <div className="sticky bottom-0 w-full bg-background/90 px-5 pb-0 pt-2">
-        {currentConvoState?.error && (
-          <div className="flex flex-row justify-center">
-            <span className="mx-5 my-2 text-sm text-red-500">
-              {currentConvoState?.error?.toString()}
-            </span>
-          </div>
-        )}
-        {/* <div className="my-3 flex justify-center gap-2">
-          <SecondaryButton
-            onClick={onNewConversationClick}
-            title="New Conversation"
-            icon={<PlusIcon width={16} height={16} />}
-          />
-        </div> */}
-        {/* My text input */}
-        <div className="mb-5 flex items-start space-x-4">
-          <div className="relative min-w-0 flex-1">
-            <BasicPromptInput />
-            <BasicPromptAccessories />
-          </div>
-        </div>
-      </div>
-    )
-}
-
-export default InputToolbar
diff --git a/web/components/LoadingIndicator.tsx b/web/components/LoadingIndicator.tsx
deleted file mode 100644
index 0fcf75cb2..000000000
--- a/web/components/LoadingIndicator.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-const LoadingIndicator = () => {
-  return (
-    <div className="typingIndicatorContainer">
-      <div className="typingIndicatorBubble">
-        <div className="typingIndicatorBubbleDot"></div>
-        <div className="typingIndicatorBubbleDot"></div>
-        <div className="typingIndicatorBubbleDot"></div>
-      </div>
-    </div>
-  )
-}
-
-export default LoadingIndicator
diff --git a/web/components/MainHeader/index.tsx b/web/components/MainHeader/index.tsx
deleted file mode 100644
index 3ae8937f9..000000000
--- a/web/components/MainHeader/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useAtomValue, useSetAtom } from 'jotai'
-
-import { Trash2 } from 'lucide-react'
-
-import { currentConversationAtom } from '@/helpers/atoms/Conversation.atom'
-import { showConfirmDeleteConversationModalAtom } from '@/helpers/atoms/Modal.atom'
-
-const MainHeader: React.FC = () => {
-  const setShowConfirmDeleteConversationModal = useSetAtom(
-    showConfirmDeleteConversationModalAtom
-  )
-  const activeConversation = useAtomValue(currentConversationAtom)
-
-  const currentConvo = useAtomValue(currentConversationAtom)
-  const title = currentConvo?.name ?? ''
-
-  if (!activeConversation) return null
-
-  return (
-    <div className="sticky top-0 border-b border-border bg-background/90 px-4 py-2">
-      <span className="font-semibold text-muted-foreground">{title}</span>
-
-      {/* right most */}
-      <div className="absolute right-4 top-2">
-        <Trash2
-          role="button"
-          size={16}
-          onClick={() => setShowConfirmDeleteConversationModal(true)}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default MainHeader
diff --git a/web/components/ModalNoActiveModel/index.tsx b/web/components/ModalNoActiveModel/index.tsx
deleted file mode 100644
index c78910083..000000000
--- a/web/components/ModalNoActiveModel/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { Fragment } from 'react'
-
-import { Dialog, Transition } from '@headlessui/react'
-import { useAtom } from 'jotai'
-
-import { MainViewState } from '@/constants/screens'
-
-import { useMainViewState } from '@/hooks/useMainViewState'
-
-import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
-
-const ModalNoActiveModel: React.FC = () => {
-  const [show, setShow] = useAtom(showingModalNoActiveModel)
-  const { setMainViewState } = useMainViewState()
-
-  return (
-    <Transition.Root show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={setShow}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 z-40 h-full bg-gray-950/90 transition-opacity dark:backdrop-blur-sm" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-border bg-background/90 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                <h1 className="font-base mb-4 font-bold">
-                  You don’t have any actively running models. Please start a
-                  downloaded model in My Models page to use this feature.
-                </h1>
-                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                  <button
-                    type="button"
-                    className="inline-flex w-full justify-center rounded-md bg-accent px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-accent/80 sm:ml-3 sm:w-auto"
-                    onClick={() => {
-                      setMainViewState(MainViewState.MyModels)
-                      setShow(false)
-                    }}
-                  >
-                    Ok
-                  </button>
-                  <button
-                    type="button"
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                    onClick={() => setShow(false)}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}
-
-export default React.memo(ModalNoActiveModel)
diff --git a/web/components/SendButton/index.tsx b/web/components/SendButton/index.tsx
deleted file mode 100644
index 0a21b351f..000000000
--- a/web/components/SendButton/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useAtom, useAtomValue } from 'jotai'
-
-import { currentPromptAtom } from '@/containers/Providers/Jotai'
-
-import useSendChatMessage from '@/hooks/useSendChatMessage'
-
-import { currentConvoStateAtom } from '@/helpers/atoms/Conversation.atom'
-
-const SendButton: React.FC = () => {
-  const [currentPrompt] = useAtom(currentPromptAtom)
-  const currentConvoState = useAtomValue(currentConvoStateAtom)
-
-  const { sendChatMessage } = useSendChatMessage()
-  const isWaitingForResponse = currentConvoState?.waitingForResponse ?? false
-  const disabled = currentPrompt.trim().length === 0 || isWaitingForResponse
-
-  return (
-    <button onClick={sendChatMessage} disabled={disabled} type="submit">
-      Send
-    </button>
-  )
-}
-
-export default SendButton
diff --git a/web/components/SidebarEmptyHistory/index.tsx b/web/components/SidebarEmptyHistory/index.tsx
deleted file mode 100644
index 4363823b3..000000000
--- a/web/components/SidebarEmptyHistory/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { useAtomValue, useSetAtom } from 'jotai'
-
-import { MessageCircle } from 'lucide-react'
-
-import { MainViewState } from '@/constants/screens'
-
-import { useCreateConversation } from '@/hooks/useCreateConversation'
-import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
-import { useMainViewState } from '@/hooks/useMainViewState'
-
-import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
-import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
-
-enum ActionButton {
-  DownloadModel = 'Download a Model',
-  StartChat = 'Start a Conversation',
-}
-
-const SidebarEmptyHistory: React.FC = () => {
-  const { downloadedModels } = useGetDownloadedModels()
-  const { setMainViewState } = useMainViewState()
-  const { requestCreateConvo } = useCreateConversation()
-  const [action, setAction] = useState(ActionButton.DownloadModel)
-  const modalNoActiveModel = useSetAtom(showingModalNoActiveModel)
-
-  useEffect(() => {
-    if (downloadedModels.length > 0) {
-      setAction(ActionButton.StartChat)
-    } else {
-      setAction(ActionButton.DownloadModel)
-    }
-  }, [downloadedModels])
-
-  const activeModel = useAtomValue(activeAssistantModelAtom)
-  const onClick = async () => {
-    if (action === ActionButton.DownloadModel) {
-      setMainViewState(MainViewState.ExploreModels)
-    } else {
-      if (!activeModel) {
-        modalNoActiveModel(true)
-      } else {
-        await requestCreateConvo(activeModel)
-      }
-    }
-  }
-
-  return (
-    <div className="flex flex-col items-center gap-3 py-10">
-      <MessageCircle size={24} />
-      <div className="flex flex-col items-center">
-        <h6 className="text-center text-base">No Chat History</h6>
-        <p className="mb-6 mt-1 text-center text-muted-foreground">
-          Get started by creating a new chat.
-        </p>
-        <button onClick={onClick}>{action}</button>
-      </div>
-    </div>
-  )
-}
-
-export default SidebarEmptyHistory
diff --git a/web/components/SwitchingModelConfirmationModal/index.tsx b/web/components/SwitchingModelConfirmationModal/index.tsx
deleted file mode 100644
index 0658c2a20..000000000
--- a/web/components/SwitchingModelConfirmationModal/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { Fragment } from 'react'
-
-import { Dialog, Transition } from '@headlessui/react'
-import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline'
-
-import { Model } from '@janhq/core/lib/types'
-import { useAtom, useAtomValue } from 'jotai'
-
-import { useActiveModel } from '@/hooks/useActiveModel'
-
-import { switchingModelConfirmationModalPropsAtom } from '@/helpers/atoms/Modal.atom'
-
-import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
-
-export type SwitchingModelConfirmationModalProps = {
-  replacingModel: Model
-}
-
-const SwitchingModelConfirmationModal: React.FC = () => {
-  const [props, setProps] = useAtom(switchingModelConfirmationModalPropsAtom)
-  const activeModel = useAtomValue(activeAssistantModelAtom)
-  const { startModel } = useActiveModel()
-
-  const onConfirmSwitchModelClick = () => {
-    const modelId = props?.replacingModel._id
-    if (modelId) {
-      startModel(modelId)
-    }
-    setProps(undefined)
-  }
-
-  return (
-    <Transition.Root show={props != null} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={() => setProps(undefined)}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                    onClick={() => setProps(undefined)}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <ExclamationTriangleIcon
-                      className="h-6 w-6 text-red-600"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-base font-semibold leading-6 text-gray-900"
-                    >
-                      Switching model
-                    </Dialog.Title>
-                    <div className="mt-2 flex flex-col">
-                      <p className="text-sm text-gray-500">
-                        Selected conversation is using model{' '}
-                        <span className="font-semibold text-black">
-                          {props?.replacingModel.name}
-                        </span>
-                        , but the active model is using{' '}
-                        <span className="font-semibold text-black">
-                          {activeModel?.name}
-                        </span>
-                        .
-                      </p>
-                      <br />
-                      <p className="text-sm text-gray-500">
-                        Switch to
-                        <span className="font-semibold text-black">
-                          {' '}
-                          {props?.replacingModel.name}?
-                        </span>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                  <button
-                    type="button"
-                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                    onClick={onConfirmSwitchModelClick}
-                  >
-                    Switch
-                  </button>
-                  <button
-                    type="button"
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                    onClick={() => setProps(undefined)}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}
-
-export default SwitchingModelConfirmationModal
diff --git a/web/components/TextAreaWithTitle/index.tsx b/web/components/TextAreaWithTitle/index.tsx
deleted file mode 100644
index 983134b4e..000000000
--- a/web/components/TextAreaWithTitle/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { useController } from 'react-hook-form'
-
-type Props = {
-  id: string
-  title: string
-  placeholder: string
-  description?: string
-  control?: any
-  required?: boolean
-}
-
-const TextAreaWithTitle: React.FC<Props> = ({
-  id,
-  title,
-  placeholder,
-  description,
-  control,
-  required = false,
-}) => {
-  const { field } = useController({
-    name: id,
-    control: control,
-    rules: { required: required },
-  })
-
-  return (
-    <div className="flex flex-col gap-2">
-      <label htmlFor="comment" className="block font-bold">
-        {title}
-      </label>
-      {description && (
-        <p className="mt-1 font-normal text-muted-foreground">{description}</p>
-      )}
-      <textarea
-        rows={4}
-        className="text-background-reverse block w-full resize-none rounded-md border-0 bg-background/80 py-1.5 text-xs leading-relaxed shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50"
-        placeholder={placeholder}
-        {...field}
-      />
-    </div>
-  )
-}
-
-export default TextAreaWithTitle
diff --git a/web/containers/Layout/BottomBar/index.tsx b/web/containers/Layout/BottomBar/index.tsx
index aa9715454..9752888fa 100644
--- a/web/containers/Layout/BottomBar/index.tsx
+++ b/web/containers/Layout/BottomBar/index.tsx
@@ -1,11 +1,10 @@
 import { Badge, Button } from '@janhq/uikit'
 import { useAtomValue } from 'jotai'
 
-import ProgressBar from '@/components/ProgressBar'
-
 import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
 
 import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
+import ProgressBar from '@/containers/ProgressBar'
 
 import { appDownloadProgress } from '@/containers/Providers/Jotai'
 
diff --git a/web/containers/Loader/Bubble.tsx b/web/containers/Loader/Bubble.tsx
new file mode 100644
index 000000000..0cd438ce0
--- /dev/null
+++ b/web/containers/Loader/Bubble.tsx
@@ -0,0 +1,9 @@
+export default function BubbleLoader() {
+  return (
+    <div className="bubble-loader">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  )
+}
diff --git a/web/components/ProgressBar/index.tsx b/web/containers/ProgressBar/index.tsx
similarity index 100%
rename from web/components/ProgressBar/index.tsx
rename to web/containers/ProgressBar/index.tsx
diff --git a/web/containers/Providers/index.tsx b/web/containers/Providers/index.tsx
index bd156425a..0383a9e24 100644
--- a/web/containers/Providers/index.tsx
+++ b/web/containers/Providers/index.tsx
@@ -69,9 +69,7 @@ const Providers = (props: PropsWithChildren) => {
         {setupCore && activated && (
           <FeatureToggleWrapper>
             <EventListenerWrapper>
-              <TooltipProvider>
-                <ModalWrapper>{children}</ModalWrapper>
-              </TooltipProvider>
+              <TooltipProvider>{children}</TooltipProvider>
             </EventListenerWrapper>
             <Toaster position="top-right" />
           </FeatureToggleWrapper>
diff --git a/web/helpers/atoms/Modal.atom.ts b/web/helpers/atoms/Modal.atom.ts
index c7559eec4..5f13e1f9e 100644
--- a/web/helpers/atoms/Modal.atom.ts
+++ b/web/helpers/atoms/Modal.atom.ts
@@ -1,7 +1,5 @@
 import { atom } from 'jotai'
 
-import { SwitchingModelConfirmationModalProps } from '@/components/SwitchingModelConfirmationModal'
-
 export const showConfirmDeleteConversationModalAtom = atom(false)
 export const showConfirmSignOutModalAtom = atom(false)
 export const showConfirmDeleteModalAtom = atom(false)
@@ -11,7 +9,4 @@ export const showingMobilePaneAtom = atom<boolean>(false)
 export const showingBotListModalAtom = atom<boolean>(false)
 export const showingCancelDownloadModalAtom = atom<boolean>(false)
 
-export const switchingModelConfirmationModalPropsAtom = atom<
-  SwitchingModelConfirmationModalProps | undefined
->(undefined)
 export const showingModalNoActiveModel = atom<boolean>(false)
diff --git a/web/models/ChatMessage.ts b/web/models/ChatMessage.ts
index 9f74b5b96..ade7a46e5 100644
--- a/web/models/ChatMessage.ts
+++ b/web/models/ChatMessage.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { NewMessageResponse } from '@janhq/core'
 import { Message } from '@janhq/core/lib/types'
+
 export enum MessageType {
   Text = 'Text',
   Image = 'Image',
@@ -78,6 +79,6 @@ export const toChatMessage = (
     text: content,
     imageUrls: imageUrls,
     createdAt: createdAt,
-    status: MessageStatus.Ready,
+    status: m.message === '' ? MessageStatus.Pending : MessageStatus.Ready,
   }
 }
diff --git a/web/package.json b/web/package.json
index 6d0347646..d0e2b96b8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -38,6 +38,7 @@
     "tailwind-merge": "^2.0.0",
     "tailwindcss": "3.3.5",
     "typescript": "5.2.2",
+    "typewriter-effect": "^2.21.0",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"
   },
diff --git a/web/screens/Chat/ChatItem/index.tsx b/web/screens/Chat/ChatItem/index.tsx
index fa18acd54..6e38230a3 100644
--- a/web/screens/Chat/ChatItem/index.tsx
+++ b/web/screens/Chat/ChatItem/index.tsx
@@ -12,6 +12,7 @@ const ChatItem = forwardRef<Ref, Props>(({ message }, ref) => {
   return (
     <div ref={ref} className="py-4 even:bg-secondary dark:even:bg-secondary/20">
       <SimpleTextMessage
+        status={message.status}
         key={message.id}
         avatarUrl={message.senderAvatarUrl}
         senderName={message.senderName}
diff --git a/web/screens/Chat/HistoryList/index.tsx b/web/screens/Chat/HistoryList/index.tsx
index c3c69fa47..628023e0c 100644
--- a/web/screens/Chat/HistoryList/index.tsx
+++ b/web/screens/Chat/HistoryList/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 import { Conversation, Model } from '@janhq/core/lib/types'
-import { Badge, Button } from '@janhq/uikit'
+import { Button } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
 import { useAtomValue, useSetAtom } from 'jotai'
 
@@ -96,9 +96,7 @@ export default function HistoryList() {
                 {convo.updatedAt &&
                   displayDate(new Date(convo.updatedAt).getTime())}
               </p>
-              <span className="line-clamp-1">
-                {convo.summary ?? convo.name}
-              </span>
+              <h2 className="line-clamp-1">{convo.summary ?? convo.name}</h2>
               <p className="mt-1 line-clamp-2 text-xs">
                 {convo?.lastMessage ?? 'No new message'}
               </p>
diff --git a/web/screens/Chat/SimpleTextMessage/index.tsx b/web/screens/Chat/SimpleTextMessage/index.tsx
index ff29b6845..7e3066a09 100644
--- a/web/screens/Chat/SimpleTextMessage/index.tsx
+++ b/web/screens/Chat/SimpleTextMessage/index.tsx
@@ -1,51 +1,58 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { Fragment } from 'react'
 
 import hljs from 'highlight.js'
+
+import { atom, useAtom } from 'jotai'
 import { Marked } from 'marked'
 
 import { markedHighlight } from 'marked-highlight'
 
 import { twMerge } from 'tailwind-merge'
 
+// import Typewriter from 'typewriter-effect'
+
 import LogoMark from '@/containers/Brand/Logo/Mark'
 
+import BubbleLoader from '@/containers/Loader/Bubble'
+
 import { displayDate } from '@/utils/datetime'
 
-import LoadingIndicator from '../../../components/LoadingIndicator'
+import { MessageSenderType, MessageStatus } from '@/models/ChatMessage'
 
-import { MessageSenderType } from '@/models/ChatMessage'
+// export const currentStreamingMessageAtom = atom<ChatMessage | undefined>(
+//   undefined
+// )
 
 type Props = {
   avatarUrl: string
   senderName: string
   createdAt: number
   senderType: MessageSenderType
+  status: MessageStatus
   text?: string
 }
 
 const marked = new Marked(
-  // markedHighlight({
-  //   langPrefix: 'hljs',
-  //   highlight(code, lang) {
-  //     if (lang === undefined || lang === '') {
-  //       return hljs.highlightAuto(code).value
-  //     }
-  //     return hljs.highlight(code, { language: lang }).value
-  //   },
-  // }),
   markedHighlight({
-    langPrefix: 'hljs language-',
+    langPrefix: 'hljs',
     highlight(code, lang) {
-      const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-      return hljs.highlight(code, { language }).value
+      if (lang === undefined || lang === '') {
+        return hljs.highlightAuto(code).value
+      }
+      return hljs.highlight(code, { language: lang }).value
     },
   }),
   {
     renderer: {
       code(code, lang, escaped) {
-        return `<pre class="hljs"><code class="language-${encodeURIComponent(
-          lang ?? ''
-        )}">${escaped ? code : encodeURIComponent(code)}</code></pre>`
+        // Make a copy paste
+        return `
+        <pre class="hljs">
+          <code class="language-${encodeURIComponent(lang ?? '')}">${
+            escaped ? code : encodeURIComponent(code)
+          }</code>
+          </pre>`
       },
     },
   }
@@ -55,13 +62,14 @@ const SimpleTextMessage: React.FC<Props> = ({
   senderName,
   senderType,
   createdAt,
+  status,
   text = '',
 }) => {
   const parsedText = marked.parse(text)
   const isUser = senderType === 'user'
 
   return (
-    <div className="mx-auto flex w-full flex-col items-start gap-1 rounded-xl px-4 lg:w-3/4">
+    <div className="mx-auto rounded-xl px-4 lg:w-3/4">
       <div
         className={twMerge(
           'mb-1 flex items-center justify-start gap-2',
@@ -73,9 +81,9 @@ const SimpleTextMessage: React.FC<Props> = ({
         <p className="text-xs font-medium">{displayDate(createdAt)}</p>
       </div>
 
-      <div className="w-full">
+      <div className={twMerge('w-full')}>
         {text === '' ? (
-          <LoadingIndicator />
+          <BubbleLoader />
         ) : (
           <>
             <span
diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx
index 6a04625d2..223ebb47b 100644
--- a/web/screens/Chat/index.tsx
+++ b/web/screens/Chat/index.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useEffect } from 'react'
 
 import { Model } from '@janhq/core/lib/types'
-import { ScrollArea, Input, Button, Badge } from '@janhq/uikit'
+import { Input, Button, Badge } from '@janhq/uikit'
 
 import { useAtom, useAtomValue } from 'jotai'
 import { Trash2Icon } from 'lucide-react'
@@ -90,18 +90,14 @@ const ChatScreen = () => {
     }
   }
 
-  console.log(currentConvo)
-
   return (
     <div className="flex h-full">
-      <div className="flex h-full w-64 flex-shrink-0 flex-col border-r border-border">
-        <ScrollArea className="h-full w-full">
-          <HistoryList />
-        </ScrollArea>
+      <div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
+        <HistoryList />
       </div>
-      <div className="relative flex h-full w-full flex-col bg-muted/10">
+      <div className="relative flex h-full w-[calc(100%-256px)] flex-col bg-muted/10">
         <div className="flex h-full w-full flex-col justify-between">
-          {isEnableChat && (
+          {isEnableChat && currentConvo && (
             <div className="h-[53px] flex-shrink-0 border-b border-border bg-background p-4">
               <div className="flex items-center justify-between">
                 <span>{currentConvo?.name ?? ''}</span>
@@ -135,7 +131,7 @@ const ChatScreen = () => {
           )}
 
           {isEnableChat ? (
-            <div className="flex h-full w-full overflow-x-auto">
+            <div className="flex h-full w-full overflow-y-auto overflow-x-hidden">
               <ChatBody />
             </div>
           ) : (
@@ -165,7 +161,7 @@ const ChatScreen = () => {
               )}
             </div>
           )}
-          <div className="flex w-full flex-shrink-0 items-center justify-center space-x-4 p-4">
+          <div className="mx-auto flex w-full flex-shrink-0 items-center justify-center space-x-4 p-4 lg:w-3/4">
             <Input
               type="text"
               className="h-10"
diff --git a/web/screens/ExploreModels/ExploreModelList/index.tsx b/web/screens/ExploreModels/ExploreModelList/index.tsx
index b91c34de5..943a243c8 100644
--- a/web/screens/ExploreModels/ExploreModelList/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelList/index.tsx
@@ -10,7 +10,9 @@ export default function ExploreModelList(props: Props) {
   const { models } = props
   return (
     <div className="relative h-full w-full flex-shrink-0">
-      {models?.map((item, i) => <ExploreModelItem key={i} model={item} />)}
+      {models?.map((item, i) => (
+        <ExploreModelItem key={item._id} model={item} />
+      ))}
     </div>
   )
 }
diff --git a/web/styles/components/code-block.scss b/web/styles/components/code-block.scss
index a4d77526f..c30911f32 100644
--- a/web/styles/components/code-block.scss
+++ b/web/styles/components/code-block.scss
@@ -53,7 +53,6 @@
 }
 
 .hljs {
-  display: block;
   overflow-x: auto;
   background: #2b2b2b;
   color: #f8f8f2;
@@ -62,7 +61,6 @@
   border-radius: 0.4rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  white-space: pre-wrap;
 }
 
 .hljs-emphasis {
diff --git a/web/styles/components/loader.scss b/web/styles/components/loader.scss
index 1d77f72d7..54082705b 100644
--- a/web/styles/components/loader.scss
+++ b/web/styles/components/loader.scss
@@ -70,3 +70,67 @@
   -webkit-animation: loaderDot 3s 500ms infinite ease-in-out;
   animation: loaderDot 3s 500ms infinite ease-in-out;
 }
+
+.bubble-loader {
+  position: relative;
+  margin-top: 8px;
+  height: 32px;
+  @apply bg-secondary;
+  border-radius: 20px;
+  width: 56px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bubble-loader span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  margin-left: -4px;
+  animation: 3s infinite linear;
+}
+
+.bubble-loader span:nth-child(1) {
+  @apply bg-secondary-foreground/50;
+  animation: DotLeft 1.5s infinite linear;
+}
+.bubble-loader span:nth-child(2) {
+  @apply bg-secondary-foreground/50;
+  z-index: 100;
+}
+.bubble-loader span:nth-child(3) {
+  @apply bg-secondary-foreground/50;
+  animation: DotRight 1.5s infinite linear;
+}
+
+@keyframes DotRight {
+  0% {
+    -webkit-transform: translateX(14px);
+  }
+
+  50% {
+    -webkit-transform: translateX(-14px);
+  }
+
+  100% {
+    -webkit-transform: translateX(14px);
+    z-index: 200;
+  }
+}
+
+@keyframes DotLeft {
+  0% {
+    -webkit-transform: translateX(-14px);
+    z-index: 200;
+  }
+  50% {
+    -webkit-transform: translateX(14px);
+  }
+  100% {
+    -webkit-transform: translateX(-14px);
+  }
+}
diff --git a/web/styles/components/message.scss b/web/styles/components/message.scss
index 2f7ab6aba..e6410db1a 100644
--- a/web/styles/components/message.scss
+++ b/web/styles/components/message.scss
@@ -6,3 +6,37 @@
   }
   @apply text-muted-foreground;
 }
+
+// .typewriter * {
+//   color: #fff;
+//   font-family: monospace;
+//   overflow: hidden; /* Ensures the content is not revealed until the animation */
+//   border-right: 0.15em solid orange; /* The typwriter cursor */
+//   white-space: nowrap; /* Keeps the content on a single line */
+//   margin: 0 auto; /* Gives that scrolling effect as the typing happens */
+//   letter-spacing: 0.15em; /* Adjust as needed */
+//   animation:
+//     typing 3.5s steps(30, end),
+//     blink-caret 0.5s step-end infinite;
+// }
+
+// /* The typing effect */
+// @keyframes typing {
+//   from {
+//     width: 0;
+//   }
+//   to {
+//     width: 100%;
+//   }
+// }
+
+// /* The typewriter cursor effect */
+// @keyframes blink-caret {
+//   from,
+//   to {
+//     border-color: transparent;
+//   }
+//   50% {
+//     border-color: orange;
+//   }
+// }