Skip to content

Commit bb3aaa4

Browse files
urmauurlouis-jan
urmauur
authored and
louis-jan
committed
Fix bugs avoid chat body scroll horizontal
1 parent 75ef06d commit bb3aaa4

File tree

8 files changed

+112
-31
lines changed

8 files changed

+112
-31
lines changed

‎web/app/_components/InputToolbar/index.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,14 @@ import {
1616
import useGetBots from '@hooks/useGetBots'
1717
import { activeBotAtom } from '@helpers/atoms/Bot.atom'
1818
import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
19+
import { userConversationsAtom } from '@helpers/atoms/Conversation.atom'
1920

2021
const InputToolbar: React.FC = () => {
2122
const activeModel = useAtomValue(activeAssistantModelAtom)
2223
const { requestCreateConvo } = useCreateConversation()
2324
const currentConvoState = useAtomValue(currentConvoStateAtom)
2425
const currentConvo = useAtomValue(currentConversationAtom)
26+
const conversations = useAtomValue(userConversationsAtom)
2527

2628
const setActiveBot = useSetAtom(activeBotAtom)
2729
const { getBotById } = useGetBots()
@@ -81,31 +83,32 @@ const InputToolbar: React.FC = () => {
8183
</div>
8284
)
8385

84-
return (
85-
<div className="sticky bottom-0 w-full bg-background/90 px-5 py-0">
86-
{currentConvoState?.error && (
87-
<div className="flex flex-row justify-center">
88-
<span className="mx-5 my-2 text-sm text-red-500">
89-
{currentConvoState?.error?.toString()}
90-
</span>
86+
if (conversations.length > 0)
87+
return (
88+
<div className="sticky bottom-0 w-full bg-background/90 px-5 py-0">
89+
{currentConvoState?.error && (
90+
<div className="flex flex-row justify-center">
91+
<span className="mx-5 my-2 text-sm text-red-500">
92+
{currentConvoState?.error?.toString()}
93+
</span>
94+
</div>
95+
)}
96+
<div className="my-3 flex justify-center gap-2">
97+
<SecondaryButton
98+
onClick={onNewConversationClick}
99+
title="New Conversation"
100+
icon={<PlusIcon width={16} height={16} />}
101+
/>
91102
</div>
92-
)}
93-
<div className="my-3 flex justify-center gap-2">
94-
<SecondaryButton
95-
onClick={onNewConversationClick}
96-
title="New Conversation"
97-
icon={<PlusIcon width={16} height={16} />}
98-
/>
99-
</div>
100-
{/* My text input */}
101-
<div className="mb-5 flex items-start space-x-4">
102-
<div className="relative min-w-0 flex-1">
103-
<BasicPromptInput />
104-
<BasicPromptAccessories />
103+
{/* My text input */}
104+
<div className="mb-5 flex items-start space-x-4">
105+
<div className="relative min-w-0 flex-1">
106+
<BasicPromptInput />
107+
<BasicPromptAccessories />
108+
</div>
105109
</div>
106110
</div>
107-
</div>
108-
)
111+
)
109112
}
110113

111114
export default InputToolbar

‎web/app/_components/LeftHeaderAction/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ const LeftHeaderAction: React.FC = () => {
3434
className="flex-1"
3535
icon={<MagnifyingGlassIcon width={16} height={16} />}
3636
/>
37-
<SecondaryButton
37+
{/* <SecondaryButton
3838
title={'Create bot'}
3939
onClick={onCreateBotClicked}
4040
className="flex-1"
4141
icon={<PlusIcon width={16} height={16} />}
42-
/>
42+
/> */}
4343
</div>
4444
)
4545
}

‎web/app/_components/ModalNoActiveModel/index.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { Fragment } from 'react'
2+
import { Dialog, Transition } from '@headlessui/react'
3+
import { useAtom, useSetAtom } from 'jotai'
4+
import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
5+
import {
6+
MainViewState,
7+
setMainViewStateAtom,
8+
} from '@helpers/atoms/MainView.atom'
9+
10+
const ModalNoActiveModel: React.FC = () => {
11+
const [show, setShow] = useAtom(showingModalNoActiveModel)
12+
const setMainView = useSetAtom(setMainViewStateAtom)
13+
14+
return (
15+
<Transition.Root show={show} as={Fragment}>
16+
<Dialog as="div" className="relative z-10" onClose={setShow}>
17+
<Transition.Child
18+
as={Fragment}
19+
enter="ease-out duration-300"
20+
enterFrom="opacity-0"
21+
enterTo="opacity-100"
22+
leave="ease-in duration-200"
23+
leaveFrom="opacity-100"
24+
leaveTo="opacity-0"
25+
>
26+
<div className="fixed inset-0 z-40 h-full bg-gray-950/90 transition-opacity dark:backdrop-blur-sm" />
27+
</Transition.Child>
28+
29+
<div className="fixed inset-0 z-50 w-screen overflow-y-auto">
30+
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
31+
<Transition.Child
32+
as={Fragment}
33+
enter="ease-out duration-300"
34+
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
35+
enterTo="opacity-100 translate-y-0 sm:scale-100"
36+
leave="ease-in duration-200"
37+
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
38+
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
39+
>
40+
<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">
41+
<h1 className="font-base mb-4 font-bold">
42+
There is no active model at the moment ...
43+
</h1>
44+
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
45+
<button
46+
type="button"
47+
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"
48+
onClick={() => {
49+
setMainView(MainViewState.MyModel)
50+
setShow(false)
51+
}}
52+
>
53+
Ok
54+
</button>
55+
<button
56+
type="button"
57+
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"
58+
onClick={() => setShow(false)}
59+
>
60+
Cancel
61+
</button>
62+
</div>
63+
</Dialog.Panel>
64+
</Transition.Child>
65+
</div>
66+
</div>
67+
</Dialog>
68+
</Transition.Root>
69+
)
70+
}
71+
72+
export default React.memo(ModalNoActiveModel)

‎web/app/_components/SidebarEmptyHistory/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
99
import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
1010
import { Button } from '@uikit'
1111
import { MessageCircle } from 'lucide-react'
12+
import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
1213

1314
enum ActionButton {
1415
DownloadModel = 'Download a Model',
@@ -21,6 +22,7 @@ const SidebarEmptyHistory: React.FC = () => {
2122
const setMainView = useSetAtom(setMainViewStateAtom)
2223
const { requestCreateConvo } = useCreateConversation()
2324
const [action, setAction] = useState(ActionButton.DownloadModel)
25+
const modalNoActiveModel = useSetAtom(showingModalNoActiveModel)
2426

2527
useEffect(() => {
2628
if (downloadedModels.length > 0) {
@@ -35,7 +37,7 @@ const SidebarEmptyHistory: React.FC = () => {
3537
setMainView(MainViewState.ExploreModel)
3638
} else {
3739
if (!activeModel) {
38-
setMainView(MainViewState.ConversationEmptyModel)
40+
modalNoActiveModel(true)
3941
} else {
4042
await requestCreateConvo(activeModel)
4143
}
@@ -44,10 +46,10 @@ const SidebarEmptyHistory: React.FC = () => {
4446

4547
return (
4648
<div className="flex flex-col items-center gap-3 py-10">
47-
<MessageCircle size={32} />
48-
<div className="flex flex-col items-center gap-y-2">
49+
<MessageCircle size={24} />
50+
<div className="flex flex-col items-center">
4951
<h6 className="text-center text-base">No Chat History</h6>
50-
<p className="mb-6 text-center text-muted-foreground">
52+
<p className="mb-6 mt-1 text-center text-muted-foreground">
5153
Get started by creating a new chat.
5254
</p>
5355
<Button onClick={onClick} themes="accent">

‎web/app/_components/SimpleTextMessage/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const SimpleTextMessage: React.FC<Props> = ({
5151

5252
return (
5353
<div
54-
className={`border-border/50 flex items-start gap-x-4 gap-y-2 border-b px-4 py-5 last:border-none`}
54+
className={`flex items-start gap-x-4 gap-y-2 border-b border-border/50 px-4 py-5 last:border-none`}
5555
>
5656
<Image
5757
className="rounded-full"
@@ -73,7 +73,7 @@ const SimpleTextMessage: React.FC<Props> = ({
7373
<LoadingIndicator />
7474
) : (
7575
<span
76-
className="text-muted-foreground text-xs font-normal leading-loose"
76+
className="text-xs font-normal leading-loose text-muted-foreground"
7777
dangerouslySetInnerHTML={{ __html: parsedText }}
7878
/>
7979
)}

‎web/helpers/ModalWrapper.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import ConfirmDeleteConversationModal from '@/_components/ConfirmDeleteConversat
55
import ConfirmDeleteModelModal from '@/_components/ConfirmDeleteModelModal'
66
import ConfirmSignOutModal from '@/_components/ConfirmSignOutModal'
77
import MobileMenuPane from '@/_components/MobileMenuPane'
8+
import ModalNoActiveModel from '@/_components/ModalNoActiveModel'
89
import { ReactNode } from 'react'
910

1011
type Props = {
@@ -18,6 +19,7 @@ export const ModalWrapper: React.FC<Props> = ({ children }) => (
1819
<ConfirmSignOutModal />
1920
<ConfirmDeleteModelModal />
2021
<BotListModal />
22+
<ModalNoActiveModel />
2123
{children}
2224
</>
2325
)

‎web/helpers/atoms/Modal.atom.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export const showingAdvancedPromptAtom = atom<boolean>(false)
77
export const showingProductDetailAtom = atom<boolean>(false)
88
export const showingMobilePaneAtom = atom<boolean>(false)
99
export const showingBotListModalAtom = atom<boolean>(false)
10+
export const showingModalNoActiveModel = atom<boolean>(false)

‎web/styles/code-block.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,14 @@
5454

5555
.hljs {
5656
display: block;
57-
overflow-x: auto;
57+
// overflow-x: auto;
5858
background: #2b2b2b;
5959
color: #f8f8f2;
6060
padding: 0.5em;
6161
border-radius: 0.4rem;
6262
margin-top: 1rem;
6363
margin-bottom: 1rem;
64+
// white-space: pre-wrap;
6465
}
6566

6667
.hljs-emphasis {

0 commit comments

Comments
 (0)