codeant-ai-for-open-source[bot] commented on code in PR #41006: URL: https://github.com/apache/superset/pull/41006#discussion_r3405742091
########## superset-frontend/src/components/ChatMount/index.tsx: ########## @@ -0,0 +1,149 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { type ReactElement, useRef, useSyncExternalStore } from 'react'; +import { t } from '@apache-superset/core/translation'; +import { logging } from '@apache-superset/core/utils'; +import { css, useTheme } from '@apache-superset/core/theme'; +import { ErrorBoundary } from 'src/components/ErrorBoundary'; +import { addDangerToast } from 'src/components/MessageToasts/actions'; +import { store } from 'src/views/store'; +import { getChatSnapshot, subscribeToChatState } from 'src/core/chat'; + +const CHAT_EDGE_MARGIN = 24; +const PANEL_MODE_WIDTH = 400; + +/** + * Wraps a chat provider in a React component so that ErrorBoundary can catch + * synchronous throws from the provider function itself. Calling `provider()` + * inline (e.g. `{activeChat.panel()}`) would throw outside React's render + * boundary and crash the host. + */ +const ChatRenderer = ({ provider }: { provider: () => ReactElement }) => + provider(); + +const ChatMount = () => { + const theme = useTheme(); + // Notify at most once per registration; a crash can re-render and would + // otherwise re-toast, while a replacement (new registrationId) deserves a + // fresh notification if it crashes too. + const crashNotifiedFor = useRef<number | null>(null); + + // The active chat, the open state, and the display mode are read from one + // immutable registry snapshot so a render never mixes state from two + // different store versions (the tearing useSyncExternalStore prevents). + const { + open: panelOpen, + mode, + active, + } = useSyncExternalStore(subscribeToChatState, getChatSnapshot); + + if (!active) { + return null; + } + + const { registrationId } = active; + + const onProviderError = (error: Error) => { + // Fault isolation: contain the crash, log it, surface a one-time + // notification, and leave the slot empty rather than parking a + // persistent error card. + logging.error('[chat] provider crashed', error); + if (crashNotifiedFor.current !== registrationId) { + crashNotifiedFor.current = registrationId; + store.dispatch(addDangerToast(t('The chat failed to load.'))); + } + }; + + if (mode === 'panel') { + // Panel mode hides the trigger and docks the panel to the right edge. + // Interim approximation of the "layout slot between header and footer" + // from the chat API contract — the dock overlays the page until the host + // grows a real layout slot and resizer chrome. + if (!panelOpen) { + return null; + } + return ( + <div + data-test="chat-mount" + css={css` + position: fixed; + top: 0; + right: 0; + bottom: 0; + width: ${PANEL_MODE_WIDTH}px; + background: ${theme.colorBgContainer}; Review Comment: **🎨 Design Review — MEDIUM** Do you think a fixed 400px docked panel width might overflow or clip on narrow viewports (especially <400px), and should panel mode adapt at small breakpoints so the chat remains usable on smaller screens? [Fix in Cursor](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=1113468a0d1347588380e72e9dadba0d&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset) | [Fix in VSCode Claude](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=1113468a0d1347588380e72e9dadba0d&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset) *(Use Cmd/Ctrl + Click for best experience)* <details> <summary><b>Prompt for AI Agent 🤖 </b></summary> ```mdx This is a **Design Review** comment — a question about the UX/design of frontend code. It is intentionally framed as a question, not a prescription. The author may agree or disagree. **Path:** superset-frontend/src/components/ChatMount/index.tsx **Line:** 89:90 **Comment:** *MEDIUM: Do you think a fixed 400px docked panel width might overflow or clip on narrow viewports (especially <400px), and should panel mode adapt at small breakpoints so the chat remains usable on smaller screens? - If you agree with the proposal, apply a small, localized change (swap a color token, bump a font size, adjust spacing, add an aria-label, etc.). - If you disagree, or the answer depends on a design decision a human should make, explain your reasoning and ask the user how to proceed. Do NOT refactor surrounding components or apply other design changes that weren't asked about. ``` </details> -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
