Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Reviewer's GuideThis PR implements an image‐generation feature end-to-end by extending the server AI action to branch on an image flag, introducing a React context/hook for toggling image mode, and updating the chat UI to surface an image‐generation toggle and group DALL∙E models appropriately. Sequence Diagram for Image Generation RequestsequenceDiagram
actor User
participant ChatUI as "Chat UI"
participant ServerAction as "createResponseStream (Server)"
participant OpenAI_Images_API as "OpenAI Images API"
User->>ChatUI: Toggles Image Generation mode via FeatureToggle
User->>ChatUI: Selects DALL-E model (e.g., from ChatCombobox)
User->>ChatUI: Enters prompt and submits
ChatUI->>ServerAction: Request (model, prompt, messages, isImageGeneration: true)
ServerAction->>ServerAction: Check isImageGeneration flag and clientType
alt isImageGeneration is true AND clientType is 'OpenAI'
ServerAction->>OpenAI_Images_API: openai.images.generate({ model, prompt, size, quality, style })
OpenAI_Images_API-->>ServerAction: Image data (response.data[0].b64_json)
ServerAction-->>ChatUI: JSON Response ({ type: 'image', data })
else Not image generation or different clientType
ServerAction->>ServerAction: Process as text generation (existing flow)
ServerAction-->>ChatUI: Text stream or JSON response (existing flow)
end
ChatUI->>User: Displays generated image or text response
Class Diagram for UI Component Changes for Image GenerationclassDiagram
class useImageGeneration {
<<Hook>>
+isImageGenerationEnabled: boolean
+toggleImageGeneration(): void
}
class ChatCombobox {
<<React Component>>
-models: any[]
-IMAGE_MODELS: any[]
-isImageGenerationEnabled: boolean
+groupModels(modelsToGroup: any[]): any
}
ChatCombobox ..> useImageGeneration : uses
class ChatPanel {
<<React Component>>
-isImageGenerationEnabled: boolean
+toggleImageGeneration(): void
+FeatureToggle (ImageIcon)
}
ChatPanel ..> useImageGeneration : uses
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
""" WalkthroughThis update introduces image generation capabilities to the chat application. It adds a context and toggle for enabling image generation in the UI, updates request and response handling to support image generation via OpenAI, and extends relevant types, models, and helpers. The provider hierarchy and dependencies are also adjusted accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ChatPanel
participant ImageGenerationProvider
participant MBChatProvider
participant ai-main-call.ts
participant OpenAI
User->>ChatPanel: Toggles Image Generation
ChatPanel->>ImageGenerationProvider: Updates isImageGenerationEnabled
User->>ChatPanel: Sends message with image generation enabled
ChatPanel->>MBChatProvider: Submits message (isImageGeneration: true)
MBChatProvider->>ai-main-call.ts: Calls createResponseStream with isImageGeneration
ai-main-call.ts->>OpenAI: Requests image generation (prompt, model)
OpenAI-->>ai-main-call.ts: Returns generated image (base64)
ai-main-call.ts-->>MBChatProvider: Returns event-stream with image data
MBChatProvider-->>ChatPanel: Delivers image response
ChatPanel-->>User: Displays generated image
Possibly related PRs
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
apps/masterbots.ai/lib/helpers/ai-helpers.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/masterbots.ai/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. apps/masterbots.ai/components/routes/chat/chat-message.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/masterbots.ai/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. apps/masterbots.ai/lib/hooks/use-mb-chat.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/masterbots.ai/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
🔇 Additional comments (2)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (2)
apps/masterbots.ai/lib/hooks/use-image.tsx (1)
10-27: Consider adding state persistence.The
ImageGenerationProviderimplementation is solid but lacks persistence across sessions. Users will need to re-enable image generation each time they refresh the page.Consider adding localStorage persistence:
export function ImageGenerationProvider({ children }: { children: React.ReactNode }) { - const [isImageGenerationEnabled, setIsImageGenerationEnabled] = useState(false) + const [isImageGenerationEnabled, setIsImageGenerationEnabled] = useState(() => { + // Check if we're in a browser environment + if (typeof window !== 'undefined') { + const saved = localStorage.getItem('isImageGenerationEnabled') + return saved === 'true' ? true : false + } + return false + }) const toggleImageGeneration = () => { + const newValue = !isImageGenerationEnabled setIsImageGenerationEnabled(!isImageGenerationEnabled) + // Save to localStorage when changed + if (typeof window !== 'undefined') { + localStorage.setItem('isImageGenerationEnabled', String(newValue)) + } }apps/masterbots.ai/app/actions/ai-main-call.ts (1)
38-38: Verify if all imports are used.The
experimental_generateImageimport appears to be unused. Consider removing it if it's not needed.import { type Message, extractReasoningMiddleware, smoothStream, streamObject, streamText, wrapLanguageModel, - experimental_generateImage as generateImage, } from 'ai'Also applies to: 42-42
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/masterbots.ai/app/actions/ai-main-call.ts(3 hunks)apps/masterbots.ai/components/layout/providers.tsx(2 hunks)apps/masterbots.ai/components/routes/chat/chat-combobox.tsx(1 hunks)apps/masterbots.ai/components/routes/chat/chat-panel.tsx(3 hunks)apps/masterbots.ai/lib/hooks/use-image.tsx(1 hunks)apps/masterbots.ai/lib/models.tsx(1 hunks)apps/masterbots.ai/types/types.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/masterbots.ai/components/routes/chat/chat-combobox.tsx (1)
apps/masterbots.ai/lib/models.tsx (1)
groupModels(52-62)
apps/masterbots.ai/components/layout/providers.tsx (2)
apps/masterbots.ai/lib/hooks/use-image.tsx (1)
ImageGenerationProvider(10-27)apps/masterbots.ai/lib/hooks/use-mb-chat.tsx (1)
MBChatProvider(80-988)
🔇 Additional comments (11)
apps/masterbots.ai/components/routes/chat/chat-combobox.tsx (1)
65-65: Clean code refactoring!The destructuring assignment has been consolidated into a single line, improving code readability and reducing unnecessary vertical space.
apps/masterbots.ai/lib/models.tsx (1)
29-30: Good addition of DALL-E icon mapping!The model icon mapping has been extended to associate DALL-E models with the OpenAI icon, which aligns with the image generation feature being implemented.
apps/masterbots.ai/components/layout/providers.tsx (2)
7-7: Added ImageGenerationProvider importThe import aligns with the PR objective of introducing image generation support.
46-48: Proper React context hierarchy integrationThe ImageGenerationProvider is correctly positioned just above the MBChatProvider, ensuring that image generation state is available throughout the chat context.
apps/masterbots.ai/types/types.ts (1)
220-221: Added isImageGeneration flag to support new featureThe JSONResponseStream type has been updated with an optional isImageGeneration flag, which is essential for handling image generation responses differently from text responses.
apps/masterbots.ai/components/routes/chat/chat-panel.tsx (3)
23-24: Import additions look good.The imports for
ImageIconanduseImageGenerationhook are correctly added to support the new image generation feature.Also applies to: 28-28
66-66: Well-structured hook integration.The destructured values from the
useImageGenerationhook follow the same pattern as other feature hooks, maintaining consistency in the codebase.
171-179: Clean UI implementation for image generation toggle.The implementation of the image generation toggle is consistent with other feature toggles, using the same component structure and styling patterns. The green color for the active state provides good visual distinction from other toggles.
apps/masterbots.ai/lib/hooks/use-image.tsx (2)
1-9: Well-structured context implementation.The context definition and interface follow React best practices with proper TypeScript typing.
29-35: Hook implementation is correct.The
useImageGenerationhook properly checks if it's being used within the provider context, following React best practices.Fix the trailing space at the end of the file:
return context -} +}apps/masterbots.ai/app/actions/ai-main-call.ts (1)
328-328: Properly destructured isImageGeneration flag.The
isImageGenerationflag is correctly added to the destructured properties from the input JSON.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @Bran18 - I've reviewed your changes - here's some feedback:
- In createResponseStream you import experimental_generateImage but then directly call openai.images.generate—either remove the unused import or consolidate to use your experimental_generateImage helper for consistency.
- The groupModels call in ChatCombobox now receives IMAGE_MODELS with a different shape than your normal models list—consider extending/filtering the existing models array instead of swapping to a new type so you don’t break the grouping logic.
- Inside the image generation branch you reference coreMessages, but that variable isn’t defined in this scope; you probably meant to use the earlier
messagesorrawMessagesarray.
Here's what I looked at during the review
- 🟡 General issues: 3 issues found
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Bran18
force-pushed
the
feat-openai-image-generation
branch
from
5f2c54e to
2b0b30b
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/masterbots.ai/lib/hooks/use-mb-chat.tsx (1)
503-529: Good error handling addition for failed responses.The new
onResponsehandler properly checks for error status codes and performs appropriate cleanup, including deleting the thread for new chats. This prevents orphaned threads when API calls fail.Consider extracting the duplicate thread deletion logic into a reusable function to reduce code duplication:
+const cleanupFailedNewChat = async () => { + if (isNewChat) { + await deleteThread({ + threadId, + jwt: session?.user?.hasuraJwt, + userId: session?.user.id, + }) + } +} async onResponse(response: any) { if (response.status >= 400) { customSonner({ type: 'error', text: response.statusText }) - - if (isNewChat) { - await deleteThread({ - threadId, - jwt: session?.user?.hasuraJwt, - userId: session?.user.id, - }) - } + await cleanupFailedNewChat() } },This same function could be reused in the
onErrorhandler and other error scenarios.
📜 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 (9)
apps/masterbots.ai/app/actions/ai-main-call.ts(3 hunks)apps/masterbots.ai/app/api/chat/models/models.ts(1 hunks)apps/masterbots.ai/components/routes/chat/chat-panel.tsx(4 hunks)apps/masterbots.ai/lib/helpers/ai-helpers.ts(1 hunks)apps/masterbots.ai/lib/hooks/use-image.tsx(1 hunks)apps/masterbots.ai/lib/hooks/use-mb-chat.tsx(6 hunks)apps/masterbots.ai/lib/hooks/use-model.tsx(1 hunks)apps/masterbots.ai/package.json(1 hunks)apps/masterbots.ai/types/types.ts(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- apps/masterbots.ai/lib/hooks/use-model.tsx
- apps/masterbots.ai/lib/helpers/ai-helpers.ts
- apps/masterbots.ai/app/api/chat/models/models.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/masterbots.ai/lib/hooks/use-image.tsx
- apps/masterbots.ai/types/types.ts
- apps/masterbots.ai/components/routes/chat/chat-panel.tsx
- apps/masterbots.ai/app/actions/ai-main-call.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/masterbots.ai/lib/hooks/use-mb-chat.tsx (2)
apps/masterbots.ai/services/hasura/hasura.service.ts (1)
deleteThread(1184-1219)apps/masterbots.ai/auth.ts (1)
session(171-186)
🔇 Additional comments (3)
apps/masterbots.ai/lib/hooks/use-mb-chat.tsx (2)
16-16: LGTM!The import path change for
AIModelsaligns with the new file structure for organizing model definitions.
230-230:Details
✅ Verification successful
Verify the AIModels enum contains the expected value.
The implementation correctly sets the
isImageGenerationflag based on the selected model. However, ensure thatAIModels.OpenAI_Image_Generationis properly defined in the models file.
🏁 Script executed:
#!/bin/bash # Description: Verify that AIModels.OpenAI_Image_Generation is defined # Search for the OpenAI_Image_Generation enum value definition ast-grep --pattern 'enum AIModels { $$$ OpenAI_Image_Generation = $_ $$$ }' # Also check with ripgrep as a fallback rg -A 5 'OpenAI_Image_Generation' --glob '*.ts' --glob '*.tsx'Length of output: 765
Verified AIModels.OpenAI_Image_Generation Exists
Confirmed that
AIModels.OpenAI_Image_Generationis defined in
• apps/masterbots.ai/app/api/chat/models/models.ts (OpenAI_Image_Generation = 'gpt-image-1')
No further action required.apps/masterbots.ai/package.json (1)
21-21:Details
✅ Verification successful
Verify compatibility with the OpenAI SDK update.
The version update from
1.2.5to^1.3.22is necessary for the new image generation features. The use of caret range (^) is appropriate for minor version updates.
🌐 Web query:
What are the breaking changes between @ai-sdk/openai version 1.2.5 and 1.3.22?💡 Result:
Based on the changelog information provided, here are the breaking changes and updates between @ai-sdk/openai version 1.2.5 and 1.3.22:
Breaking Changes
There are no explicitly labeled breaking changes between versions 1.2.5 and 1.3.22 of @ai-sdk/openai. However, several significant features and updates were introduced across these versions.
Feature Additions and Updates
Model Support Additions
- Added support for new OpenAI models:
- GPT-4o and GPT-4o-mini models with developer systemMessageMode (v1.3.20)[5]
- GPT-image-1 model for image generation (v1.3.18 and v1.3.19)[5]
- o3 and o4-mini models (v1.3.15)[5]
- GPT-4.5-preview model (v1.1.14)[5]
API Enhancements
- Support for reasoning summaries added in v1.3.17[5]
- Updates for responses API in the o4 model in v1.3.16[5]
- Strict schemas option added to the responses model in v1.2.4[5]
- Support for responses API added in v1.2.2[5]
- Raw response body exposed in generateText and generateObject (v1.2.1)[5]
Bug Fixes
- Fixed a Zod parse error with function in v1.3.21[5]
Azure Support
- Added Azure image model support in v1.2.0[5]
Patch Changes
All the updates between these versions were released as patch changes, indicating they should maintain backward compatibility. The changelog shows a series of incremental updates from v1.2.1 through v1.3.22, with each version introducing specific improvements or fixes.
Each version bumped dependencies appropriately, with updates to underlying packages like @ai-sdk/provider-utils and @ai-sdk/provider throughout the version range.
Citations:
- 1: https://www.npmjs.com/package/@ai-sdk/openai
- 2: https://github.com/openai/openai-python/blob/main/CHANGELOG.md
- 3: https://ai-sdk.dev/docs/announcing-ai-sdk-5-alpha
- 4: https://app.unpkg.com/@ai-sdk/openai@0.0.63/files/dist/index.mjs.map
- 5: https://github.com/code/lib-vercel-ai/blob/main/packages/openai/CHANGELOG.md
- 6: https://learn.microsoft.com/en-us/azure/ai-services/openai/api-version-deprecation
- 7: https://platform.openai.com/docs/api-reference/authentication
- 8: https://community.openai.com/t/assistant-version-forced-to-v2-no-downgrade-options/726787
- 9: https://learn.microsoft.com/en-us/azure/ai-foundry/model-inference/supported-languages-openai
- 10: https://community.openai.com/t/conflict-between-langchain-openai-and-openai-1-3-5-in-pipenv-how-to-resolve-dependency-issues/929268
Dependency update verified—no breaking changes
- File:
apps/masterbots.ai/package.json
Updated@ai-sdk/openaifrom1.2.5to^1.3.22- Changelog review confirms all releases between 1.2.5 and 1.3.22 are backward-compatible patches and feature additions with no breaking changes.
No further action needed.
1 similar comment
|
Closing - This code was not delivering the expected results |
2 participants
Summary by Sourcery
Enable experimental image generation by integrating OpenAI's images API with chat UI toggles and state management
New Features:
Enhancements:
Summary by CodeRabbit
New Features
Enhancements
User Interface
Chores