feat: use ai elements #2880
feat: use ai elements #2880
Conversation
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
Warning Rate limit exceeded@Kitenite has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 10 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (7)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughRemoves ChatTabContent’s isLoadingMessages prop and shifts loading UI to ChatTab. Refactors CollapsibleCodeBlock to drop originalContent/updatedContent and use a new shared CodeBlock from @onlook/ui/ai-elements. Updates tool-call display to match the new API. Adds ai-elements exports and code-block components to the UI package with required dependencies. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant ChatTab as ChatTab (page)
participant Query as useQuery
participant Content as ChatTabContent
participant Messages as ChatMessages
User->>ChatTab: Open chat tab
ChatTab->>Query: fetch initialMessages
alt loading or no data
ChatTab-->>User: Show spinner "Loading messages..."
else loaded
ChatTab->>Content: render with initialMessages
Content->>Messages: render message list
Messages-->>User: Messages displayed
end
sequenceDiagram
autonumber
participant TCD as ToolCallDisplay
participant CCB as CollapsibleCodeBlock
participant UI as CodeBlock (ai-elements)
participant Clipboard as navigator.clipboard
TCD->>CCB: { path, content, isStream, branchId }
CCB->>UI: render code (language="jsx")
User->>CCB: Click "Copy"
CCB->>Clipboard: writeText(content)
Clipboard-->>CCB: success/failure
CCB-->>User: copied state / error
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| </> | ||
| )} | ||
| </Button> | ||
| <CodeBlock code={content} language="jsx" className="text-xs overflow-x-auto" /> |
There was a problem hiding this comment.
The language="jsx" parameter is hardcoded in the CodeBlock component, which may not accurately represent all possible file types. Consider extracting the language from the file extension or determining it based on content analysis to ensure proper syntax highlighting. This would make the component more versatile when displaying different types of code files (Python, Go, etc.) without requiring manual specification.
| <CodeBlock code={content} language="jsx" className="text-xs overflow-x-auto" /> | |
| <CodeBlock code={content} language={getLanguageFromFileName(fileName) || "text"} className="text-xs overflow-x-auto" /> |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
| @@ -0,0 +1 @@ | |||
| export * from './ai-elements'; | |||
There was a problem hiding this comment.
The export statement in ai-elements.tsx creates a circular reference by exporting from itself ('./ai-elements'). This will cause module resolution issues at runtime. The correct approach would be to export from the index file within the directory:
export * from './ai-elements/index';Alternatively, since this file appears to be a barrel file, it could directly export the components:
export * from './ai-elements/code-block';| export * from './ai-elements'; | |
| export * from './ai-elements/index'; |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
| } catch (error) { | ||
| onError?.(error as Error); |
There was a problem hiding this comment.
Consider handling non-Error objects in the catch block. The current cast assumes all errors are of type Error, but JavaScript can throw any value. A more robust approach would be:
catch (error) {
onError?.(error instanceof Error ? error : new Error(String(error)));
}This ensures the onError callback always receives a proper Error object, improving error handling consistency.
| } catch (error) { | |
| onError?.(error as Error); | |
| } catch (error) { | |
| onError?.(error instanceof Error ? error : new Error(String(error))); | |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (9)
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsx (1)
2-2: Prefer path alias over deep relative import.Replace the deep relative '../../../../_hooks/use-chat' with the @/* alias per repo guidelines to reduce fragility.
Example:
-import { useChat } from '../../../../_hooks/use-chat'; +import { useChat } from '@/app/project/[id]/_components/right-panel/_hooks/use-chat';packages/ui/package.json (1)
36-43: Consider moving react/react-dom to peerDependencies.For a UI library, declaring react and react-dom as peers prevents duplicate React versions in consuming apps.
Proposed change:
"devDependencies": { - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^18.3.1", + "react-dom": "^18.3.1", "typescript": "^5.5.4" }, + "peerDependencies": { + "react": "^18.2.0 || ^19.0.0-0", + "react-dom": "^18.2.0 || ^19.0.0-0" + },apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsx (2)
16-23: Internationalize loading text per app guidelines.Avoid hardcoded “Loading messages...”. Use next-intl.
Apply:
-import { Icons } from '@onlook/ui/icons/index'; +import { Icons } from '@onlook/ui/icons/index'; +import { useTranslations } from 'next-intl'; export const ChatTab = ({ conversationId, projectId }: ChatTabProps) => { - const { data: initialMessages, isLoading } = api.chat.message.getAll.useQuery( + const t = useTranslations(); + const { data: initialMessages, isLoading } = api.chat.message.getAll.useQuery( { conversationId: conversationId }, { enabled: !!conversationId }, ); if (!initialMessages || isLoading) { return ( <div className="flex-1 flex items-center justify-center w-full h-full text-foreground-secondary" > <Icons.LoadingSpinner className="animate-spin mr-2" /> - <p>Loading messages...</p> + <p>{t('editor.panels.edit.tabs.chat.loadingMessages')}</p> </div > ); }Ensure the key 'editor.panels.edit.tabs.chat.loadingMessages' exists in your messages.
2-2: Minor: shorten icon import path.You can import from '@onlook/ui/icons' (export map) instead of '/index'.
-import { Icons } from '@onlook/ui/icons/index'; +import { Icons } from '@onlook/ui/icons';apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx (3)
3-3: Import the copy button from the new AI elements too.Use the shared CodeBlockCopyButton to avoid duplicating clipboard logic.
-import { CodeBlock } from '@onlook/ui/ai-elements'; +import { CodeBlock, CodeBlockCopyButton } from '@onlook/ui/ai-elements';
33-36: Harden clipboard copy and avoid direct navigator usage here.Either handle errors/await or delegate to CodeBlockCopyButton.
- const copyToClipboard = () => { - navigator.clipboard.writeText(content); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }; + const copyToClipboard = async () => { + try { + await navigator.clipboard.writeText(content); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch { + // no-op; CodeBlockCopyButton is preferred for consistent handling + } + };
104-123: Use CodeBlockCopyButton and i18n for “Copy/Copied”; also derive language from file extension.Removes duplicated logic, adds error handling, and aligns with intl guidelines.
-<CodeBlock code={content} language="jsx" className="text-xs overflow-x-auto" /> -<div className="flex justify-end gap-1.5 p-1 border-t"> <Button - size="sm" - variant="ghost" - className="h-7 px-2 text-foreground-secondary hover:text-foreground font-sans select-none" - onClick={copyToClipboard} -> - {copied ? ( - <> - <Icons.Check className="h-4 w-4 mr-2" /> - Copied - </> - ) : ( - <> - <Icons.Copy className="h-4 w-4 mr-2" /> - Copy - </> - )} -</Button> -</div> +<CodeBlock code={content} language={getLanguageFromPath(path)} className="text-xs overflow-x-auto"> + <CodeBlockCopyButton aria-label="copy-code" /> +</CodeBlock> +<div className="flex justify-end gap-1.5 p-1 border-t"> + <Button + size="sm" + variant="ghost" + className="h-7 px-2 text-foreground-secondary hover:text-foreground font-sans select-none" + onClick={copyToClipboard} + aria-live="polite" + > + {copied ? ( + <> + <Icons.Check className="h-4 w-4 mr-2" /> + {/* t('common.copied') */} + Copied + </> + ) : ( + <> + <Icons.Copy className="h-4 w-4 mr-2" /> + {/* t('common.copy') */} + Copy + </> + )} + </Button> +</div>Additional helper (place near the top of this file):
function getLanguageFromPath(p: string): string { const ext = p.split('.').pop()?.toLowerCase(); switch (ext) { case 'ts': return 'typescript'; case 'tsx': return 'tsx'; case 'js': return 'javascript'; case 'jsx': return 'jsx'; case 'json': return 'json'; case 'css': return 'css'; case 'html': return 'html'; case 'sh': case 'bash': return 'bash'; default: return 'plaintext'; } }packages/ui/src/components/ai-elements/code-block.tsx (2)
26-95: Optional: reduce bundle impact of react-syntax-highlighter.This library can be heavy. Consider dynamic import or language-specific builds if bundle size becomes an issue.
If needed later, we can wire a lazy CodeBlock with next/dynamic and a loading fallback.
111-128: Avoid timer leak; clear timeout on unmount.Store the timer id and clean up to prevent setState after unmount.
-import { createContext, useContext, useState } from 'react'; +import { createContext, useContext, useEffect, useRef, useState } from 'react'; @@ - const [isCopied, setIsCopied] = useState(false); + const [isCopied, setIsCopied] = useState(false); + const timerRef = useRef<number | null>(null); @@ - setIsCopied(true); - onCopy?.(); - setTimeout(() => setIsCopied(false), timeout); + setIsCopied(true); + onCopy?.(); + timerRef.current = window.setTimeout(() => setIsCopied(false), timeout); @@ }; + + useEffect(() => { + return () => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + }; + }, [timeout]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (8)
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsx(1 hunks)apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsx(1 hunks)apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx(3 hunks)apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsx(2 hunks)packages/ui/package.json(4 hunks)packages/ui/src/components/ai-elements.tsx(1 hunks)packages/ui/src/components/ai-elements/code-block.tsx(1 hunks)packages/ui/src/components/ai-elements/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Do not use the any type unless necessary
Files:
packages/ui/src/components/ai-elements/index.tsxpackages/ui/src/components/ai-elements.tsxpackages/ui/src/components/ai-elements/code-block.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx
{apps,packages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Avoid using the any type unless absolutely necessary
Files:
packages/ui/src/components/ai-elements/index.tsxpackages/ui/src/components/ai-elements.tsxpackages/ui/src/components/ai-elements/code-block.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx
apps/web/client/src/app/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
apps/web/client/src/app/**/*.tsx: Default to Server Components; add 'use client' when using events, state/effects, browser APIs, or client‑only libraries
Do not use process.env in client code; import env from @/env insteadAvoid hardcoded user-facing text; use next-intl messages/hooks
Files:
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx
apps/web/client/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/web/client/src/**/*.{ts,tsx}: Use path aliases @/* and ~/* for imports that map to apps/web/client/src/*
Avoid hardcoded user-facing text; use next-intl messages/hooks insteadUse path aliases @/* and ~/* for imports mapping to src/*
Files:
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx
apps/web/client/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
apps/web/client/src/**/*.tsx: Create MobX store instances with useState(() => new Store()) for stable references across renders
Keep the active MobX store in a useRef and perform async cleanup with setTimeout(() => storeRef.current?.clear(), 0) to avoid route-change races
Avoid useMemo for creating MobX store instances
Avoid putting the MobX store instance in effect dependency arrays if it causes loops; split concerns by domain
apps/web/client/src/**/*.tsx: Create MobX store instances with useState(() => new Store()) for stable identities across renders
Keep the active MobX store in a useRef and clean up asynchronously with setTimeout(() => storeRef.current?.clear(), 0)
Do not use useMemo to create MobX stores
Avoid placing MobX store instances in effect dependency arrays if it causes loops; split concerns instead
observer components must be client components; place a single client boundary at the feature entry; child observers need not repeat 'use client'
Files:
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx
apps/web/client/src/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Default to Server Components; add 'use client' only when using events, state/effects, browser APIs, or client-only libs
Files:
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsxapps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx
🧠 Learnings (4)
📚 Learning: 2025-09-16T19:22:52.461Z
Learnt from: CR
PR: onlook-dev/onlook#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-16T19:22:52.461Z
Learning: Applies to apps/web/client/src/**/*.{ts,tsx} : Use path aliases @/* and ~/* for imports mapping to src/*
Applied to files:
packages/ui/package.json
📚 Learning: 2025-09-14T01:44:21.209Z
Learnt from: CR
PR: onlook-dev/onlook#0
File: AGENTS.md:0-0
Timestamp: 2025-09-14T01:44:21.209Z
Learning: Applies to apps/web/client/src/**/*.{ts,tsx} : Use path aliases @/* and ~/* for imports that map to apps/web/client/src/*
Applied to files:
packages/ui/package.json
📚 Learning: 2025-09-16T19:22:52.461Z
Learnt from: CR
PR: onlook-dev/onlook#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-16T19:22:52.461Z
Learning: Applies to apps/web/client/src/app/**/*.tsx : Avoid hardcoded user-facing text; use next-intl messages/hooks
Applied to files:
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsx
📚 Learning: 2025-09-14T01:44:21.209Z
Learnt from: CR
PR: onlook-dev/onlook#0
File: AGENTS.md:0-0
Timestamp: 2025-09-14T01:44:21.209Z
Learning: Applies to apps/web/client/src/**/*.{ts,tsx} : Avoid hardcoded user-facing text; use next-intl messages/hooks instead
Applied to files:
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsx
🧬 Code graph analysis (3)
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsx (2)
apps/web/client/src/trpc/react.tsx (1)
api(23-23)packages/ui/src/components/icons/index.tsx (1)
Icons(138-3667)
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsx (1)
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/index.tsx (1)
ChatMessages(25-103)
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx (2)
packages/ui/src/components/ai-elements/code-block.tsx (1)
CodeBlock(26-95)apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/code-block.tsx (1)
CodeBlock(7-39)
🔇 Additional comments (8)
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsx (1)
27-32: LGTM on lifting loading out of ChatTabContent.Rendering ChatMessages unconditionally here makes sense now that the tab handles loading state.
Please confirm ChatTab always passes a defined initialMessages (or gates rendering) to avoid a brief empty render.
packages/ui/package.json (2)
48-48: New export looks good.Exporting ./ai-elements → ./src/components/ai-elements/index.tsx is correctly wired.
57-59: Audit/remove AI deps from packages/ui/package.json
- packages/ui/package.json adds:
No imports of @ai-sdk/react or @ai-sdk/ui-utils were found under packages/ui."@ai-sdk/react": "^2.0.45", "@ai-sdk/ui-utils": "^1.2.11", "@emotion/react": "^11.13.3",- Imports for
aiand@ai-sdk/reactwere found in apps/web/client (examples):
- apps/web/client/package.json (has "@ai-sdk/react": "2.0.25")
- apps/web/client/src/server/api/routers/chat/suggestion.ts
- apps/web/client/src/server/api/routers/chat/conversation.ts
- apps/web/client/src/server/api/routers/project/project.ts
- apps/web/client/src/app/project/[id]/_hooks/use-chat/index.tsx
- apps/web/client/src/app/project/[id]/_components/.../message-content/*.tsx
- apps/web/client/src/app/api/chat/route.ts and helpers/stream.ts
- Action: if these deps are not required by packages/ui, remove them from packages/ui/package.json (or mark as peerDependency); if they are only for apps/web, keep/add them to apps/web/client and align versions (packages/ui uses ^2.0.45 vs apps/web/client 2.0.25).
packages/ui/src/components/ai-elements.tsx (1)
1-1: Top-level barrel is fine.Keeps the public API tidy and short import paths.
packages/ui/src/components/ai-elements/index.tsx (1)
1-1: Barrel export looks good.Public AI elements correctly re-export CodeBlock components.
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx (1)
212-216: LGTM: minor readability tweak only.No functional change; the explicit block form is fine.
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsx (1)
212-216: LGTM: icon conditional formatting.Pure formatting/readability change; behavior remains identical.
packages/ui/src/components/ai-elements/code-block.tsx (1)
1-1: Good: client boundary declared.Safe for Clipboard API and React state.
| @@ -1,4 +1,5 @@ | |||
| import { api } from '@/trpc/react'; | |||
There was a problem hiding this comment.
Add 'use client' — this component uses client-only hooks.
This file uses tRPC React hooks and renders interactive UI; without 'use client', it will be a Server Component and break.
Apply:
+ 'use client';
import { api } from '@/trpc/react';
import { Icons } from '@onlook/ui/icons/index';
import { ChatTabContent } from './chat-tab-content';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { api } from '@/trpc/react'; | |
| 'use client'; | |
| import { api } from '@/trpc/react'; |
🤖 Prompt for AI Agents
In
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsx
around line 1, this component uses client-only hooks (tRPC React hooks) so it
must be a Client Component; add the "use client" directive as the very first
line of the file (exactly 'use client' in quotes) so React treats the file as a
client component and the hooks/UI will work correctly.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/ui/package.json (2)
89-89: Placement of @types/react-syntax-highlighter: confirm intent.Because this package ships TS source (not built), keeping types in dependencies is reasonable so consumers can typecheck. If you later ship built d.ts, move this to devDependencies to avoid leaking types downstream.
106-106: Prefer the light/async build of react-syntax-highlighter and register only needed languagesCurrent code imports the full Prism build and its theme styles, which increases bundle size and can trigger SSR warnings.
- Files: packages/ui/src/components/ai-elements/code-block.tsx (imports at lines ~6–7); packages/ui/package.json (dependency at line ~106).
- Replace the default Prism import with the light/async build (e.g., PrismLight / PrismAsyncLight) and register only the languages you actually render.
- Avoid importing dist/esm/styles/prism wholesale — load theme styles minimally or lazily.
- Verify by running a bundle analysis and an SSR build; confirm there are no server-side console warnings.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/ui/package.json(4 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-09-16T19:22:52.461Z
Learnt from: CR
PR: onlook-dev/onlook#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-16T19:22:52.461Z
Learning: Applies to apps/web/client/src/**/*.{ts,tsx} : Use path aliases @/* and ~/* for imports mapping to src/*
Applied to files:
packages/ui/package.json
📚 Learning: 2025-09-14T01:44:21.209Z
Learnt from: CR
PR: onlook-dev/onlook#0
File: AGENTS.md:0-0
Timestamp: 2025-09-14T01:44:21.209Z
Learning: Applies to apps/web/client/src/**/*.{ts,tsx} : Use path aliases @/* and ~/* for imports that map to apps/web/client/src/*
Applied to files:
packages/ui/package.json
🔇 Additional comments (4)
packages/ui/package.json (4)
82-82: Radix Slot bump LGTM.Patch-level upgrade; low risk.
97-97: Lucide upgrade — repo scan done; verify exports and unify versionspackages/ui/package.json was bumped to ^0.544.0 (packages/ui/package.json:97); apps/web/client still uses ^0.486.0 and bun.lock contains both versions. I found direct imports/usages of lucide icons (e.g. packages/ui/src/components/ai-elements/code-block.tsx, select.tsx, checkbox.tsx) and packages/ui/src/components/icons/index.tsx contains CheckIcon and CopyIcon — no in-repo renames detected.
- Confirm v0.544.0 still exports the icons you rely on (CheckIcon, CopyIcon, etc.) by installing and building locally (run install + build/tests).
- Prefer aligning the lucide-react version across the monorepo (or explicitly pin/hoist) to avoid duplicate copies / resolution mismatches.
- If build/test shows missing exports, update imports to the new names or re-export replacements from packages/ui/src/components/icons/index.tsx.
48-48: Verify TypeScript resolution for @onlook/ui/ai-elements
- packages/ui/package.json adds "./ai-elements" -> ./src/components/ai-elements/index.tsx; that file exists and contains
export * from './code-block'.- package.json
"types": "src/index.ts"and"typesVersions": null— consumers importing@onlook/ui/ai-elementsmay not see proper type declarations. Add per-subpath .d.ts (or build + publish declarations) or add a typesVersions mapping for the subpath, or document requiring bundler/NodeNext resolution.- Repo search returned no consumer imports (ripgrep reported "No files were searched") — confirm downstream compilation in consumer projects.
57-57: Verify zod peer + runtime deps for @ai-sdk/ui-utils
- npm view (@ai-sdk/ui-utils@1.2.11) shows peerDependencies: "zod": "^3.23.8"; dependencies: "@ai-sdk/provider": "1.1.3", "@ai-sdk/provider-utils": "2.2.8", "zod-to-json-schema": "^3.24.1"; engines: "node": ">=18".
- packages/ui/package.json currently adds "@ai-sdk/ui-utils": "^1.2.11".
- Action items: confirm this is only used inside CodeBlock or lazily imported; if not, resolve the zod major-version mismatch (repo has zod ^4.x in packages/models & packages/ai) and ensure @ai-sdk/provider* won't pull server-only/heavy deps into the client bundle (use dynamic import, move to backend, convert to devDependency, or choose a lighter alternative). Run a local build + bundle audit to verify no unwanted runtime deps are bundled.
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
Description
Related Issues
Type of Change
Testing
Screenshots (if applicable)
Additional Notes
Important
Introduce AI element components for syntax-highlighted code blocks and collapsible reasoning sections with streaming support.
CodeBlockcomponent incode-block.tsxfor syntax-highlighted code with copy-to-clipboard.Reasoningcomponent inreasoning.tsxfor collapsible reasoning sections with streaming support.Responsecomponent inresponse.tsxfor rendering markdown-like content.@ai-sdk/ui-utilsandstreamdowntopackage.jsonfor new UI functionalities.lucide-reactandreact-syntax-highlighterfor improved UI components.This description was created by
for 18a00e4. You can customize this summary. It will automatically update as commits are pushed.
Summary by CodeRabbit
New Features
Style
Chores