Enhance AI configuration and event handling with documentation#799
Merged
Enhance AI configuration and event handling with documentation#799
Conversation
- Create AIConfigProvider context for managing AI models and configuration - Add useAIConfig and useAIModels hooks for consuming configuration - Refactor AI panel components to use context instead of hardcoded models - Support custom model injection via config prop on AiPanelContent - Add comprehensive documentation for AI configuration usage - Enable AI feature flag in website builder
…cle tracking - Add onSuccess, onError, onComplete, and onAIEvent callbacks to AIConfig interface - Define AIEvent types (completion, error, stream_start) with timestamp metadata - Emit stream_start event when AI requests begin - Emit completion event with AI response content on success - Emit error event with error details on failure - Trigger onComplete callback for both success and error paths - Update README with event callback
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Deploying sdk with
|
| Latest commit: |
6187859
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://53870fb4.sdk-8n4.pages.dev |
| Branch Preview URL: | https://props-support-for-ai-panel.sdk-8n4.pages.dev |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ❌ Deployment failed View logs |
sdk-nextjs | 6187859 | Mar 11 2026, 07:03 AM |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the AI panel to use a context-based configuration for models and lifecycle callbacks, and updates panel/layout wiring and documentation to support extensibility.
Changes:
- Added
AIConfigProvider+ hooks (useAIConfig,useAIModels) to provide AI models and event callbacks via React context. - Updated AI panel components to source models from context and emit stream/success/error/complete events.
- Added documentation/examples and adjusted side-panel layout to conditionally show labels/padding.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| src/routes/website-builder.tsx | Enables the AI feature flag in the builder route. |
| src/pages/panels/ai-panel/model-selector-dropdown.tsx | Switches model list/source from hardcoded imports to context models. |
| src/pages/panels/ai-panel/ai-prompt-input.tsx | Uses context models to determine defaults and persist selected model. |
| src/pages/panels/ai-panel/ai-panel.tsx | Wires the AI panel component into the panel registry with callbacks. |
| src/pages/panels/ai-panel/ai-panel-other-lang.tsx | Uses context for model defaults and emits AI lifecycle events for non-default language flows. |
| src/pages/panels/ai-panel/ai-panel-default-lang.tsx | Uses context for model defaults and emits AI lifecycle events for default language flows. |
| src/pages/panels/ai-panel/ai-panel-content.tsx | Wraps the AI panel subtree in AIConfigProvider and exposes config props. |
| src/pages/panels/ai-panel/ai-models-context.tsx | Introduces the AI configuration context, types, and hooks. |
| src/pages/panels/ai-panel/README-AI-CONFIG.md | Documents the new context API, lifecycle, and extension approach. |
| src/pages/panels/ai-panel/EXAMPLE-CALLBACKS.tsx | Provides usage examples for custom models and event callbacks. |
| src/core/components/layout/root-layout.tsx | Conditionally renders panel labels and adjusts padding based on label presence. |
Comments suppressed due to low confidence (1)
src/pages/panels/ai-panel/ai-panel-content.tsx:44
selectedModelis initialized fromgetDefaultModel()(hardcodedAI_MODELS) insideAiPanelContentInner. IfAiPanelContentis given custommodelsviaAIConfigProvider, the initialselectedModelmay not exist in the provided models and can be sent to the backend as an invalid model id. Consider deriving the initial selection fromuseAIModels()(inside the provider) and/or validatingselectedModelagainst the configured models before using it.
const AiPanelContentInner = () => {
const { t } = useTranslation();
const [input, setInput] = useState("");
const [messages, setMessages] = useState<Message[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [abortController, setAbortController] = useState<AbortController | null>(null);
const [currentBlock, setCurrentBlock] = useState<any>(null);
const [selectedModel, setSelectedModel] = useState(getDefaultModel().id);
const { selectedLang, fallbackLang } = useLanguages();
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
110
to
+117
| // Create new AbortController for this request | ||
| const controller = new AbortController(); | ||
| setAbortController(controller); | ||
|
|
||
| const usedModel = model || currentSelectedModel; | ||
|
|
||
| // Trigger stream start event | ||
| config.onAIEvent?.({ type: "stream_start", model: usedModel, timestamp: Date.now() }); |
There was a problem hiding this comment.
An AbortController is created and stored, but its signal is never passed to the underlying fetch call (and fetchAPI/useBuilderFetch currently don't accept a signal). As a result, handleStop() calling abortController.abort() won't actually cancel the in-flight streaming request, and streaming updates/callbacks may still arrive after the UI is reset. Consider plumbing signal through useBuilderFetch/fetchAPI and passing controller.signal into the request, plus handling AbortError during streaming.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new, extensible AI configuration context for the AI panel, replacing hardcoded model imports with a context-based approach. This enables custom AI models, event callbacks, and easier state management throughout the component tree. The changes update all relevant AI panel components to consume their configuration and models from context, and add comprehensive documentation and examples for usage and extension.
AI configuration context and callbacks:
AIConfigProviderand associated hooks (useAIConfig,useAIModels) inai-models-context.tsx, allowing AI panel components to access models and event callbacks via context. This enables passing custom models and handling AI events (success, error, completion, stream start) in a type-safe, reusable way.AiPanelContentto accept aconfigprop and wrap its children inAIConfigProvider, making configuration available throughout the component tree. [1] [2]AiPanelForDefaultLangandAiPanelForOtherLangcomponents to use models and configuration from context, emit event callbacks at appropriate lifecycle points, and support custom model selection. [1] [2] [3] [4] [5] [6] [7] [8]Documentation and examples:
README-AI-CONFIG.mdto document the new configuration context, event lifecycle, hooks, and type definitions, with usage and extension examples.EXAMPLE-CALLBACKS.tsxwith practical examples showing how to use custom models, event callbacks, unified event handlers, analytics tracking, and state management with the new AI configuration context.UI improvements:
root-layout.tsxto conditionally add padding and display panel labels, improving panel appearance and usability.