DOC-1179 AI home page #286
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughThis set of changes introduces a React-based AI chatbot interface to the documentation home page. A new Gulp task and supporting build pipeline were added to bundle React components using Browserify and Babelify. The home page template ( Sequence Diagram(s)sequenceDiagram
participant User
participant HomePage (React)
participant ChatInterface
participant KapaProvider/SDK
participant AI Backend
User->>HomePage (React): Loads page
HomePage (React)->>ChatInterface: Mounts chat UI
User->>ChatInterface: Types question and submits
ChatInterface->>KapaProvider/SDK: Sends question
KapaProvider/SDK->>AI Backend: API request
AI Backend-->>KapaProvider/SDK: Returns answer
KapaProvider/SDK-->>ChatInterface: Provides answer
ChatInterface-->>User: Renders answer, enables feedback
User->>ChatInterface: Gives feedback (upvote/downvote)
ChatInterface->>KapaProvider/SDK: Sends feedback
User->>ChatInterface: Clicks suggestion chip
ChatInterface->>KapaProvider/SDK: Sends chip text as question
Assessment against linked issues
🪧 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 (
|
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (11)
src/js/react/chat-entry.jsx (3)
1-1: Remove unused imports.The static analysis correctly identifies that
React,useState, anduseEffectare imported but not used in this component. Clean up the imports to include only what's needed.-import React, { useState, useEffect } from 'react' +import React from 'react'🧰 Tools
🪛 ESLint
[error] 1-1: 'React' is defined but never used.
(no-unused-vars)
[error] 1-1: 'useState' is defined but never used.
(no-unused-vars)
[error] 1-1: 'useEffect' is defined but never used.
(no-unused-vars)
17-18: Remove console.log in production code.The console.log statement should be removed before deploying to production. Consider implementing proper logging or removing this debugging code.
- onQuerySubmit: ({ question }) => - console.log('Question asked:', question) + onQuerySubmit: ({ question }) => { + // Handle submitted questions here if needed + }🧰 Tools
🪛 ESLint
[error] 17-18: Missing trailing comma.
(comma-dangle)
11-11: Fix indentation consistency.The heading has inconsistent indentation compared to the rest of the component.
- <h2>Ask anything about Redpanda</h2> + <h2>Ask anything about Redpanda</h2>🧰 Tools
🪛 ESLint
[error] 11-11: Expected indentation of 6 spaces but found 4.
(indent)
src/static/ask-ai.html (1)
1-46: Consider implementing loading state.The current implementation doesn't show any loading indicator while the external script is being loaded, which could lead to a blank screen if there are connection issues.
Add a simple loading indicator:
<body> - <div id="kapa-widget-container"></div> + <div id="kapa-widget-container"> + <div id="loading-indicator" style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;"> + <p>Loading AI assistant...</p> + </div> + </div> + <script> + document.addEventListener('DOMContentLoaded', () => { + // Hide loading indicator when the widget script initializes + window.addEventListener('kapaWidgetLoaded', () => { + document.getElementById('loading-indicator').style.display = 'none'; + }); + + // Show error if widget fails to load after timeout + setTimeout(() => { + if (document.getElementById('loading-indicator').style.display !== 'none') { + document.getElementById('loading-indicator').innerHTML = '<p>Failed to load AI assistant. Please refresh the page.</p>'; + } + }, 10000); + }); + </script> </body>src/partials/home.hbs (2)
1-24: Well-structured header and chat interface integration.The new header section is logically organized with clear separation between the navbar, chat container, and suggestion chips. This structure aligns well with the PR objective of integrating a chat interface into the documentation site.
Consider externalizing the hardcoded integration ID.
- <script> - window.UI_INTEGRATION_ID = 'bc719cfb-2fd5-4c76-acde-de9a905f13b3'; - </script> + <script> + window.UI_INTEGRATION_ID = '{{page.attributes.ui-integration-id}}'; + </script>
82-91: Good event handling for suggestion chips.The script properly attaches click event listeners to suggestion chips and extracts their text content to submit as queries to the chat interface.
Consider adding error handling for cases where
window.submitKapaQuerymight not be defined yet:- window.submitKapaQuery(text) + if (typeof window.submitKapaQuery === 'function') { + window.submitKapaQuery(text) + } else { + console.warn('Chat interface not ready: submitKapaQuery function not found') + }gulp.d/tasks/bundle-react.js (1)
1-13: Well-organized imports for a Gulp task.The dependencies required for bundling React components are properly imported.
Remove redundant 'use strict' directive.
JavaScript modules are already in strict mode by default.
-'use strict' -🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/css/home.css (1)
228-246: Add:focus-visiblestyles for the fixed scroll-down buttonKeyboard users relying on
Tabnavigation will reach thescroll-down-button, but the only focus cue is theoutlineapplied to all focus states. Consider adding a dedicated:focus-visiblerule so mouse users aren’t shown an unnecessary outline while still guaranteeing WCAG focus indication..home .scroll-down-button:focus-visible { outline: 2px solid var(--color-primitives-global-orange-orange-900); outline-offset: 2px; }src/js/react/ChatInterface.jsx (3)
224-235: Replacedelete window.submitKapaQuerywith reassignment to avoiddeletepenaltiesUsing
deleteon global properties has a measurable performance hit and triggers the BiomenoDeleterule.
Simply reset the reference:useEffect(() => { window.submitKapaQuery = doQuery return () => { - delete window.submitKapaQuery + window.submitKapaQuery = undefined } }, [doQuery])🧰 Tools
🪛 ESLint
[error] 224-224: Expected parentheses around arrow function argument.
(arrow-parens)
248-251: Guardnavigator.clipboardfor older browsers & private contexts
navigator.clipboard.writeTextis unavailable in some browsers/contexts (e.g. Firefox private windows). A try/catch higher in the call stack avoids rejected promises leaking to the console and lets you surface a friendlier toast:-const handleCopy = () => - navigator.clipboard.writeText( - conversation.map(q => `Question: ${q.question}\nAnswer: ${q.answer}`).join('\n---\n') - ) +const handleCopy = async () => { + try { + await navigator.clipboard.writeText( + conversation.map(q => `Question: ${q.question}\nAnswer: ${q.answer}`).join('\n---\n') + ) + } catch { + throw new Error('Clipboard API not available') + } +}The existing
ActionButtonstoast mechanism will then display the error message you propagate.🧰 Tools
🪛 ESLint
[error] 249-249: Expected parentheses around arrow function argument.
(arrow-parens)
192-206: Minor: debounce thescrollhandler to reduce layout thrash
onScrollruns on every scroll event and callsgetBoundingClientRect, which can cause forced re-flows. Wrapping the handler inrequestAnimationFrameor using a smallsetTimeoutdebounce (≈ 100 ms) will smooth scrolling on content-heavy pages.🧰 Tools
🪛 ESLint
[error] 196-196: A space is required after '{'.
(object-curly-spacing)
[error] 196-196: A space is required before '}'.
(object-curly-spacing)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
package-lock.jsonis excluded by!**/package-lock.jsonsrc/img/home-logo.svgis excluded by!**/*.svgsrc/static/js/ChatInterface.bundle.js.mapis excluded by!**/*.mapsrc/static/js/chat-entry.bundle.js.mapis excluded by!**/*.map
📒 Files selected for processing (14)
gulp.d/tasks/bundle-react.js(1 hunks)gulpfile.js(3 hunks)package.json(2 hunks)src/css/dark-mode.css(2 hunks)src/css/home.css(2 hunks)src/css/vars.css(2 hunks)src/js/react/ChatInterface.jsx(1 hunks)src/js/react/chat-entry.jsx(1 hunks)src/partials/article.hbs(2 hunks)src/partials/head-scripts.hbs(2 hunks)src/partials/header-content.hbs(1 hunks)src/partials/home.hbs(2 hunks)src/static/ask-ai.html(1 hunks)src/ui.yml(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
gulp.d/tasks/bundle-react.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.
(lint/suspicious/noRedundantUseStrict)
src/js/react/ChatInterface.jsx
[error] 256-256: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
🪛 ESLint
src/js/react/chat-entry.jsx
[error] 1-1: 'React' is defined but never used.
(no-unused-vars)
[error] 1-1: 'useState' is defined but never used.
(no-unused-vars)
[error] 1-1: 'useEffect' is defined but never used.
(no-unused-vars)
[error] 3-3: 'KapaProvider' is defined but never used.
(no-unused-vars)
[error] 4-4: 'ChatInterface' is defined but never used.
(no-unused-vars)
[error] 6-6: 'App' is defined but never used.
(no-unused-vars)
[error] 6-6: Missing space before function parentheses.
(space-before-function-paren)
[error] 11-11: Expected indentation of 6 spaces but found 4.
(indent)
[error] 17-18: Missing trailing comma.
(comma-dangle)
src/js/react/ChatInterface.jsx
[error] 1-1: 'React' is defined but never used.
(no-unused-vars)
[error] 4-4: 'ArrowUp' is defined but never used.
(no-unused-vars)
[error] 5-5: 'ThumbsUp' is defined but never used.
(no-unused-vars)
[error] 6-6: 'ThumbsDown' is defined but never used.
(no-unused-vars)
[error] 7-7: 'RefreshCcw' is defined but never used.
(no-unused-vars)
[error] 8-8: 'ClipboardCopy' is defined but never used.
(no-unused-vars)
[error] 9-9: 'ChevronDown' is defined but never used.
(no-unused-vars)
[error] 10-10: 'CircleStop' is defined but never used.
(no-unused-vars)
[error] 18-18: 'ErrorBoundary' is defined but never used.
(no-unused-vars)
[error] 19-19: Missing space before function parentheses.
(space-before-function-paren)
[error] 23-25: Expected blank line between class members.
(lines-between-class-members)
[error] 23-23: Missing space before function parentheses.
(space-before-function-paren)
[error] 26-28: Expected blank line between class members.
(lines-between-class-members)
[error] 26-26: Missing space before function parentheses.
(space-before-function-paren)
[error] 29-38: Expected blank line between class members.
(lines-between-class-members)
[error] 29-29: Missing space before function parentheses.
(space-before-function-paren)
[error] 46-46: Extra space before value for key 'langPrefix'.
(key-spacing)
[error] 47-47: Missing space before function parentheses.
(space-before-function-paren)
[error] 50-50: Expected indentation of 8 spaces but found 25.
(indent)
[error] 51-51: Expected indentation of 8 spaces but found 25.
(indent)
[error] 69-70: More than 1 blank line not allowed.
(no-multiple-empty-lines)
[error] 71-71: 'Answer' is defined but never used.
(no-unused-vars)
[error] 71-71: Missing space before function parentheses.
(space-before-function-paren)
[error] 77-77: Multiple spaces found before '='.
(no-multi-spaces)
[error] 94-94: 'FeedbackButtons' is defined but never used.
(no-unused-vars)
[error] 94-94: Missing space before function parentheses.
(space-before-function-paren)
[error] 104-104: Strings must use singlequote.
(quotes)
[error] 146-146: 'ActionButtons' is defined but never used.
(no-unused-vars)
[error] 146-146: Missing space before function parentheses.
(space-before-function-paren)
[error] 174-174: Missing space before function parentheses.
(space-before-function-paren)
[error] 175-175: Multiple spaces found before '='.
(no-multi-spaces)
[error] 176-176: Multiple spaces found before '='.
(no-multi-spaces)
[error] 178-178: Multiple spaces found before '='.
(no-multi-spaces)
[error] 196-196: A space is required after '{'.
(object-curly-spacing)
[error] 196-196: A space is required before '}'.
(object-curly-spacing)
[error] 209-209: Expected an assignment or function call and instead saw an expression.
(no-unused-expressions)
[error] 216-216: Expected parentheses around arrow function argument.
(arrow-parens)
[error] 224-224: Expected parentheses around arrow function argument.
(arrow-parens)
[error] 236-236: Expected parentheses around arrow function argument.
(arrow-parens)
[error] 249-249: Expected parentheses around arrow function argument.
(arrow-parens)
[error] 254-254: Multiple spaces found before '='.
(no-multi-spaces)
[error] 256-256: Expected parentheses around arrow function argument.
(arrow-parens)
[error] 264-264: Multiple spaces found before '='.
(no-multi-spaces)
[error] 266-266: Multiple spaces found before '='.
(no-multi-spaces)
[error] 316-316: Expected indentation of 14 spaces but found 16.
(indent)
[error] 321-321: Expected indentation of 14 spaces but found 12.
(indent)
[error] 322-322: Expected indentation of 16 spaces but found 14.
(indent)
[error] 323-323: Expected indentation of 18 spaces but found 16.
(indent)
[error] 324-324: Expected indentation of 18 spaces but found 16.
(indent)
[error] 325-325: Expected indentation of 18 spaces but found 16.
(indent)
[error] 326-326: Expected indentation of 16 spaces but found 14.
(indent)
[error] 327-327: Expected indentation of 18 spaces but found 16.
(indent)
[error] 328-328: Expected indentation of 18 spaces but found 16.
(indent)
[error] 329-329: Expected indentation of 16 spaces but found 14.
(indent)
[error] 330-330: Expected indentation of 14 spaces but found 12.
(indent)
[error] 331-331: Expected indentation of 16 spaces but found 14.
(indent)
[error] 332-332: Expected indentation of 18 spaces but found 16.
(indent)
[error] 333-333: Expected indentation of 18 spaces but found 16.
(indent)
[error] 334-334: Expected indentation of 18 spaces but found 16.
(indent)
[error] 335-335: Expected indentation of 16 spaces but found 14.
(indent)
[error] 336-336: Expected indentation of 18 spaces but found 16.
(indent)
[error] 337-337: Expected indentation of 18 spaces but found 16.
(indent)
[error] 338-338: Expected indentation of 16 spaces but found 14.
(indent)
[error] 339-339: Expected indentation of 14 spaces but found 12.
(indent)
🔇 Additional comments (20)
src/ui.yml (1)
4-5: The static file order looks good.The addition of
ask-ai.htmlbeforerapidoc-min.jsin the static files list properly registers the new standalone AI widget page to be served by the application.src/partials/head-scripts.hbs (1)
42-57: Well-implemented conditional inclusion of Kapa AI widget script.The Kapa AI widget script is now conditionally excluded on the home page, which is appropriate since the home page will use the custom React-based chat interface instead. This prevents duplicate chat functionality and potential conflicts.
src/partials/article.hbs (2)
11-14: Simplified home page rendering with proper partial integration.The home page rendering has been streamlined by replacing custom inline HTML with a call to the
homepartial, followed by the page contents. This is a good architectural improvement that enhances maintainability by centralizing home page UI code.
39-62: Clean removal of redundant home conditional block.The removed duplicate conditional block for the home page role eliminates redundancy while preserving the rendering logic for other page types. This is a good cleanup that maintains the intended functionality.
src/css/dark-mode.css (2)
6-9: Good addition of card and chip styling variables for dark mode.The new CSS variables for card and chip elements establish a consistent dark mode styling foundation for the new UI components. The color choices provide good contrast while maintaining the dark theme aesthetics.
21-21: Proper update to feature background variable.Changing the
--feature-background-colorto reference the new--card-colorvariable instead of--body-backgroundensures consistent styling between feature backgrounds and card elements in dark mode.src/js/react/chat-entry.jsx (1)
27-31: Great error handling for missing DOM element.The code correctly checks for the existence of the DOM element before attempting to render, preventing potential runtime errors.
gulpfile.js (3)
42-49: Well-structured React bundling task.The new task follows the established pattern in the codebase and is correctly integrated into the build pipeline. The code provides clear descriptions and appropriate path handling.
115-115: Proper integration of React bundling into build pipeline.The React bundling task is correctly placed in the task series, ensuring it runs after the WebAssembly build and before copying Rapidoc.
169-169: Complete task export.The React bundling task is properly exported, making it available for external use.
src/partials/header-content.hbs (1)
1-40: Well-structured conditional header rendering.The template correctly implements conditional rendering based on the page role, providing different header content for home and non-home pages. This implementation supports the new chat interface on the home page while maintaining the standard navigation for other pages.
src/static/ask-ai.html (2)
37-39: Review user tracking and privacy implications.The widget configuration enables user analytics fingerprinting and IP storage. Ensure these settings align with your organization's privacy policy and applicable regulations like GDPR and CCPA.
Please verify that:
- The privacy policy linked in line 40 explicitly covers this type of data collection
- Proper consent mechanisms are in place before enabling these tracking features
- Data processing agreements with Kapa AI are established if required by regulations
6-14: Good minimal styling approach.The CSS is clean and appropriately minimizes margins while ensuring the container takes up the full viewport height and width.
src/css/vars.css (2)
175-179: Well-structured color variable additions for new UI components.The new CSS variables for cards and chips are clearly defined with appropriate values that coordinate with the existing color scheme. Using distinct variables for each component type promotes consistency and maintainability.
189-189: Good reuse of the card color variable.Reusing the
--card-colorvariable for--feature-background-colormaintains visual consistency across different UI components.src/partials/home.hbs (1)
27-27: Fixed the page attributes variable name.Correcting from
page.attributes.rowstopage.attributes.rowensures proper data rendering.gulp.d/tasks/bundle-react.js (2)
14-24: Good file discovery and bundle naming logic.The function correctly identifies React modules and creates appropriately named bundles.
40-45: Good stream merging approach.Using
merge-streamto combine multiple bundle tasks is an efficient approach for parallel processing.package.json (1)
16-74: Appropriate dependencies for React integration.The added dependencies properly support the React bundling process and chat interface functionality. Moving packages to
devDependenciesis appropriate since they're only needed for the build process.The specific versions chosen for React (18.3.1) and related packages are current and compatible.
src/js/react/ChatInterface.jsx (1)
41-67: Verify thatmarkedHighlightis actually hooked into the newMarkedinstance
new Marked(markedHighlight({...}))appears to work because the constructor accepts the same plugin object signature, but the official API samples use:const marked = new Marked(); marked.use(markedHighlight(opts));If the plugin isn’t applied, you’ll lose syntax highlighting. Please confirm at runtime; if it’s not highlighting, switch to the two-step
usepattern:-const marked = new Marked( - markedHighlight({ … }) -); +const marked = new Marked(); +marked.use( + markedHighlight({ … }) +);🧰 Tools
🪛 ESLint
[error] 46-46: Extra space before value for key 'langPrefix'.
(key-spacing)
[error] 47-47: Missing space before function parentheses.
(space-before-function-paren)
[error] 50-50: Expected indentation of 8 spaces but found 25.
(indent)
[error] 51-51: Expected indentation of 8 spaces but found 25.
(indent)
This pull request introduces a React-based chat interface for Redpanda's documentation site, integrates it into the build pipeline, and updates the site's styles and templates to support the new feature. The most significant changes include creating the React components for the chat interface, updating the build process to bundle React code, and adjusting the site's templates and styles for integration.
React Chat Interface Implementation:
ChatInterfaceReact component (src/js/react/ChatInterface.jsx) with features like question submission, Markdown rendering, feedback buttons, and error handling.chat-entry.jsx, which initializes the React app and integrates it with the@kapaai/react-sdk.Build System Updates:
bundle:react, to compile and bundle React modules using Browserify and Babel.bundle:reacttask into the build pipeline by modifyinggulpfile.js. [1] [2] [3]Dependency Additions:
package.json, including React, React DOM, Babel presets for React, and other libraries likedompurifyandhighlight.jsfor Markdown rendering and syntax highlighting. [1] [2]Styling Enhancements:
dark-mode.cssandvars.cssto define new color variables (--card-color,--chip-color, etc.) and improve the visual consistency of the chat interface. [1] [2] [3] [4]Template Adjustments:
article.hbs,head-scripts.hbs,header-content.hbs) to conditionally include the chat widget and adjust the homepage layout. [1] [2] [3] [4] [5] [6]