Skip to content

Commit 107ff7d

Browse files
KiteniteKitenite
authored
feat: use ai elements (#2880)
1 parent 2d01664 commit 107ff7d

File tree

13 files changed

+811
-83
lines changed

13 files changed

+811
-83
lines changed

‎apps/web/client/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"lucide-react": "^0.486.0",
8383
"mobx-react-lite": "^4.1.0",
8484
"motion": "^12.6.3",
85-
"next": ">=15.5.2",
85+
"next": ">=15.5.3",
8686
"next-intl": "^4.0.2",
8787
"next-themes": "^0.4.6",
8888
"octokit": "^5.0.3",

‎apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/markdown-renderer.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ import ReactMarkdown from 'react-markdown';
33
import remarkGfm from 'remark-gfm';
44

55
export const MarkdownRenderer = ({
6-
type,
76
messageId,
87
content,
98
className = '',
109
applied,
1110
isStream,
1211
}: {
13-
type: 'text' | 'reasoning';
1412
messageId: string;
1513
content: string;
1614
className?: string;

‎apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/index.tsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ChatMessage } from '@onlook/models';
2-
import { Icons } from '@onlook/ui/icons/index';
2+
import { Reasoning, ReasoningContent, ReasoningTrigger } from '@onlook/ui/ai-elements';
33
import { cn } from '@onlook/ui/utils';
44
import type { ToolUIPart } from 'ai';
55
import { observer } from 'mobx-react-lite';
@@ -24,7 +24,6 @@ export const MessageContent = observer(
2424
return (
2525
<MarkdownRenderer
2626
messageId={messageId}
27-
type="text"
2827
key={part.text}
2928
content={part.text}
3029
applied={applied}
@@ -45,19 +44,14 @@ export const MessageContent = observer(
4544
);
4645
} else if (part.type === 'reasoning') {
4746
return (
48-
<>
49-
<div className="px-2 flex items-center gap-2 text-foreground-tertiary">
50-
<Icons.Lightbulb className="w-4 h-4 flex-shrink-0" />
51-
<p className={cn(
52-
"text-small",
53-
isStream && isLastPart && "bg-gradient-to-l from-white/20 via-white/90 to-white/20 bg-[length:200%_100%] bg-clip-text text-transparent animate-shimmer filter drop-shadow-[0_0_10px_rgba(255,255,255,0.4)]"
54-
)}>Reasoning</p>
55-
</div>
56-
<pre key={`reasoning-${idx}`} className="text-xs text-foreground-tertiary my-2 px-3 py-2 border-l-1 overflow-y-auto whitespace-pre-wrap break-all max-h-48 flex flex-col-reverse">
57-
<div>{part.text}</div>
58-
</pre>
59-
</>
60-
);
47+
<Reasoning key={part.text} className={cn(
48+
"px-2 m-0 items-center gap-2 text-foreground-tertiary",
49+
isStream && isLastPart && "bg-gradient-to-l from-white/20 via-white/90 to-white/20 bg-[length:200%_100%] bg-clip-text text-transparent animate-shimmer filter drop-shadow-[0_0_10px_rgba(255,255,255,0.4)]"
50+
)} isStreaming={isStream}>
51+
<ReasoningTrigger />
52+
<ReasoningContent className="text-xs">{part.text}</ReasoningContent>
53+
</Reasoning>
54+
)
6155
}
6256
}).filter(Boolean);
6357

‎apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,6 @@ export const ToolCallDisplay = ({
109109
messageId={messageId}
110110
applied={applied}
111111
isStream={isStream}
112-
originalContent={codeContent}
113-
updatedContent={codeContent}
114112
branchId={branchId}
115113
/>
116114
);
@@ -137,8 +135,6 @@ export const ToolCallDisplay = ({
137135
messageId={messageId}
138136
applied={applied}
139137
isStream={isStream}
140-
originalContent={codeContent}
141-
updatedContent={codeContent}
142138
branchId={branchId}
143139
/>
144140
);
@@ -165,8 +161,6 @@ export const ToolCallDisplay = ({
165161
messageId={messageId}
166162
applied={applied}
167163
isStream={isStream}
168-
originalContent={codeContent}
169-
updatedContent={codeContent}
170164
branchId={branchId}
171165
/>
172166
);
@@ -193,8 +187,6 @@ export const ToolCallDisplay = ({
193187
messageId={messageId}
194188
applied={applied}
195189
isStream={isStream}
196-
originalContent={codeContent}
197-
updatedContent={codeContent}
198190
branchId={branchId}
199191
/>
200192
);
@@ -217,7 +209,11 @@ export const ToolCallDisplay = ({
217209
{todos.map((todo) => (
218210
<div className="flex items-center gap-2 text-sm" key={todo.content}>
219211
<div className="flex items-center justify-center w-4 h-4 min-w-4">
220-
{todo.status === 'completed' ? <Icons.SquareCheck className="w-4 h-4" /> : <Icons.Square className="w-4 h-4" />}
212+
{
213+
todo.status === 'completed' ?
214+
<Icons.SquareCheck className="w-4 h-4" /> :
215+
<Icons.Square className="w-4 h-4" />
216+
}
221217
</div>
222218
<p className={cn(
223219
todo.status === 'completed' ? 'line-through text-green-500' : '',

‎apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { type ChatMessage } from '@onlook/models';
2-
import { Icons } from '@onlook/ui/icons';
32
import { useChat } from '../../../../_hooks/use-chat';
43
import { ChatInput } from '../chat-input';
54
import { ChatMessages } from '../chat-messages';
@@ -9,14 +8,12 @@ interface ChatTabContentProps {
98
conversationId: string;
109
projectId: string;
1110
initialMessages: ChatMessage[];
12-
isLoadingMessages: boolean;
1311
}
1412

1513
export const ChatTabContent = ({
1614
conversationId,
1715
projectId,
1816
initialMessages,
19-
isLoadingMessages,
2017
}: ChatTabContentProps) => {
2118
const { isStreaming, sendMessage, editMessage, messages, error, stop, suggestions } = useChat({
2219
conversationId,
@@ -27,17 +24,12 @@ export const ChatTabContent = ({
2724
return (
2825
<div className="flex flex-col h-full justify-end gap-2 pt-2">
2926
<div className="h-full flex-1 overflow-y-auto">
30-
{isLoadingMessages ? (
31-
<div className="flex-1 flex items-center justify-center w-full h-full text-foreground-secondary">
32-
<Icons.LoadingSpinner className="animate-spin mr-2" />
33-
<p>Loading messages...</p>
34-
</div>
35-
) : (<ChatMessages
27+
<ChatMessages
3628
messages={messages}
3729
isStreaming={isStreaming}
3830
error={error}
3931
onEditMessage={editMessage}
40-
/>)}
32+
/>
4133
</div>
4234
<ErrorSection isStreaming={isStreaming} onSendMessage={sendMessage} />
4335
<ChatInput

‎apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import { useEditorEngine } from '@/components/store/editor';
22
import { api } from '@/trpc/react';
3+
import { CodeBlock } from '@onlook/ui/ai-elements';
34
import { Button } from '@onlook/ui/button';
45
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@onlook/ui/collapsible';
56
import { Icons } from '@onlook/ui/icons';
67
import { cn, getTruncatedFileName } from '@onlook/ui/utils';
78
import { AnimatePresence, motion } from 'framer-motion';
89
import { observer } from 'mobx-react-lite';
910
import { useState } from 'react';
10-
import { CodeBlock } from './code-block';
1111

1212
interface CollapsibleCodeBlockProps {
1313
path: string;
1414
content: string;
1515
messageId: string;
16-
originalContent: string;
17-
updatedContent: string;
1816
applied: boolean;
1917
isStream?: boolean;
2018
branchId?: string;
@@ -23,9 +21,6 @@ interface CollapsibleCodeBlockProps {
2321
export const CollapsibleCodeBlock = observer(({
2422
path,
2523
content,
26-
messageId,
27-
updatedContent,
28-
applied,
2924
isStream,
3025
branchId,
3126
}: CollapsibleCodeBlockProps) => {
@@ -35,7 +30,7 @@ export const CollapsibleCodeBlock = observer(({
3530
const [copied, setCopied] = useState(false);
3631

3732
const copyToClipboard = () => {
38-
navigator.clipboard.writeText(updatedContent);
33+
navigator.clipboard.writeText(content);
3934
setCopied(true);
4035
setTimeout(() => setCopied(false), 2000);
4136
};
@@ -106,26 +101,25 @@ export const CollapsibleCodeBlock = observer(({
106101
style={{ overflow: 'hidden' }}
107102
>
108103
<div className="border-t">
109-
<CodeBlock code={updatedContent} />
110-
<div className="flex justify-end gap-1.5 p-1 border-t">
111-
<Button
112-
size="sm"
113-
variant="ghost"
114-
className="h-7 px-2 text-foreground-secondary hover:text-foreground font-sans select-none"
115-
onClick={copyToClipboard}
116-
>
117-
{copied ? (
118-
<>
119-
<Icons.Check className="h-4 w-4 mr-2" />
120-
Copied
121-
</>
122-
) : (
123-
<>
124-
<Icons.Copy className="h-4 w-4 mr-2" />
125-
Copy
126-
</>
127-
)}
128-
</Button>
104+
<CodeBlock code={content} language="jsx" className="text-xs overflow-x-auto" />
105+
<div className="flex justify-end gap-1.5 p-1 border-t"> <Button
106+
size="sm"
107+
variant="ghost"
108+
className="h-7 px-2 text-foreground-secondary hover:text-foreground font-sans select-none"
109+
onClick={copyToClipboard}
110+
>
111+
{copied ? (
112+
<>
113+
<Icons.Check className="h-4 w-4 mr-2" />
114+
Copied
115+
</>
116+
) : (
117+
<>
118+
<Icons.Copy className="h-4 w-4 mr-2" />
119+
Copy
120+
</>
121+
)}
122+
</Button>
129123
</div>
130124
</div>
131125
</motion.div>

‎apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { api } from '@/trpc/react';
2+
import { Icons } from '@onlook/ui/icons/index';
23
import { ChatTabContent } from './chat-tab-content';
34

45
interface ChatTabProps {
@@ -7,19 +8,27 @@ interface ChatTabProps {
78
}
89

910
export const ChatTab = ({ conversationId, projectId }: ChatTabProps) => {
10-
const { data: initialMessages = [], isLoading } = api.chat.message.getAll.useQuery(
11+
const { data: initialMessages, isLoading } = api.chat.message.getAll.useQuery(
1112
{ conversationId: conversationId },
1213
{ enabled: !!conversationId },
1314
);
1415

16+
if (!initialMessages || isLoading) {
17+
return (
18+
<div className="flex-1 flex items-center justify-center w-full h-full text-foreground-secondary" >
19+
<Icons.LoadingSpinner className="animate-spin mr-2" />
20+
<p>Loading messages...</p>
21+
</div >
22+
);
23+
}
24+
1525
return (
1626
<ChatTabContent
1727
// Used to force re-render the use-chat hook when the conversationId changes
1828
key={conversationId}
1929
conversationId={conversationId}
2030
projectId={projectId}
2131
initialMessages={initialMessages}
22-
isLoadingMessages={isLoading}
2332
/>
2433
);
2534
};

0 commit comments

Comments
 (0)