Skip to content

Commit 2b68193

Browse files
rohan-uiucrohan-uiuc
committed
Fix buggy accordions, their display order, font sizes, responsive design and padding across screen sizes
1 parent ef8907b commit 2b68193

File tree

2 files changed

+41
-39
lines changed

2 files changed

+41
-39
lines changed

‎src/components/Chat/ChatMessage.tsx

+38-36
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,7 @@ export const ChatMessage: FC<Props> = memo(
500500
} max-w-[100%]`}
501501
style={{ overflowWrap: 'anywhere' }}
502502
>
503-
<div className="relative mx-[5%] flex w-full p-4 text-base md:mx-[10%] md:max-w-[80%] md:gap-6 md:py-6 lg:mx-[15%] lg:max-w-[70%] lg:px-0">
503+
<div className="relative flex w-full px-2 py-4 text-base md:mx-[10%] md:max-w-[80%] md:gap-6 md:p-6 lg:mx-[15%] lg:max-w-[70%] lg:px-0">
504504
<div className="min-w-[40px] text-left">
505505
{message.role === 'assistant' ? (
506506
<>
@@ -512,7 +512,7 @@ export const ChatMessage: FC<Props> = memo(
512512
)}
513513
</div>
514514

515-
<div className="dark:prose-invert prose mt-[-2px] flex w-[85%] md:w-full">
515+
<div className="dark:prose-invert prose mt-[-2px] flex w-full">
516516
{message.role === 'user' ? (
517517
<div className="flex w-full flex-row">
518518
{isEditing ? (
@@ -569,7 +569,7 @@ export const ChatMessage: FC<Props> = memo(
569569
return (
570570
<p
571571
key={index}
572-
className={`self-start text-xs font-normal md:text-base md:font-medium lg:text-lg ${montserrat_paragraph.variable} font-montserratParagraph`}
572+
className={`self-start text-base font-normal ${montserrat_paragraph.variable} font-montserratParagraph`}
573573
>
574574
{content.text}
575575
</p>
@@ -598,7 +598,15 @@ export const ChatMessage: FC<Props> = memo(
598598
))}
599599
</div>
600600

601-
{(isImg2TextLoading === false || isImg2TextLoading) &&
601+
{(isImg2TextLoading ||
602+
(message.content.some(
603+
(content) =>
604+
content.type === 'text' &&
605+
content.text
606+
?.trim()
607+
.startsWith('Image description:'),
608+
) &&
609+
isImg2TextLoading === false)) &&
602610
(messageIndex ===
603611
(selectedConversation?.messages.length ?? 0) -
604612
1 ||
@@ -611,31 +619,20 @@ export const ChatMessage: FC<Props> = memo(
611619
isLoading={isImg2TextLoading}
612620
error={false}
613621
content={
614-
message.content
615-
.filter(
616-
(content) =>
617-
content.type == 'text' &&
618-
(content.text as string)
619-
.trim()
620-
.startsWith('Image description:'),
621-
)
622-
.find((content) => content.text)
623-
? message.content
624-
.filter(
625-
(content) =>
626-
content.type == 'text' &&
627-
(content.text as string)
628-
.trim()
629-
.startsWith('Image description:'),
630-
)
631-
.find((content) => content.text)?.text
632-
: 'No image description found'
622+
message.content.find(
623+
(content) =>
624+
content.type === 'text' &&
625+
content.text
626+
?.trim()
627+
.startsWith('Image description:'),
628+
)?.text ?? 'No image description found'
633629
}
634630
/>
635631
)}
636632

637633
{(isRetrievalLoading === false ||
638-
isRetrievalLoading) &&
634+
isRetrievalLoading ||
635+
message.contexts) &&
639636
(messageIndex ===
640637
(selectedConversation?.messages.length ?? 0) -
641638
1 ||
@@ -645,7 +642,7 @@ export const ChatMessage: FC<Props> = memo(
645642
<IntermediateStateAccordion
646643
accordionKey="retrieval loading"
647644
title="Retrieving relevant documents:"
648-
isLoading={isRetrievalLoading}
645+
isLoading={isRetrievalLoading || false}
649646
error={false}
650647
content={`Found ${message.contexts?.length} relevant documents!`}
651648
/>
@@ -771,7 +768,6 @@ export const ChatMessage: FC<Props> = memo(
771768
color={response.error ? 'red' : 'grape'}
772769
radius="md"
773770
size="sm"
774-
className={`md:ml-10`}
775771
>
776772
{response.readableName}
777773
</Badge>
@@ -997,7 +993,7 @@ export const ChatMessage: FC<Props> = memo(
997993
p({ node, children }) {
998994
return (
999995
<p
1000-
className={`text-xs font-normal md:text-base lg:text-lg ${montserrat_paragraph.variable} pb-2 font-montserratParagraph`}
996+
className={`text-base font-normal ${montserrat_paragraph.variable} pb-2 font-montserratParagraph`}
1001997
>
1002998
{children}
1003999
</p>
@@ -1006,7 +1002,7 @@ export const ChatMessage: FC<Props> = memo(
10061002
ul({ children }) {
10071003
return (
10081004
<ul
1009-
className={`text-xs font-normal md:text-base lg:text-lg ${montserrat_paragraph.variable} font-montserratParagraph`}
1005+
className={`text-base font-normal ${montserrat_paragraph.variable} font-montserratParagraph`}
10101006
>
10111007
{children}
10121008
</ul>
@@ -1015,7 +1011,7 @@ export const ChatMessage: FC<Props> = memo(
10151011
ol({ children }) {
10161012
return (
10171013
<ol
1018-
className={`text-xs font-normal md:text-base lg:text-lg ${montserrat_paragraph.variable} ml-4 font-montserratParagraph lg:ml-6`}
1014+
className={`text-base font-normal ${montserrat_paragraph.variable} ml-4 font-montserratParagraph lg:ml-6`}
10191015
>
10201016
{children}
10211017
</ol>
@@ -1024,7 +1020,7 @@ export const ChatMessage: FC<Props> = memo(
10241020
li({ children }) {
10251021
return (
10261022
<li
1027-
className={` text-xs font-normal md:text-base lg:text-lg ${montserrat_paragraph.variable} break-words font-montserratParagraph`}
1023+
className={`text-base font-normal ${montserrat_paragraph.variable} break-words font-montserratParagraph`}
10281024
>
10291025
{children}
10301026
</li>
@@ -1054,7 +1050,7 @@ export const ChatMessage: FC<Props> = memo(
10541050
h1({ node, children }) {
10551051
return (
10561052
<h1
1057-
className={`text-lg font-bold md:text-3xl lg:text-5xl ${montserrat_heading.variable} font-montserratHeading`}
1053+
className={`text-4xl font-bold ${montserrat_heading.variable} font-montserratHeading`}
10581054
>
10591055
{children}
10601056
</h1>
@@ -1063,7 +1059,7 @@ export const ChatMessage: FC<Props> = memo(
10631059
h2({ node, children }) {
10641060
return (
10651061
<h2
1066-
className={`text-lg font-bold md:text-2xl lg:text-3xl ${montserrat_heading.variable} font-montserratHeading`}
1062+
className={`text-3xl font-bold ${montserrat_heading.variable} font-montserratHeading`}
10671063
>
10681064
{children}
10691065
</h2>
@@ -1072,7 +1068,7 @@ export const ChatMessage: FC<Props> = memo(
10721068
h3({ node, children }) {
10731069
return (
10741070
<h3
1075-
className={`text-lg font-bold md:text-xl lg:text-2xl ${montserrat_heading.variable} font-montserratHeading`}
1071+
className={`text-2xl font-bold ${montserrat_heading.variable} font-montserratHeading`}
10761072
>
10771073
{children}
10781074
</h3>
@@ -1081,7 +1077,7 @@ export const ChatMessage: FC<Props> = memo(
10811077
h4({ node, children }) {
10821078
return (
10831079
<h4
1084-
className={`text-sm font-bold lg:text-lg ${montserrat_heading.variable} font-montserratHeading`}
1080+
className={`text-lg font-bold ${montserrat_heading.variable} font-montserratHeading`}
10851081
>
10861082
{children}
10871083
</h4>
@@ -1090,14 +1086,20 @@ export const ChatMessage: FC<Props> = memo(
10901086
h5({ node, children }) {
10911087
return (
10921088
<h5
1093-
className={`lg:text-md text-xs font-bold ${montserrat_heading.variable} font-montserratHeading`}
1089+
className={`text-base font-bold ${montserrat_heading.variable} font-montserratHeading`}
10941090
>
10951091
{children}
10961092
</h5>
10971093
)
10981094
},
10991095
h6({ node, children }) {
1100-
return <h6 className="text-xs font-bold">{children}</h6>
1096+
return (
1097+
<h6
1098+
className={`text-base font-bold ${montserrat_heading.variable} font-montserratHeading`}
1099+
>
1100+
{children}
1101+
</h6>
1102+
)
11011103
},
11021104
a({ node, className, children, ...props }) {
11031105
const { href, title } = props

‎src/components/UIUC-Components/IntermediateStateAccordion.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -62,20 +62,20 @@ export const IntermediateStateAccordion = ({
6262
}}
6363
>
6464
<Accordion.Control
65-
className={`rounded-lg hover:bg-transparent ${montserrat_paragraph.variable} md:text-md text-xs/2 font-montserratParagraph text-xs md:text-sm md:font-bold lg:text-base`}
65+
className={`rounded-lg hover:bg-transparent ${montserrat_paragraph.variable} font-montserratParagraph text-sm font-bold`}
6666
style={{
6767
// marginRight: '10px',
6868
textShadow: '0 0 10px',
6969
color: '#9d4edd',
7070
display: 'flex',
71-
alignItems: 'center',
71+
alignItems: 'left',
7272
}}
7373
disabled={isLoading}
7474
>
7575
{title}
7676
</Accordion.Control>
7777
<Accordion.Panel
78-
className={`${montserrat_paragraph.variable} rounded-lg bg-[#101122] pt-2 font-montserratParagraph text-xs text-white md:text-sm ${error ? 'border-2 border-red-500' : ''}`}
78+
className={`${montserrat_paragraph.variable} rounded-lg bg-[#101122] pt-2 font-montserratParagraph text-sm text-white ${error ? 'border-2 border-red-500' : ''}`}
7979
>
8080
<div style={{ position: 'relative' }}>
8181
<pre

0 commit comments

Comments
 (0)