Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Enhance layout in Conversation components #1383

Closed
wants to merge 6 commits into from
Closed

fix: Enhance layout in Conversation components #1383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0b608dd
💄 Update title in index.html and enhance layout in Conversation compo…
SamsShow Oct 26, 2024
26d9b54
Merge branch 'main' of https://github.com/SamsShow/DocsGPT
SamsShow Oct 26, 2024
41b69bb
Merge branch 'arc53:main' into main
SamsShow Oct 29, 2024
7107844
✨ Avatar Fixed
SamsShow Oct 29, 2024
5f5bd5e
Merge branch 'main' of https://github.com/arc53/DocsGPT
actions-user Oct 31, 2024
ee14635
Merge branch 'main' of https://github.com/arc53/DocsGPT
actions-user Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>DocsGPT 🦖</title>
<title>DocsGPT</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
</head>

Expand Down
Binary file added frontend/src/assets/UserIcon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions frontend/src/conversation/Conversation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ export default function Conversation() {
};
}, []);
return (
<div className="flex flex-col gap-1 h-full justify-end ">
<div className="flex flex-col gap-1 h-full justify-end sm:mx-4 md:mx-4 mx-4">
{conversationId && queries.length > 0 && (
<div className="absolute top-4 right-20 z-20 ">
{' '}
Expand Down Expand Up @@ -263,7 +263,7 @@ export default function Conversation() {
ref={conversationRef}
onWheel={handleUserInterruption}
onTouchMove={handleUserInterruption}
className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12"
className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12 "
>
{queries.length > 0 && !hasScrolledToLast && (
<button
Expand Down
25 changes: 19 additions & 6 deletions frontend/src/conversation/ConversationBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';
import DocsGPT3 from '../assets/cute_docsgpt3.svg';
import usericon from '../assets/UserIcon.png';
import Dislike from '../assets/dislike.svg?react';
import Document from '../assets/document.svg';
import Like from '../assets/like.svg?react';
Expand Down Expand Up @@ -55,14 +56,26 @@ const ConversationBubble = forwardRef<
bubble = (
<div
ref={ref}
className={`flex flex-row-reverse self-end flex-wrap ${className}`}
className={`flex flex-col my-4 md:my-2 items-end ${className}`}
>
<Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
<div className="flex flex-row items-center justify-center gap-3 my-2 -ml-3">
<p className="text-base font-semibold text-white">Prompt</p>
<Avatar
className="h-7 w-7 text-2xl"
avatar={
<img
src={usericon}
alt="user"
className="h-full w-full object-cover"
/>
}
/>
</div>
<div
style={{
wordBreak: 'break-word',
}}
className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-6 md:py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
>
{message}
</div>
Expand All @@ -87,7 +100,7 @@ const ConversationBubble = forwardRef<
bubble = (
<div
ref={ref}
className={`flex flex-wrap self-start ${className} group flex-col dark:text-bright-gray`}
className={`flex flex-wrap self-start my-4 md:my-2 ${className} group flex-col dark:text-bright-gray`}
>
{DisableSourceFE ||
type === 'ERROR' ||
Expand Down Expand Up @@ -231,9 +244,9 @@ const ConversationBubble = forwardRef<
<p className="text-base font-semibold">Answer</p>
</div>
<div
className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-6 md:py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
type === 'ERROR'
? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
: 'flex-col rounded-3xl'
}`}
>
Expand Down