Merge pull request #462 from janhq/bug/chat-message

bug: avoid chat body scroll horizontal

web/app/_components/InputToolbar/index.tsx

@@ -15,6 +15,7 @@ import {
 import useGetInputState from '@hooks/useGetInputState'
 import { Button } from '../../../uikit/button'
 import useStartStopModel from '@hooks/useStartStopModel'
+import { userConversationsAtom } from '@helpers/atoms/Conversation.atom'
 
 const InputToolbar: React.FC = () => {
   const activeModel = useAtomValue(activeAssistantModelAtom)
@@ -22,6 +23,7 @@ const InputToolbar: React.FC = () => {
   const { inputState, currentConvo } = useGetInputState()
   const { requestCreateConvo } = useCreateConversation()
   const { startModel } = useStartStopModel()
+  const conversations = useAtomValue(userConversationsAtom)
 
   const activeConvoId = useAtomValue(getActiveConvoIdAtom)
 
@@ -68,6 +70,7 @@ const InputToolbar: React.FC = () => {
     )
   }
 
+  if (conversations.length > 0)
     return (
       <div className="sticky bottom-0 w-full bg-background/90 px-5 py-0">
         {currentConvoState?.error && (

web/app/_components/LeftHeaderAction/index.tsx

@@ -34,12 +34,12 @@ const LeftHeaderAction: React.FC = () => {
         className="flex-1"
         icon={<MagnifyingGlassIcon width={16} height={16} />}
       />
-      <SecondaryButton
+      {/* <SecondaryButton
         title={'Create bot'}
         onClick={onCreateBotClicked}
         className="flex-1"
         icon={<PlusIcon width={16} height={16} />}
-      />
+      /> */}
     </div>
   )
 }

web/app/_components/ModalNoActiveModel/index.tsx

@@ -0,0 +1,72 @@
+import React, { Fragment } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { useAtom, useSetAtom } from 'jotai'
+import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
+import {
+  MainViewState,
+  setMainViewStateAtom,
+} from '@helpers/atoms/MainView.atom'
+
+const ModalNoActiveModel: React.FC = () => {
+  const [show, setShow] = useAtom(showingModalNoActiveModel)
+  const setMainView = useSetAtom(setMainViewStateAtom)
+
+  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">
+                  There is no active model at the moment ...
+                </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={() => {
+                      setMainView(MainViewState.MyModel)
+                      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)

web/app/_components/SidebarEmptyHistory/index.tsx

@@ -9,6 +9,7 @@ import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
 import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
 import { Button } from '@uikit'
 import { MessageCircle } from 'lucide-react'
+import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
 
 enum ActionButton {
   DownloadModel = 'Download a Model',
@@ -21,6 +22,7 @@ const SidebarEmptyHistory: React.FC = () => {
   const setMainView = useSetAtom(setMainViewStateAtom)
   const { requestCreateConvo } = useCreateConversation()
   const [action, setAction] = useState(ActionButton.DownloadModel)
+  const modalNoActiveModel = useSetAtom(showingModalNoActiveModel)
 
   useEffect(() => {
     if (downloadedModels.length > 0) {
@@ -35,7 +37,7 @@ const SidebarEmptyHistory: React.FC = () => {
       setMainView(MainViewState.ExploreModel)
     } else {
       if (!activeModel) {
-        setMainView(MainViewState.ConversationEmptyModel)
+        modalNoActiveModel(true)
       } else {
         await requestCreateConvo(activeModel)
       }
@@ -44,10 +46,10 @@ const SidebarEmptyHistory: React.FC = () => {
 
   return (
     <div className="flex flex-col items-center gap-3 py-10">
-      <MessageCircle size={32} />
+      <MessageCircle size={24} />
-      <div className="flex flex-col items-center gap-y-2">
+      <div className="flex flex-col items-center">
         <h6 className="text-center text-base">No Chat History</h6>
-        <p className="mb-6 text-center text-muted-foreground">
+        <p className="mb-6 mt-1 text-center text-muted-foreground">
           Get started by creating a new chat.
         </p>
         <Button onClick={onClick} themes="accent">

web/helpers/ModalWrapper.tsx

@@ -6,6 +6,7 @@ import ConfirmDeleteModelModal from '@/_components/ConfirmDeleteModelModal'
 import ConfirmSignOutModal from '@/_components/ConfirmSignOutModal'
 import MobileMenuPane from '@/_components/MobileMenuPane'
 import SwitchingModelConfirmationModal from '@/_components/SwitchingModelConfirmationModal'
+import ModalNoActiveModel from '@/_components/ModalNoActiveModel'
 import { ReactNode } from 'react'
 
 type Props = {
@@ -20,6 +21,9 @@ export const ModalWrapper: React.FC<Props> = ({ children }) => (
     <ConfirmDeleteModelModal />
     <BotListModal />
     <SwitchingModelConfirmationModal />
+    <ModalNoActiveModel />
+    <SwitchingModelConfirmationModal />
+    <ModalNoActiveModel />
     {children}
   </>
 )

web/helpers/atoms/Modal.atom.ts

@@ -12,3 +12,4 @@ export const showingBotListModalAtom = atom<boolean>(false)
 export const switchingModelConfirmationModalPropsAtom = atom<
   SwitchingModelConfirmationModalProps | undefined
 >(undefined)
+export const showingModalNoActiveModel = atom<boolean>(false)

web/styles/code-block.scss

@@ -54,13 +54,14 @@
 
 .hljs {
   display: block;
-  overflow-x: auto;
+  // overflow-x: auto;
   background: #2b2b2b;
   color: #f8f8f2;
   padding: 0.5em;
   border-radius: 0.4rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  // white-space: pre-wrap;
 }
 
 .hljs-emphasis {