Rich UI copy btn and content not replacing#163
Open
LAVI9966 wants to merge 2 commits intoWalkover-Web-Solution:testingfrom
Open
Rich UI copy btn and content not replacing#163LAVI9966 wants to merge 2 commits intoWalkover-Web-Solution:testingfrom
LAVI9966 wants to merge 2 commits intoWalkover-Web-Solution:testingfrom
Conversation
|
PR review rate limit exceeded |
There was a problem hiding this comment.
Pull request overview
This PR introduces a “rich UI” rendering path for assistant messages, plus templating utilities intended to support dynamic value replacement (including action definitions and ai_response-driven updates).
Changes:
- Added a small template engine to resolve
{{path}}placeholders in JSON-rich UI payloads and action definitions. - Introduced a
richUIcomponent system (registry + recursive renderer + multiple UI components) and added rendering support inAssistantMessage. - Updated chat-history conversion to populate
ai_responsefromllm_message.itemand adjusted copy-to-clipboard behavior for non-string message content.
Reviewed changes
Copilot reviewed 25 out of 25 changed files in this pull request and generated 18 comments.
Show a summary per file
| File | Description |
|---|---|
| utils/templateEngine.ts | Adds placeholder/path resolution and node interpolation utilities. |
| utils/dataConvertWrappers/makeGenericDataFormatUtility.tsx | Extracts ai_response from llm_message.item for downstream rendering/replacement. |
| public/chatbot-local.js | Changes the default login endpoint used by the local embed helper. |
| components/richUI/styleUtils.js | Introduces shared style resolution helpers for richUI components. |
| components/richUI/components/TitleComponent.js | New heading component for rich UI JSON rendering. |
| components/richUI/components/TextComponent.js | New text component with optional editable input mode. |
| components/richUI/components/TableComponent.js | New table renderer with optional rich-node cells. |
| components/richUI/components/SpacerComponent.js | New spacer/flex filler component. |
| components/richUI/components/SelectComponent.js | New select component emitting actions on change. |
| components/richUI/components/RowComponent.js | New horizontal layout component with padding/background/border options. |
| components/richUI/components/ListViewItemComponent.js | New list item wrapper component for ListView rendering. |
| components/richUI/components/ListViewComponent.js | New list renderer supporting bindings, templates, and actionDefs forwarding. |
| components/richUI/components/ImageComponent.js | New image component with dimension helpers and error fallback behavior. |
| components/richUI/components/IconComponent.js | New Lucide icon wrapper with size/color helpers. |
| components/richUI/components/DividerComponent.js | New divider component supporting label/flush/opacity customization. |
| components/richUI/components/DatePickerComponent.js | New date/date-range input component emitting actions on change. |
| components/richUI/components/ColComponent.js | New vertical layout component with width/padding/background/border options. |
| components/richUI/components/CardComponent.js | New card container with variants, theming, and footer actions. |
| components/richUI/components/CaptionComponent.js | New caption/label component with sizing and color support. |
| components/richUI/components/ButtonComponent.js | New button component supporting declarative actionRef resolution. |
| components/richUI/components/BoxComponent.js | New generic container/spacer component with dimension and styling options. |
| components/richUI/components/BadgeComponent.js | New badge/chip component. |
| components/richUI/componentRegistry.js | Adds type→component mapping for rich UI nodes. |
| components/richUI/RenderNode.js | Adds recursive renderer for rich UI JSON trees. |
| components/Interface-Chatbot/Messages/AssistantMessage.tsx | Detects rich UI JSON content, renders via RenderNode, and improves copy behavior for non-string content. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+119
to
+120
| // Default to a class (though it might be purged if not common) | ||
| return { className: `text-${color}`, style: {} }; |
Comment on lines
+25
to
+27
| const safeStyle = safeStyleObj(style); | ||
| const [editValue, setEditValue] = useState(String(value)); | ||
|
|
Comment on lines
+44
to
+47
| // If direction is not explicitly vertical, and we are binding 'buttons' or have an alias 'button', default to horizontal | ||
| const resolvedDir = | ||
| direction || (binding?.includes("button") || itemAlias?.includes("button") ? "horizontal" : "vertical"); | ||
|
|
| return <div className={`flex-1 min-w-0 min-h-0 ${className}`} aria-hidden="true" />; | ||
| } | ||
|
|
||
| const px = typeof size === "number" ? size : parseInt(size, 10) || 16; |
Comment on lines
+27
to
+29
| const applyAiResponsePaths = (baseNode: any, ai: Record<string, any> = {}) => { | ||
| console.log("base Node ", baseNode) | ||
| console.log("ai ", ai) |
Comment on lines
+32
to
+49
| const setByPath = (obj: any, path: string, value: any) => { | ||
| const keys: Array<string | number> = []; | ||
| path.replace(/([^[.\]]+)|\[(\d+)\]/g, (_m, prop, idx) => { | ||
| keys.push(idx !== undefined ? Number(idx) : prop); | ||
| return ""; | ||
| }); | ||
|
|
||
| if (!keys.length) return; | ||
| let cur = obj; | ||
| for (let i = 0; i < keys.length - 1; i++) { | ||
| const k = keys[i]; | ||
| const nk = keys[i + 1]; | ||
| if (cur[k] === undefined || cur[k] === null) { | ||
| cur[k] = typeof nk === "number" ? [] : {}; | ||
| } | ||
| cur = cur[k]; | ||
| } | ||
| cur[keys[keys.length - 1]] = value; |
| }; | ||
|
|
||
| export function resolveRounded(rounded, autoRound = false) { | ||
| if (rounded) return ROUNDED_MAP[rounded] ?? `rounded-${rounded}`; |
Comment on lines
+20
to
+22
| if (columns.length === 0 && data.length > 0) { | ||
| columns = Object.keys(data[0]); | ||
| } |
Comment on lines
+56
to
+60
| const childWithProps = dividers ? { ...child, divider: true } : child; | ||
| // If it's a list of buttons horizontally, we probably don't want each inner ListViewItem to have a hover block | ||
| if (resolvedDir === "horizontal" && childWithProps.type === "ListViewItem") { | ||
| childWithProps.hover = false; | ||
| } |
Comment on lines
18
to
22
| chatbotUrl: 'http://localhost:3001/chatbot', | ||
| styleSheet: 'http://localhost:3001/chatbot-style.css', | ||
| login: 'http://localhost:7072/api/chatbot/loginuser' | ||
| // login: 'https://db.gtwy.ai/api/chatbot/loginuser' | ||
| // login: 'http://localhost:7072/api/chatbot/loginuser' | ||
| login: 'https://dev-db.gtwy.ai/api/chatbot/loginuser' | ||
| }; |
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.
No description provided.