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

Jump to bottom

Fix: Abnormal overflow on mobile screens and arbitrary word breaks. #942

Merged
merged 4 commits into from
May 9, 2024
Merged

Fix: Abnormal overflow on mobile screens and arbitrary word breaks. #942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b3eb9fb
fix(conversation): mobile abnormal overflows
ManishMadan2882 May 8, 2024
f9c9853
fix(conversation) word breaks
ManishMadan2882 May 8, 2024
afb18a3
(conversation) makes overflow auto
ManishMadan2882 May 8, 2024
ea79494
fix(conversation): overflows in sources, removed tagline below input
ManishMadan2882 May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
83 changes: 43 additions & 40 deletions frontend/src/conversation/Conversation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function Conversation() {
setHasScrolledToLast(entry.isIntersecting);
});
};

const observer = new IntersectionObserver(observerCallback, {
root: null,
threshold: [1, 0.8],
Expand Down Expand Up @@ -130,45 +130,48 @@ export default function Conversation() {
};

return (
<div
onWheel={handleUserInterruption}
onTouchMove={handleUserInterruption}
className="flex w-full justify-center p-4 h-full"
>
{queries.length > 0 && !hasScrolledToLast && (
<button
onClick={scrollIntoView}
aria-label="scroll to bottom"
className="fixed bottom-32 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
>
<img
src={ArrowDown}
alt="arrow down"
className="h-4 w-4 opacity-50 md:h-5 md:w-5"
/>
</button>
)}
<div className='flex flex-col gap-1 h-screen'>
<div
onWheel={handleUserInterruption}
onTouchMove={handleUserInterruption}
className="flex w-full justify-center p-4 h-[87vh] overflow-y-auto"
>
{queries.length > 0 && !hasScrolledToLast && (
<button
onClick={scrollIntoView}
aria-label="scroll to bottom"
className="fixed bottom-32 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
>
<img
src={ArrowDown}
alt="arrow down"
className="h-4 w-4 opacity-50 md:h-5 md:w-5"
/>
</button>
)}

{queries.length > 0 && (
<div className="w-full md:w-8/12">
{queries.map((query, index) => {
return (
<Fragment key={index}>
<ConversationBubble
className={'mb-7 last:mb-28'}
key={`${index}QUESTION`}
message={query.prompt}
type="QUESTION"
sources={query.sources}
></ConversationBubble>
{prepResponseView(query, index)}
</Fragment>
);
})}
</div>
)}
{queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
<div className="absolute bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-4 dark:bg-raisin-black md:fixed md:w-[65%]">
{queries.length > 0 && (
<div className="w-full md:w-8/12 mt-16">
{queries.map((query, index) => {
return (
<Fragment key={index}>
<ConversationBubble
className={'mb-1 md:mb-7 last:mb-28'}
key={`${index}QUESTION`}
message={query.prompt}
type="QUESTION"
sources={query.sources}
></ConversationBubble>
{prepResponseView(query, index)}
</Fragment>
);
})}
</div>
)}
{queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}

</div>
<div className="bottom-0 flex flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black md:fixed w-11/12 md:w-[60%]">
<div className="flex h-full w-full">
<div
id="inputbox"
Expand Down Expand Up @@ -208,7 +211,7 @@ export default function Conversation() {
</div>
)}
</div>
<p className="text-gray-595959 w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:w-full">
<p className="hidden md:inline text-gray-595959 w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:w-full">
DocsGPT uses GenAI, please review critial information using sources.
</p>
</div>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/conversation/ConversationBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@ const ConversationBubble = forwardRef<
const [isDislikeClicked, setIsDislikeClicked] = useState(false);

let bubble;

if (type === 'QUESTION') {
bubble = (
<div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
<Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
<div className="mr-2 ml-10 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
<ReactMarkdown className="whitespace-pre-wrap break-all">
<ReactMarkdown className="whitespace-pre-wrap break-normal leading-normal">
{message}
</ReactMarkdown>
</div>
Expand Down Expand Up @@ -88,7 +88,7 @@ const ConversationBubble = forwardRef<
<img src={Alert} alt="alert" className="mr-2 inline" />
)}
<ReactMarkdown
className="whitespace-pre-wrap break-words leading-normal"
className="whitespace-pre-wrap break-normal leading-normal"
remarkPlugins={[remarkGfm]}
components={{
code({ node, inline, className, children, ...props }) {
Expand Down Expand Up @@ -172,7 +172,7 @@ const ConversationBubble = forwardRef<
{sources?.map((source, index) => (
<div
key={index}
className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
className={`max-w-xs sm:max-w-sm md:max-w-md cursor-pointer rounded-[28px] py-1 px-4 ${
openSource === index
? 'bg-[#007DFF]'
: 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
Expand Down