Skip to content

Commit 35c6c74

Browse files
bracesproulbracesproul
committed
cr
1 parent ecd76cb commit 35c6c74

File tree

4 files changed

+34
-61
lines changed

4 files changed

+34
-61
lines changed

‎frontend/app/components/GeneratingQuestionsToolUI.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,8 @@ export const useGeneratingQuestionsUI = () =>
7070
<Globe className="w-5 h-5" />
7171
<p className="text-xl">Generated Questions & Sources</p>
7272
</span>
73-
<div className="relative left-1/2 -translate-x-[42.75%] w-screen max-w-[70vw] mb-10">
73+
<div className="mb-10">
7474
<div className="flex items-center justify-center gap-2">
75-
<div className="flex flex-row gap-3 items-center justify-center"></div>
7675
{(input.args.questions as Question[]).map(
7776
(question, questionIndex) => (
7877
<QuestionCard

‎frontend/app/components/Primitives.tsx

Lines changed: 9 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,12 @@ import {
44
ComposerPrimitive,
55
MessagePrimitive,
66
ThreadPrimitive,
7-
useComposerStore,
87
useMessage,
9-
useMessageStore,
108
useThreadRuntime,
119
} from "@assistant-ui/react";
1210
import { type FC } from "react";
1311
import NextImage from "next/image";
1412

15-
import { Button } from "./ui/button";
1613
import { ArrowDownIcon, SendHorizontalIcon } from "lucide-react";
1714
import { MarkdownText } from "./ui/assistant-ui/markdown-text";
1815
import { TooltipIconButton } from "./ui/assistant-ui/tooltip-icon-button";
@@ -47,15 +44,14 @@ export const MyThread: FC<MyThreadProps> = (props: MyThreadProps) => {
4744
<ThreadPrimitive.Messages
4845
components={{
4946
UserMessage: MyUserMessage,
50-
EditComposer: MyEditComposer,
5147
AssistantMessage: MyAssistantMessage,
5248
}}
5349
/>
5450
</ThreadPrimitive.Viewport>
5551
<MyThreadScrollToBottom />
5652
{isEmpty ? (
57-
<div className="absolute left-1/2 transform -translate-x-1/2 max-w-2xl top-1/2 -translate-y-1/2">
58-
<div className="flex flex-row gap-1 items-center justify-center mb-[50px]">
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]">
5955
<p className="text-2xl">Chat LangChain</p>
6056
<NextImage
6157
src="/images/lc_logo.jpg"
@@ -65,7 +61,7 @@ export const MyThread: FC<MyThreadProps> = (props: MyThreadProps) => {
6561
height={40}
6662
/>
6763
</div>
68-
<div className="mb-[350px] ml-[30px]">
64+
<div className="mb-[110px] ml-[30px]">
6965
<SuggestedQuestions />
7066
</div>
7167
<MyComposer messages={props.messages} />
@@ -102,8 +98,8 @@ const MyComposer: FC<MyComposerProps> = (props: MyComposerProps) => {
10298
<ComposerPrimitive.Root
10399
className={cn(
104100
"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",
105-
"absolute left-1/2 transform -translate-x-1/2 max-w-2xl",
106-
isEmpty ? "top-1/2 -translate-y-1/2" : "bottom-4",
101+
"absolute transform bottom-4",
102+
!isEmpty ? "left-[43%] -translate-x-1/2 max-w-3xl" : "",
107103
)}
108104
>
109105
<ComposerPrimitive.Input
@@ -142,53 +138,14 @@ const MyComposer: FC<MyComposerProps> = (props: MyComposerProps) => {
142138

143139
const MyUserMessage: FC = () => {
144140
return (
145-
<MessagePrimitive.Root className="w-full max-w-2xl pt-4 mx-auto">
146-
<div className="bg-inherit text-white max-w-xl break-words rounded-3xl px-5 pt-2.5 mb-[-25px] text-4xl font-light">
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">
147143
<MessagePrimitive.Content />
148144
</div>
149145
</MessagePrimitive.Root>
150146
);
151147
};
152148

153-
const MyComposerSend = () => {
154-
const messageStore = useMessageStore();
155-
const composerStore = useComposerStore();
156-
const threadRuntime = useThreadRuntime();
157-
158-
const handleSend = () => {
159-
const composerState = composerStore.getState();
160-
const { parentId, message } = messageStore.getState();
161-
162-
threadRuntime.append({
163-
parentId,
164-
role: message.role,
165-
content: [{ type: "text", text: composerState.text }],
166-
});
167-
composerState.cancel();
168-
};
169-
170-
return <Button onClick={handleSend}>Save</Button>;
171-
};
172-
173-
const MyEditComposer: FC = () => {
174-
return (
175-
<ComposerPrimitive.Root className="bg-muted my-4 flex w-full max-w-2xl flex-col gap-2 rounded-xl">
176-
<ComposerPrimitive.Input
177-
className="text-foreground flex h-8 w-full resize-none border-none bg-transparent p-4 pb-0 outline-none focus:ring-0"
178-
// Don't submit on `Enter`, instead add a newline.
179-
submitOnEnter={false}
180-
/>
181-
182-
<div className="mx-3 mb-3 flex items-center justify-center gap-2 self-end">
183-
<ComposerPrimitive.Cancel asChild>
184-
<Button variant="ghost">Cancel</Button>
185-
</ComposerPrimitive.Cancel>
186-
<MyComposerSend />
187-
</div>
188-
</ComposerPrimitive.Root>
189-
);
190-
};
191-
192149
const MyAssistantMessage: FC = () => {
193150
const threadRuntime = useThreadRuntime();
194151
const threadState = threadRuntime.getState();
@@ -198,8 +155,8 @@ const MyAssistantMessage: FC = () => {
198155
!isLast;
199156

200157
return (
201-
<MessagePrimitive.Root className="relative flex w-full max-w-2xl py-4 mx-auto">
202-
<div className="ml-6 bg-inherit text-white max-w-xl break-words leading-7">
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">
203160
<MessagePrimitive.Content components={{ Text: MarkdownText }} />
204161
{shouldRenderMessageBreak ? (
205162
<hr className="relative left-1/2 -translate-x-[37.25%] w-[45vw] mt-6 border-gray-600" />

‎frontend/app/components/ProgressToolUI.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ export const useProgressToolUI = () =>
4444
const { text, progress } = stepToProgressFields(input.args.step);
4545

4646
return (
47-
<div className="flex flex-row w-full min-w-[600px] items-center justify-start gap-3 pb-4 ml-[-5px]">
47+
<div className="flex flex-row w-[500px] items-center justify-start gap-3 pb-4 ml-[-5px] mt-[16px]">
4848
<Progress
4949
value={progress}
5050
indicatorClassName="bg-gray-700"
51-
className="w-[60%]"
51+
className="w-[375px]"
5252
/>
5353
<p
5454
className={cn(

‎frontend/app/components/SelectedDocumentsToolUI.tsx

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
TooltipContent,
1515
Tooltip,
1616
} from "./ui/tooltip";
17+
import { useState } from "react";
1718

1819
type Document = {
1920
page_content: string;
@@ -43,16 +44,32 @@ const DocumentCard = ({ document }: { document: Document }) => {
4344
};
4445

4546
const DocumentCardTooltip = ({ document }: { document: Document }) => {
47+
const [isOpen, setIsOpen] = useState(true);
48+
4649
const description =
4750
document.metadata.description && document.metadata.description !== ""
4851
? document.metadata.description
4952
: document.page_content.slice(0, 250);
5053

5154
return (
5255
<TooltipProvider>
53-
<Tooltip defaultOpen delayDuration={0}>
56+
<Tooltip
57+
defaultOpen
58+
delayDuration={0}
59+
open={isOpen}
60+
onOpenChange={setIsOpen}
61+
>
5462
<TooltipTrigger asChild>
55-
<div>
63+
<div
64+
onMouseEnter={() => {
65+
console.log("Mouse enter");
66+
setIsOpen(true);
67+
}}
68+
onMouseLeave={() => {
69+
console.log("Mouse leave");
70+
setIsOpen(false);
71+
}}
72+
>
5673
<DocumentCard document={document} />
5774
</div>
5875
</TooltipTrigger>
@@ -98,14 +115,14 @@ export const useSelectedDocumentsUI = () =>
98115
opts={{
99116
align: "start",
100117
}}
101-
className="relative left-1/2 -translate-x-[39%] w-screen max-w-[43vw] mb-10"
118+
className="mb-10 w-fit max-w-3xl"
102119
>
103-
<CarouselContent>
120+
<CarouselContent className="-ml-[0px]">
104121
{(input.args.documents as Document[]).map(
105122
(document, docIndex) => (
106123
<CarouselItem
107124
key={`final-document-${docIndex}`}
108-
className="xl:basis-[38%] 2xl:basis-[27%] md:basis-1/2"
125+
className="pl-[0px] md:basis-[30%] lg:basis-[28%]"
109126
>
110127
<DocumentCardTooltip document={document} />
111128
</CarouselItem>

0 commit comments

Comments
 (0)