Skip to content

Commit 3118483

Browse files
bracesproulbracesproul
committed
better responsive design
1 parent 925f7d5 commit 3118483

File tree

7 files changed

+61
-47
lines changed

7 files changed

+61
-47
lines changed

‎frontend/app/components/Primitives.tsx

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -34,37 +34,46 @@ export const MyThread: FC<MyThreadProps> = (props: MyThreadProps) => {
3434
useRouterLogicUI();
3535

3636
return (
37-
<ThreadPrimitive.Root className="flex flex-col h-full relative">
38-
<ThreadPrimitive.Viewport
39-
className={cn(
40-
"flex-1 overflow-y-auto scroll-smooth bg-inherit px-4 pt-8 transition-all duration-300 ease-in-out w-full",
41-
isEmpty ? "pb-[50vh]" : "pb-32",
42-
)}
43-
>
44-
<ThreadPrimitive.Messages
45-
components={{
46-
UserMessage: MyUserMessage,
47-
AssistantMessage: MyAssistantMessage,
48-
}}
49-
/>
50-
</ThreadPrimitive.Viewport>
51-
<MyThreadScrollToBottom />
52-
{isEmpty ? (
53-
<div className="absolute left-1/2 transform -translate-x-1/2 max-w-2xl top-1/2 -translate-y-[70%]">
54-
<div className="flex flex-row gap-1 items-center justify-center mb-[24px]">
55-
<p className="text-2xl">Chat LangChain</p>
56-
<NextImage
57-
src="/images/lc_logo.jpg"
58-
className="rounded-3xl"
59-
alt="LangChain Logo"
60-
width={40}
61-
height={40}
37+
<ThreadPrimitive.Root className="flex flex-col h-full">
38+
{!isEmpty ? (
39+
<ThreadPrimitive.Viewport
40+
className={cn(
41+
"flex-1 overflow-y-auto scroll-smooth bg-inherit transition-all duration-300 ease-in-out w-full",
42+
isEmpty ? "pb-[30vh] sm:pb-[50vh]" : "pb-32 sm:pb-24",
43+
"pr-3 md:pr-6",
44+
"scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent", // Add custom scrollbar styling
45+
)}
46+
>
47+
<div className="md:ml-24 ml-3 mt-2">
48+
<ThreadPrimitive.Messages
49+
components={{
50+
UserMessage: MyUserMessage,
51+
AssistantMessage: MyAssistantMessage,
52+
}}
6253
/>
6354
</div>
64-
<div className="mb-[110px] ml-[30px]">
65-
<SuggestedQuestions />
55+
</ThreadPrimitive.Viewport>
56+
) : null}
57+
<MyThreadScrollToBottom />
58+
{isEmpty ? (
59+
<div className="flex items-center justify-center flex-grow my-auto">
60+
<div className="flex flex-col items-center">
61+
<div className="flex flex-row gap-1 items-center justify-center mb-4 sm:mb-[24px]">
62+
<p className="text-xl sm:text-2xl">Chat LangChain</p>
63+
<NextImage
64+
src="/images/lc_logo.jpg"
65+
className="rounded-3xl"
66+
alt="LangChain Logo"
67+
width={32}
68+
height={32}
69+
style={{ width: "auto", height: "auto" }}
70+
/>
71+
</div>
72+
<div className="md:mb-8">
73+
<SuggestedQuestions />
74+
</div>
75+
<MyComposer messages={props.messages} />
6676
</div>
67-
<MyComposer messages={props.messages} />
6877
</div>
6978
) : (
7079
<MyComposer messages={props.messages} />
@@ -97,9 +106,9 @@ const MyComposer: FC<MyComposerProps> = (props: MyComposerProps) => {
97106
return (
98107
<ComposerPrimitive.Root
99108
className={cn(
100-
"focus-within:border-aui-ring/20 flex w-full items-center rounded-lg border px-2.5 py-2.5 shadow-sm transition-all duration-300 ease-in-out bg-[#282828] border-gray-600",
101-
"absolute transform bottom-4",
102-
!isEmpty ? "left-[43%] -translate-x-1/2 max-w-3xl" : "",
109+
"focus-within:border-aui-ring/20 flex w-full items-center md:justify-left justify-center rounded-lg border px-2.5 py-2.5 shadow-sm transition-all duration-300 ease-in-out bg-[#282828] border-gray-600",
110+
isEmpty ? "" : "md:ml-24 ml-3 mb-6",
111+
isEmpty ? "w-full" : "md:w-[70%] w-full max-w-[832px]",
103112
)}
104113
>
105114
<ComposerPrimitive.Input
@@ -138,8 +147,8 @@ const MyComposer: FC<MyComposerProps> = (props: MyComposerProps) => {
138147

139148
const MyUserMessage: FC = () => {
140149
return (
141-
<MessagePrimitive.Root className="w-full max-w-5xl pt-4 mx-auto">
142-
<div className="bg-inherit text-white max-w-3xl break-words rounded-3xl px-5 pt-2.5 mb-[-25px] text-4xl font-light">
150+
<MessagePrimitive.Root className="pt-2 sm:pt-4 w-full max-w-4xl mr-auto">
151+
<div className="bg-inherit text-white break-words rounded-2xl sm:rounded-3xl px-3 md:px-5 pt-2 md:pt-2.5 mb-[-15px] sm:mb-[-25px] text-2xl sm:text-4xl font-light">
143152
<MessagePrimitive.Content />
144153
</div>
145154
</MessagePrimitive.Root>
@@ -155,11 +164,11 @@ const MyAssistantMessage: FC = () => {
155164
!isLast;
156165

157166
return (
158-
<MessagePrimitive.Root className="relative flex w-full max-w-5xl py-4 mx-auto">
159-
<div className="ml-6 bg-inherit text-white max-w-3xl break-words leading-7">
167+
<MessagePrimitive.Root className="flex w-full max-w-4xl md:py-4 py-2 mr-auto">
168+
<div className="ml-2 sm:ml-6 bg-inherit text-white max-w-full sm:max-w-3xl break-words leading-6 sm:leading-7">
160169
<MessagePrimitive.Content components={{ Text: MarkdownText }} />
161170
{shouldRenderMessageBreak ? (
162-
<hr className="relative left-1/2 -translate-x-[37.25%] w-[45vw] mt-6 border-gray-600" />
171+
<hr className="relative left-1/2 -translate-x-1/2 w-[90vw] sm:w-[45vw] mt-4 sm:mt-6 border-gray-600" />
163172
) : null}
164173
</div>
165174
</MessagePrimitive.Root>

‎frontend/app/components/SuggestedQuestions.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ export function SuggestedQuestions() {
1919
};
2020

2121
return (
22-
<div className="w-full flex flex-wrap gap-2">
22+
<div className="w-full grid grid-cols-1 sm:grid-cols-2 gap-4">
2323
{suggestedQuestions.map((question, idx) => (
2424
<Card
2525
onClick={() => handleSend(question)}
2626
key={`suggested-question-${idx}`}
27-
className="w-[300px] h-[75px] bg-[#282828] border-gray-600 cursor-pointer transition-colors ease-in hover:bg-[#2b2b2b]"
27+
className="w-full bg-[#282828] border-gray-600 cursor-pointer transition-colors ease-in hover:bg-[#2b2b2b]"
2828
>
29-
<CardTitle className="mx-auto p-5 text-gray-200 font-normal">
29+
<CardTitle className="p-4 text-gray-200 font-normal text-sm">
3030
{question}
3131
</CardTitle>
3232
</Card>

‎frontend/app/components/ThreadHistory.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,11 @@ function ThreadsList(props: ThreadsListProps) {
9999

100100
export function ThreadHistory(props: ThreadHistoryProps) {
101101
const groupedThreads = groupThreads(dummyThreads);
102-
103102
return (
104103
<span>
105104
{/* Tablet & up */}
106105
<div className="hidden md:flex flex-col w-[260px] h-full">
107-
<div className="flex-grow border-l-[1px] border-[#393939] my-6">
106+
<div className="flex-grow border-r-[1px] border-[#393939] my-6">
108107
<div className="flex flex-row items-center justify-between border-b-[1px] border-[#393939] pt-3 px-2 mx-4 -mt-4 text-gray-200">
109108
<p className="text-lg font-medium">Chat History</p>
110109
<TooltipIconButton
@@ -119,9 +118,9 @@ export function ThreadHistory(props: ThreadHistoryProps) {
119118
</div>
120119
</div>
121120
{/* Mobile */}
122-
<span className="md:hidden flex flex-row gap-2 mt-2 mr-2">
121+
<span className="md:hidden flex flex-row gap-2 mt-2 ml-2">
123122
<Sheet>
124-
<SheetTrigger>
123+
<SheetTrigger asChild>
125124
<TooltipIconButton
126125
tooltip="New chat"
127126
variant="ghost"

‎frontend/app/new/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@ export default function ContentComposerChatInterface(): React.ReactElement {
5858

5959
return (
6060
<div className="h-full flex flex-row">
61+
<div>
62+
<ThreadHistory assistantId={assistantId} />
63+
</div>
6164
<div className="mr-auto w-full">
6265
<AssistantRuntimeProvider runtime={runtime}>
6366
<MyThread messages={messages} />
6467
</AssistantRuntimeProvider>
6568
</div>
66-
<div className="ml-auto">
67-
<ThreadHistory assistantId={assistantId} />
68-
</div>
6969
<Toaster />
7070
</div>
7171
);

‎frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"@types/js-cookie": "^3.0.6",
7070
"@types/react-syntax-highlighter": "^15.5.13",
7171
"prettier": "^3.0.3",
72+
"tailwind-scrollbar": "^3.1.0",
7273
"typescript": "5.1.6",
7374
"weaviate-ts-client": "^1.5.0"
7475
}

‎frontend/tailwind.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,6 @@ const config: Config = {
6363
},
6464
},
6565
},
66-
plugins: [require("tailwindcss-animate")],
66+
plugins: [require("tailwind-scrollbar"), require("tailwindcss-animate")],
6767
};
6868
export default config;

‎frontend/yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5676,6 +5676,11 @@ tailwind-merge@^2.5.3:
56765676
resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.3.tgz#579546e14ddda24462e0303acd8798c50f5511bb"
56775677
integrity sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==
56785678

5679+
tailwind-scrollbar@^3.1.0:
5680+
version "3.1.0"
5681+
resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz#ff7596407b6da5209261d8ff03860ab9206a59e3"
5682+
integrity sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==
5683+
56795684
tailwindcss-animate@^1.0.7:
56805685
version "1.0.7"
56815686
resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"

0 commit comments

Comments
 (0)