Ask questions about UI5 controls, debugging, or general development topics.
Select a control in the Control Inspector to automatically include context in your questions.
Chat history cleared. Ask me anything!
tags) + html = html.replace(/\n/g, ''); + + // Step 5: Restore code (after line breaks so code blocks keep their original formatting) + html = this._restoreInlineCode(html, placeholders.inlineCode); + html = this._restoreCodeBlocks(html, placeholders.codeBlocks); + + return html; +}; + +/** + * Extract code blocks from text. + * @private + */ +AIChat.prototype._extractCodeBlocks = function (text, placeholders) { + return text.replace(/```([\w]*)?\n([\s\S]*?)```/g, (match, lang, code) => { + const index = placeholders.codeBlocks.length; + const trimmedCode = code.trim(); + const isJson = lang === 'json' || (!lang && /^[\[\{]/.test(trimmedCode)); + + if (isJson) { + try { + placeholders.codeBlocks.push({ type: 'json', data: JSON.parse(trimmedCode) }); + } catch (e) { + placeholders.codeBlocks.push({ type: 'code', lang: 'plaintext', code: trimmedCode }); + } + } else { + placeholders.codeBlocks.push({ type: 'code', lang: lang || 'plaintext', code: trimmedCode }); + } + + return `___CODEBLOCK_${index}___`; + }); +}; + +/** + * Extract inline code from text. + * @private + */ +AIChat.prototype._extractInlineCode = function (text, placeholders) { + return text.replace(/`([^`]+)`/g, (match, code) => { + const index = placeholders.inlineCode.length; + placeholders.inlineCode.push(code); + return `___INLINECODE_${index}___`; + }); +}; + +/** + * Apply markdown formatting (bold, italic, links). + * @private + */ +AIChat.prototype._applyMarkdownFormatting = function (text) { + return text + .replace(/\*\*([^*]+)\*\*/g, '$1') // Bold + .replace(/\b__([^_]+)__\b/g, '$1') // Bold (alt) + .replace(/(?]+)(?$1') // Italic + .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1'); // Links +}; + +/** + * Restore inline code. + * @private + */ +AIChat.prototype._restoreInlineCode = function (text, inlineCode) { + inlineCode.forEach((code, index) => { + text = text.replace(`___INLINECODE_${index}___`, `${this._escapeHtml(code)}`); + }); + return text; +}; + +/** + * Restore code blocks. + * @private + */ +AIChat.prototype._restoreCodeBlocks = function (text, codeBlocks) { + codeBlocks.forEach((block, index) => { + let replacement; + if (block.type === 'json') { + replacement = this._createJsonViewer(block.data); + } else { + // Use data attribute approach like JSON viewer + replacement = this._createCodeViewer(block.code, block.lang); + } + text = text.replace(`___CODEBLOCK_${index}___`, replacement); + }); + return text; +}; + +/** + * Create JSON viewer HTML. + * @private + */ +AIChat.prototype._createJsonViewer = function (data) { + const jsonString = JSON.stringify(data).replace(/'/g, '''); + return ``; +}; + +/** + * Create code viewer HTML. + * @private + */ +AIChat.prototype._createCodeViewer = function (code, lang) { + const escapedCode = code.replace(/'/g, ''').replace(/"/g, '"'); + return ``; +}; + +/** + * Render interactive JSON viewer with expand/collapse. + * @private + */ +AIChat.prototype._renderJsonValue = function (value, key, isLast, depth) { + depth = depth || 0; + + if (depth > this._maxJsonDepth) { + const comma = isLast ? '' : ','; + return this._renderJsonLine(key, `[Max depth reached]${comma}`); + } + + const comma = isLast ? '' : ','; + const handlers = { + null: () => this._renderJsonLine(key, `null${comma}`), + boolean: () => this._renderJsonLine(key, `${value}${comma}`), + number: () => this._renderJsonLine(key, `${value}${comma}`), + string: () => this._renderJsonString(key, value, comma), + array: () => this._renderJsonArray(key, value, comma, depth), + object: () => this._renderJsonObject(key, value, comma, depth) + }; + + const type = value === null ? 'null' : Array.isArray(value) ? 'array' : typeof value; + return handlers[type] ? handlers[type]() : this._renderJsonLine(key, `${this._escapeHtml(String(value))}${comma}`); +}; + +/** + * Render JSON string value. + * @private + */ +AIChat.prototype._renderJsonString = function (key, value, comma) { + const escaped = this._escapeHtml(value); + return this._renderJsonLine(key, `"${escaped}"${comma}`); +}; + +/** + * Render JSON array. + * @private + */ +AIChat.prototype._renderJsonArray = function (key, value, comma, depth) { + if (value.length === 0) { + return this._renderJsonLine(key, `[]${comma}`); + } + + const id = 'json-' + Math.random().toString(36).substr(2, 9); + const keyHtml = key ? `"${this._escapeHtml(key)}": ` : ''; + const items = value.map((item, i) => this._renderJsonValue(item, null, i === value.length - 1, depth + 1)).join(''); + + return `${keyHtml}▼ [${value.length} items + ${items}]${comma}`; +}; + +/** + * Render JSON object. + * @private + */ +AIChat.prototype._renderJsonObject = function (key, value, comma, depth) { + const keys = Object.keys(value); + if (keys.length === 0) { + return this._renderJsonLine(key, `{}${comma}`); + } + + const id = 'json-' + Math.random().toString(36).substr(2, 9); + const keyHtml = key ? `"${this._escapeHtml(key)}": ` : ''; + const items = keys.map((k, i) => this._renderJsonValue(value[k], k, i === keys.length - 1, depth + 1)).join(''); + + return `${keyHtml}▼ {${keys.length} keys + ${items}}${comma}`; +}; + +/** + * Render a single JSON line. + * @private + * @param {string} key - Key name (null for array items) + * @param {string} content - HTML content + * @returns {string} - HTML string + */ +AIChat.prototype._renderJsonLine = function (key, content) { + let html = ''; + + if (key !== null) { + html += '"' + this._escapeHtml(key) + '": '; + } + + html += content; + html += ''; + + return html; +}; + +/** + * Initialize JSON viewers in a message element. + * @private + */ +AIChat.prototype._initializeJsonViewers = function (element) { + // Initialize JSON viewers + element.querySelectorAll('.json-viewer').forEach(viewer => { + const jsonData = viewer.getAttribute('data-json'); + if (!jsonData) { + return; + } + + try { + const parsed = JSON.parse(jsonData); + viewer.innerHTML = ` + Copy + ${this._renderJsonValue(parsed, null, true)} + `; + + this._setupJsonToggleHandlers(viewer); + + // Add copy button event listener + const copyButton = viewer.querySelector('.copy-code-button'); + if (copyButton) { + copyButton.addEventListener('click', (e) => { + this._copyToClipboard(JSON.stringify(parsed, null, 2), e.currentTarget); + }); + } + } catch (e) { + viewer.textContent = `Error rendering JSON: ${e.message}`; + console.error('JSON viewer error:', e); + } + }); + + // Initialize code viewers + element.querySelectorAll('.code-viewer').forEach(viewer => { + const code = viewer.getAttribute('data-code'); + const lang = viewer.getAttribute('data-lang'); + if (!code) { + return; + } + + try { + viewer.innerHTML = this._renderCodeBlock(code, lang); + + // Add copy button event listener + const copyButton = viewer.querySelector('.copy-code-button'); + if (copyButton) { + copyButton.addEventListener('click', (e) => { + this._copyToClipboard(code, e.currentTarget); + }); + } + } catch (e) { + viewer.textContent = `Error rendering code: ${e.message}`; + console.error('Code viewer error:', e); + } + }); +}; + +/** + * Setup toggle handlers for JSON expand/collapse. + * @private + */ +AIChat.prototype._setupJsonToggleHandlers = function (viewer) { + viewer.querySelectorAll('.json-toggle').forEach(toggle => { + toggle.addEventListener('click', e => { + e.preventDefault(); + e.stopPropagation(); + + const content = document.getElementById(toggle.getAttribute('data-target')); + if (content) { + const isCollapsed = content.style.display === 'none'; + content.style.display = isCollapsed ? 'block' : 'none'; + toggle.textContent = isCollapsed ? '▼' : '▶'; + } + }); + }); +}; + +/** + * Render code block as DOM elements. + * @private + */ +AIChat.prototype._renderCodeBlock = function (code, lang) { + const lines = code.split('\n'); + const linesHtml = lines.map(line => { + const escapedLine = this._escapeHtml(line || ' '); + return `${escapedLine}`; + }).join(''); + + const langLabel = lang && lang !== 'plaintext' ? `${lang}` : ''; + const copyButton = 'Copy'; + + return `${langLabel}${copyButton}${linesHtml}`; +}; + +/** + * Check if user is scrolled to bottom (within threshold). + * @private + * @returns {boolean} + */ +AIChat.prototype._isScrolledToBottom = function () { + const messagesContainer = document.getElementById('ai-messages-container'); + if (!messagesContainer) { + return true; + } + + const threshold = 100; // pixels from bottom + const scrollPosition = messagesContainer.scrollTop + messagesContainer.clientHeight; + const scrollHeight = messagesContainer.scrollHeight; + + return scrollHeight - scrollPosition < threshold; +}; + +/** + * Scroll messages container to bottom (only if user is already at bottom). + * @private + * @param {boolean} force - Force scroll even if user scrolled up + */ +AIChat.prototype._scrollToBottom = function (force) { + const messagesContainer = document.getElementById('ai-messages-container'); + if (!messagesContainer || messagesContainer.scrollHeight === undefined) { + return; + } + + // Only auto-scroll if user is already at bottom, or if forced + if (force || this._isScrolledToBottom()) { + messagesContainer.scrollTop = messagesContainer.scrollHeight; + } +}; + +/** + * Debounced render for streaming content to improve performance. + * @private + * @param {string} content - Content to render + */ +AIChat.prototype._debouncedRender = function (content) { + this._pendingRender = content; + + if (this._renderDebounceTimer) { + return; + } + + this._renderDebounceTimer = setTimeout(() => { + if (this._pendingRender && this._streamingMessageElement) { + this._streamingMessageElement.innerHTML = this._parseMarkdown(this._pendingRender); + this._initializeJsonViewers(this._streamingMessageElement); + // Don't force scroll during streaming - let user scroll freely + this._scrollToBottom(false); + } + this._renderDebounceTimer = null; + }, 50); // 50ms debounce +}; + +/** + * Update token counter display. + * @private + */ +AIChat.prototype._updateTokenCounter = async function () { + const counter = document.getElementById('ai-token-counter'); + const input = document.getElementById('ai-input'); + const sendButton = document.getElementById('ai-send-button'); + + try { + const usageInfo = await this._sessionManager.getUsageInfo(); + + if (usageInfo) { + counter.textContent = `Tokens: ${usageInfo.inputUsage}/${usageInfo.inputQuota} (${usageInfo.percentUsed}%)`; + + // Remove all warning classes first + counter.classList.remove('warning', 'warning-critical', 'quota-exhausted'); + + if (usageInfo.percentUsed >= 100) { + counter.classList.add('quota-exhausted'); + input.disabled = true; + sendButton.disabled = true; + input.placeholder = 'Token quota exhausted. Clear history to continue.'; + } else if (usageInfo.percentUsed >= 90) { + counter.classList.add('warning-critical'); + } else if (usageInfo.percentUsed >= 70) { + counter.classList.add('warning'); + } + + // Show usage warning when reaching 70% (only once per session) + this._checkTokenUsageWarning(usageInfo.percentUsed); + } else { + counter.textContent = ''; + } + } catch (error) { + counter.textContent = ''; + } +}; + +/** + * Check if token usage warning should be displayed. + * @private + * @param {number} percentUsed - Percentage of token quota used + */ +AIChat.prototype._checkTokenUsageWarning = function (percentUsed) { + // Show warning at 70% usage, only once per session + if (percentUsed >= 70 && !this._hasShownUsageWarning) { + this._hasShownUsageWarning = true; + + const warningMessage = '💡 Your conversation is getting long (' + percentUsed + '% of token limit used). ' + + 'For faster responses and better performance, consider clearing the chat history to start fresh. ' + + 'Click "Clear History" button above.'; + + this._addSystemMessage(warningMessage); + } +}; + +/** + * Clear current context. + * @private + */ +AIChat.prototype._clearContext = function () { + this._currentContext = null; + const contextInfo = document.getElementById('ai-context-info'); + contextInfo.style.display = 'none'; + + // Add a system message to inform AI that context was cleared + this._addSystemMessage('❌ Context cleared - no control is currently selected'); +}; + +/** + * Update current context (control and app info). + * @param {Object} context - {control, appInfo} + */ +AIChat.prototype.updateContext = function (context) { + this._currentContext = context; + + const contextInfo = document.getElementById('ai-context-info'); + const contextText = contextInfo.querySelector('.context-text'); + + if (context && context.control) { + contextInfo.style.display = 'flex'; + contextText.textContent = `Context: ${context.control.type || 'Control'} (${context.control.id || 'no ID'})`; + } else { + contextInfo.style.display = 'none'; + } +}; + +/** + * Called when AI tab is activated. + */ +AIChat.prototype.onTabActivated = function () { + // Load chat history if we have a URL + if (this._currentUrl) { + this._loadHistory(); + } + + // Force scroll to bottom when context changes + this._scrollToBottom(true); +}; + +/** + * Set current inspected URL. + * @param {string} url + */ +AIChat.prototype.setUrl = function (url) { + if (this._currentUrl !== url) { + this._currentUrl = url; + this._loadHistory(); + } +}; + +/** + * Load chat history from storage. + * @private + */ +AIChat.prototype._loadHistory = async function () { + try { + const messages = await this._storageManager.loadHistory(this._currentUrl); + + if (messages.length > 0) { + const messagesContainer = document.getElementById('ai-messages-container'); + messagesContainer.innerHTML = ''; + + messages.forEach(msg => { + this._addMessage(msg.role, msg.content); + }); + + document.getElementById('ai-clear-history-button').style.display = 'inline-block'; + // Force scroll to bottom when loading history + this._scrollToBottom(true); + } + } catch (error) { + // Fail silently + } +}; + +/** + * Copy text to clipboard. + * @private + * @param {string} text - Text to copy + * @param {HTMLElement} button - The button element that triggered the copy + */ +AIChat.prototype._copyToClipboard = function (text, button) { + // Create temporary textarea (must be visible for copy to work) + const textarea = document.createElement('textarea'); + textarea.value = text; + // Position off-screen but keep visible (opacity 0 can block copy in some contexts) + textarea.style.position = 'fixed'; + textarea.style.top = '-9999px'; + textarea.style.left = '-9999px'; + textarea.setAttribute('readonly', ''); + document.body.appendChild(textarea); + + // Select the text + textarea.focus(); + textarea.select(); + + // For iOS compatibility + textarea.setSelectionRange(0, text.length); + + try { + // Execute copy command + const successful = document.execCommand('copy'); + + if (successful) { + // Change button text to "Copied!" + const originalText = button.textContent; + button.textContent = 'Copied!'; + button.disabled = true; + + // Revert back after 1.5 seconds + setTimeout(() => { + button.textContent = originalText; + button.disabled = false; + }, 1500); + } else { + console.error('execCommand returned false'); + this._addSystemMessage('Failed to copy to clipboard'); + } + } catch (err) { + console.error('Copy failed:', err); + this._addSystemMessage('Failed to copy to clipboard'); + } finally { + // Clean up + document.body.removeChild(textarea); + } +}; + +/** + * Destroy the component and cleanup. + */ +AIChat.prototype.destroy = function () { + this._sessionManager.destroy(); +}; + +module.exports = AIChat; diff --git a/app/scripts/modules/ui/ControlTree.js b/app/scripts/modules/ui/ControlTree.js index 39c31cd4..75c5b96e 100644 --- a/app/scripts/modules/ui/ControlTree.js +++ b/app/scripts/modules/ui/ControlTree.js @@ -439,6 +439,11 @@ ControlTree.prototype._selectTreeElement = function (targetElement) { * @param {Element} target - DOM element to which need to be scrolled */ ControlTree.prototype._scrollToElement = function (target) { + // Guard against null elements or missing layout properties (e.g., in test environments) + if (!target || !this._treeContainer || this._treeContainer.offsetHeight === undefined) { + return; + } + var desiredViewBottomPosition = this._treeContainer.offsetHeight - this._treeContainer.offsetTop + this._treeContainer.scrollTop; if (target.offsetTop > desiredViewBottomPosition || target.offsetTop < this._treeContainer.scrollTop) { diff --git a/app/styles/less/modules/AIChat.less b/app/styles/less/modules/AIChat.less new file mode 100644 index 00000000..e1f672d9 --- /dev/null +++ b/app/styles/less/modules/AIChat.less @@ -0,0 +1,785 @@ +// AIChat component styles + +.ai-chat-wrapper { + display: flex; + flex-direction: column; + height: 100%; + background-color: @bg-white; +} + +#ai-chat { + width: 100%; +} + +// Status Banner +.ai-status-banner { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + border-bottom: 1px solid @border-gray-lighter; + background-color: @bg-white; + + .status-content { + display: flex; + align-items: center; + gap: 8px; + } + + .status-indicator { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: @gray; + } + + .status-text { + font-size: 13px; + color: @text-color; + } + + .download-button, + .clear-history-button { + padding: 6px 12px; + border: 1px solid @lighter-blue; + background-color: @lighter-blue; + color: @white; + border-radius: 4px; + cursor: pointer; + font-size: 12px; + margin-left: 8px; + + &:hover:not(:disabled) { + background-color: darken(@lighter-blue, 10%); + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + } + + .clear-history-button { + background-color: @gray; + border-color: @gray; + + &:hover:not(:disabled) { + background-color: @gray-dark; + } + } + + // Status-specific styles + &.status-ready { + background-color: fade(@lighter-blue, 20%); + border-color: @border-gray-lighter; + + .status-indicator { + background-color: @lighter-blue; + } + } + + &.status-needs-download { + background-color: fade(@purple, 15%); + border-color: @border-gray-lighter; + + .status-indicator { + background-color: @purple; + } + } + + &.status-downloading { + background-color: fade(@lighter-blue, 15%); + border-color: @border-gray-lighter; + + .status-indicator { + background-color: @lighter-blue; + animation: pulse 1.5s ease-in-out infinite; + } + } + + &.status-unavailable, + &.status-error { + background-color: fade(@red-saturated, 15%); + border-color: @border-gray-lighter; + + .status-indicator { + background-color: @red-saturated; + } + + .status-text { + white-space: pre-line; + font-size: 11px; + } + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.3; + } +} + +// Messages Container +.ai-messages-container { + flex: 1; + overflow-y: auto; + padding: 16px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.ai-welcome-message { + text-align: center; + padding: 32px 16px; + color: @gray-dark; + + h3 { + margin: 0 0 12px 0; + color: @text-color; + font-size: 18px; + } + + p { + margin: 8px 0; + font-size: 13px; + line-height: 1.5; + } +} + +// Message Bubbles +.ai-message { + display: flex; + flex-direction: column; + max-width: 80%; + animation: fadeIn 0.2s ease-in; + + &.message-user { + align-self: flex-end; + max-width: 70%; + + .message-header { + justify-content: flex-end; + } + + .message-content { + background-color: @lighter-blue; + color: @white; + border-radius: 12px 12px 0 12px; + padding: 10px 12px; + } + } + + &.message-assistant { + align-self: flex-start; + + .message-content { + background-color: @bg-white; + color: @white; + border: 1px solid @border-gray-lighter; + border-radius: 12px 12px 12px 0; + } + } + + &.message-system { + align-self: center; + max-width: 90%; + + .message-content { + background-color: @bg-gray-lightest; + color: @text-color; + border-radius: 8px; + text-align: center; + font-size: 12px; + font-style: italic; + } + } +} + +.message-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 4px; + font-size: 11px; + color: @gray-dark; + padding: 0 8px; + + .message-role { + font-weight: 600; + } + + .copy-response-button { + padding: 4px 8px; + border: 1px solid @border-gray-lighter; + background-color: @bg-white; + color: @text-color; + border-radius: 4px; + cursor: pointer; + font-size: 11px; + transition: all 0.2s; + + &:hover { + background-color: @lighter-blue; + color: @white; + border-color: @lighter-blue; + } + + &:active { + transform: scale(0.95); + } + } +} + +.message-content { + padding: 10px 14px; + word-wrap: break-word; + white-space: normal; + font-size: 13px; + line-height: 1.5; + + // Markdown styling + code { + background-color: fade(@gray, 20%); + padding: 2px 6px; + border-radius: 3px; + font-family: 'Courier New', Courier, monospace; + font-size: 12px; + } + + pre { + background-color: fade(@gray, 15%); + border: 1px solid @border-gray-lighter; + border-radius: 6px; + padding: 12px; + overflow-x: auto; + margin: 8px 0; + + code { + background: none; + padding: 0; + font-size: 12px; + line-height: 1.4; + } + } + + strong { + font-weight: 600; + } + + em { + font-style: italic; + } + + a { + color: @lighter-blue; + text-decoration: underline; + + &:hover { + opacity: 0.8; + } + } +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +// Input Area +.ai-input-area { + border-top: 1px solid @border-gray-lighter; + background-color: @bg-white; + padding: 12px 16px; +} + +.context-info { + display: none; + align-items: center; + gap: 6px; + padding: 8px 12px; + margin-bottom: 8px; + background-color: fade(@lighter-blue, 15%); + border-radius: 6px; + font-size: 12px; + color: @text-color; + + .context-icon { + display: inline-block; + width: 14px; + height: 14px; + margin-right: 2px; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 10px; + height: 10px; + border: 2px solid @lighter-blue; + border-radius: 50%; + } + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 4px; + height: 4px; + background-color: @lighter-blue; + border-radius: 50%; + } + } + + .context-text { + flex: 1; + font-weight: 500; + } + + .context-clear-button { + background: none; + border: none; + color: @text-color; + font-size: 20px; + line-height: 1; + cursor: pointer; + padding: 0 4px; + opacity: 0.6; + transition: opacity 0.2s; + + &:hover { + opacity: 1; + } + } +} + +.input-wrapper { + display: flex; + gap: 8px; + align-items: flex-end; +} + +.ai-input { + flex: 1; + padding: 10px 12px; + border: 1px solid @border-gray-lighter; + border-radius: 6px; + font-family: inherit; + font-size: 13px; + resize: none; + background-color: @bg-white; + color: @text-color; + + &:focus { + outline: none; + border-color: @lighter-blue; + box-shadow: 0 0 0 2px fade(@lighter-blue, 10%); + } + + &::placeholder { + color: @gray; + } +} + +.ai-send-button { + padding: 10px 20px; + background-color: @lighter-blue; + color: @white; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 13px; + font-weight: 600; + white-space: nowrap; + transition: background-color 0.2s; + + &:hover:not(:disabled) { + background-color: darken(@lighter-blue, 10%); + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } +} + +.input-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 8px; + padding: 0 4px; +} + +.token-counter { + font-size: 12px; + color: @gray-dark; + font-weight: 500; + padding: 4px 8px; + background-color: fade(@gray, 10%); + border-radius: 4px; + + &.warning { + color: @red-saturated; + background-color: fade(@red-saturated, 10%); + font-weight: 600; + } +} + +// Scrollbar styling +.ai-messages-container { + &::-webkit-scrollbar { + width: 8px; + } + + &::-webkit-scrollbar-track { + background: @bg-gray-lightest; + } + + &::-webkit-scrollbar-thumb { + background: @gray; + border-radius: 4px; + + &:hover { + background: @gray-dark; + } + } +} + +// Responsive adjustments for narrow panels +@media (max-width: 600px) { + .ai-message { + max-width: 90%; + } + + .ai-status-banner { + flex-direction: column; + align-items: flex-start; + gap: 8px; + + .status-content { + width: 100%; + } + + .download-button, + .clear-history-button { + width: 100%; + margin-left: 0; + } + } +} + +// JSON Viewer styling +.json-viewer { + margin: 8px 0; + + .json-wrapper { + position: relative; + background: @bg-gray-lightest; + border: 1px solid @border-gray-lighter; + border-radius: 4px; + padding: 8px 12px 12px 12px; + overflow-x: auto; + } + + .copy-code-button { + position: absolute; + top: 6px; + right: 6px; + background: @lighter-blue; + color: @white; + border: none; + border-radius: 4px; + padding: 4px 10px; + cursor: pointer; + font-size: 11px; + z-index: 10; + transition: all 0.2s; + opacity: 0.9; + + &:hover { + background: darken(@lighter-blue, 10%); + opacity: 1; + } + + &:active { + transform: scale(0.95); + } + } + + .json-tree { + padding-top: 4px; + } + + .json-tree { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; + font-size: 12px; + line-height: 1.6; + color: @text-color; + } + + .json-line { + padding-left: 16px; + position: relative; + } + + .json-content { + padding-left: 16px; + + > .json-line:last-child { + padding-left: 0; + } + } + + .json-toggle { + cursor: pointer; + user-select: none; + display: inline-block; + width: 14px; + color: @gray-dark; + font-size: 10px; + + &:hover { + color: @lighter-blue; + } + } + + .json-count { + color: @gray-dark; + font-size: 11px; + margin-left: 6px; + font-style: italic; + } + + .json-key { + color: #0451a5; // Blue for keys + font-weight: 600; + } + + .json-string { + color: #a31515; // Red for strings + } + + .json-number { + color: #098658; // Green for numbers + } + + .json-boolean { + color: #0000ff; // Blue for booleans + font-weight: 600; + } + + .json-null { + color: #808080; // Gray for null + font-style: italic; + } + + .json-bracket { + color: @text-color; + font-weight: bold; + } +} + +// Code Viewer styling (similar to JSON viewer) +.code-viewer { + margin: 8px 0; + + .code-wrapper { + position: relative; + background: @bg-gray-lightest; + border: 1px solid @border-gray-lighter; + border-radius: 4px; + padding: 8px 12px 12px 12px; + overflow-x: auto; + } + + .copy-code-button { + position: absolute; + top: 6px; + right: 6px; + background: @lighter-blue; + color: @white; + border: none; + border-radius: 4px; + padding: 4px 10px; + cursor: pointer; + font-size: 11px; + z-index: 10; + transition: all 0.2s; + opacity: 0.9; + + &:hover { + background: darken(@lighter-blue, 10%); + opacity: 1; + } + + &:active { + transform: scale(0.95); + } + } + + .code-lang { + position: absolute; + top: 6px; + left: 6px; + background: @gray; + color: @white; + border-radius: 4px; + padding: 2px 8px; + font-size: 10px; + text-transform: uppercase; + font-weight: 600; + opacity: 0.7; + } + + .code-content { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; + font-size: 12px; + line-height: 1.6; + color: @text-color; + padding-top: 24px; // Add space above code for copy button and language label + } + + .code-line { + white-space: pre-wrap; + word-wrap: break-word; + + &:empty::before { + content: ' '; + display: inline-block; + } + } +} + +// Confirmation Dialog +.ai-confirm-dialog { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + + .confirm-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(2px); + } + + .confirm-content { + position: relative; + background: @bg-white; + border-radius: 8px; + padding: 24px; + max-width: 400px; + width: 90%; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + z-index: 1; + animation: confirmSlideIn 0.2s ease-out; + } + + .confirm-title { + font-size: 16px; + font-weight: 600; + color: @text-color; + margin-bottom: 12px; + } + + .confirm-message { + font-size: 13px; + color: @gray-dark; + line-height: 1.5; + margin-bottom: 20px; + } + + .confirm-buttons { + display: flex; + gap: 8px; + justify-content: flex-end; + } + + .confirm-button { + padding: 8px 16px; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 13px; + font-weight: 600; + transition: background-color 0.2s; + + &.confirm-cancel { + background-color: @bg-gray-lightest; + color: @text-color; + + &:hover { + background-color: darken(@bg-gray-lightest, 10%); + } + } + + &.confirm-ok { + background-color: @red-saturated; + color: @white; + + &:hover { + background-color: darken(@red-saturated, 10%); + } + } + } +} + +@keyframes confirmSlideIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.loading-indicator { + color: @gray; + font-style: italic; + + .loading-dots::after { + content: ''; + animation: loadingDots 1.5s steps(4, end) infinite; + } +} + +@keyframes loadingDots { + 0%, 20% { + content: ''; + } + 40% { + content: '.'; + } + 60% { + content: '..'; + } + 80%, 100% { + content: '...'; + } +} diff --git a/app/styles/less/themes/base/base.less b/app/styles/less/themes/base/base.less index a185f9de..0efa72e9 100644 --- a/app/styles/less/themes/base/base.less +++ b/app/styles/less/themes/base/base.less @@ -17,4 +17,5 @@ @import "../../modules/XMLView.less"; @import "../../modules/DataGrid.less"; @import "../../modules/ElementsRegistry.less"; +@import "../../modules/AIChat.less"; diff --git a/app/styles/less/themes/dark/dark.less b/app/styles/less/themes/dark/dark.less index 26008658..59f4be66 100644 --- a/app/styles/less/themes/dark/dark.less +++ b/app/styles/less/themes/dark/dark.less @@ -32,3 +32,36 @@ @bg-datagrid-header-background-color: @black; @bg-datagrid-th-sortable-background-color: #252525; @bg-datagrid-tr-hover-background-color: rgba(201, 135, 48, 0.1); + +// Dark theme specific overrides for AI Chat +.ai-message.message-assistant .message-content { + color: @white; +} + +// Dark theme JSON viewer colors +.json-viewer { + .json-content { + background: #1e1e1e; + border-color: #3c3c3c; + } + + .json-key { + color: #9cdcfe; // Light blue for keys + } + + .json-string { + color: #ce9178; // Light orange for strings + } + + .json-number { + color: #b5cea8; // Light green for numbers + } + + .json-boolean { + color: #569cd6; // Blue for booleans + } + + .json-null { + color: #808080; // Gray for null + } +} diff --git a/app/styles/less/themes/light/light.less b/app/styles/less/themes/light/light.less index 7703013e..ae8edd3c 100644 --- a/app/styles/less/themes/light/light.less +++ b/app/styles/less/themes/light/light.less @@ -32,3 +32,8 @@ @bg-datagrid-header-background-color: #f2f2f2; @bg-datagrid-th-sortable-background-color: #e6e6e6; @bg-datagrid-tr-hover-background-color: AliceBlue; + +// Light theme specific overrides for AI Chat +.ai-message.message-assistant .message-content { + color: @gray-darkest !important; +} diff --git a/tests/modules/ai/AISessionManager.spec.js b/tests/modules/ai/AISessionManager.spec.js new file mode 100644 index 00000000..d1d843ec --- /dev/null +++ b/tests/modules/ai/AISessionManager.spec.js @@ -0,0 +1,240 @@ +'use strict'; + +var AISessionManager = require('../../../app/scripts/modules/ai/AISessionManager.js'); + +describe('AISessionManager', function () { + var sessionManager; + + beforeEach(function () { + sessionManager = new AISessionManager(); + }); + + afterEach(function () { + sessionManager = null; + }); + + describe('Constructor', function () { + it('should initialize with null port', function () { + (sessionManager._port === null).should.be.true; + }); + + it('should initialize with empty message handlers', function () { + Object.keys(sessionManager._messageHandlers).should.have.lengthOf(0); + }); + + it('should initialize with disconnected state', function () { + sessionManager._isConnected.should.be.false; + }); + + it('should initialize with no active session', function () { + sessionManager._hasActiveSession.should.be.false; + }); + }); + + describe('#_on() and #_off()', function () { + it('should register message handler', function () { + var handler = function () {}; + sessionManager._on('test-type', handler); + + sessionManager._messageHandlers['test-type'].should.equal(handler); + }); + + it('should remove message handler', function () { + var handler = function () {}; + sessionManager._on('test-type', handler); + sessionManager._off('test-type'); + + (sessionManager._messageHandlers['test-type'] === undefined).should.be.true; + }); + }); + + describe('#_getDefaultSystemPrompt()', function () { + it('should return base prompt without app info', function () { + var prompt = sessionManager._getDefaultSystemPrompt(); + + prompt.should.contain('AI assistant'); + prompt.should.contain('UI5 Inspector'); + prompt.should.not.contain('Current Application Context'); + }); + + it('should include framework info when available', function () { + var appInfo = { + common: { + data: { + SAPUI5: '1.120.0' + } + } + }; + + var prompt = sessionManager._getDefaultSystemPrompt(appInfo); + + prompt.should.contain('Current Application Context'); + prompt.should.contain('Framework: 1.120.0'); + }); + + it('should include theme when available', function () { + var appInfo = { + configurationComputed: { + data: { + theme: 'sap_horizon' + } + } + }; + + var prompt = sessionManager._getDefaultSystemPrompt(appInfo); + + prompt.should.contain('Theme: sap_horizon'); + }); + + it('should include loaded libraries when available', function () { + var appInfo = { + loadedLibraries: { + data: { + 'sap.m': {}, + 'sap.ui.core': {} + } + } + }; + + var prompt = sessionManager._getDefaultSystemPrompt(appInfo); + + prompt.should.contain('Loaded Libraries: sap.m, sap.ui.core'); + }); + }); + + describe('#_truncateJson()', function () { + it('should return JSON string when under limit', function () { + var data = { key: 'value' }; + var result = sessionManager._truncateJson(data, 1000); + + result.should.contain('"key"'); + result.should.contain('"value"'); + }); + + it('should truncate JSON when over limit', function () { + var largeData = {}; + for (var i = 0; i < 200; i++) { + largeData['property' + i] = 'value'.repeat(20); + } + + var result = sessionManager._truncateJson(largeData, 100); + + result.should.contain('[truncated]'); + result.length.should.be.at.most(115); + }); + + it('should handle circular references gracefully', function () { + var circular = {}; + circular.self = circular; + + var result = sessionManager._truncateJson(circular, 1000); + + result.should.contain('cannot serialize'); + }); + }); + + describe('#_formatPrompt()', function () { + it('should return prompt unchanged when no context', function () { + var result = sessionManager._formatPrompt('Test prompt', null); + + result.should.equal('Test prompt'); + }); + + it('should return prompt unchanged when no control', function () { + var result = sessionManager._formatPrompt('Test prompt', {}); + + result.should.equal('Test prompt'); + }); + + it('should add control type and ID', function () { + var context = { + control: { + type: 'sap.m.Button', + id: 'myButton' + } + }; + + var result = sessionManager._formatPrompt('Test prompt', context); + + result.should.contain('Type: sap.m.Button'); + result.should.contain('ID: myButton'); + result.should.contain('User Question: Test prompt'); + }); + + it('should truncate large properties', function () { + var largeData = {}; + for (var i = 0; i < 200; i++) { + largeData['property' + i] = 'value'.repeat(20); + } + + var context = { + control: { + type: 'sap.m.Button', + properties: { + own: { + data: largeData + } + } + } + }; + + var result = sessionManager._formatPrompt('Test', context); + + result.should.contain('[truncated]'); + }); + }); + + describe('#_buildMessagesArray()', function () { + it('should include system prompt', function () { + var messages = sessionManager._buildMessagesArray('Hello', [], null); + + messages[0].role.should.equal('system'); + messages[0].content.should.contain('AI assistant'); + }); + + it('should include conversation history', function () { + var history = [ + { role: 'user', content: 'First question' }, + { role: 'assistant', content: 'First answer' } + ]; + + var messages = sessionManager._buildMessagesArray('Second question', history, null); + + messages.should.have.lengthOf(4); + messages[1].content.should.equal('First question'); + messages[2].content.should.equal('First answer'); + }); + + it('should format user message with context', function () { + var context = { + control: { + type: 'sap.m.Button', + id: 'btn1' + } + }; + + var messages = sessionManager._buildMessagesArray('What is this?', [], context); + + messages[1].role.should.equal('user'); + messages[1].content.should.contain('Type: sap.m.Button'); + messages[1].content.should.contain('What is this?'); + }); + + it('should handle empty conversation history', function () { + var messages = sessionManager._buildMessagesArray('Hello', null, null); + + messages.should.have.lengthOf(2); + }); + }); + + describe('#hasActiveSession()', function () { + it('should return false initially', function () { + sessionManager.hasActiveSession().should.be.false; + }); + + it('should return true after session set', function () { + sessionManager._hasActiveSession = true; + sessionManager.hasActiveSession().should.be.true; + }); + }); +}); diff --git a/tests/modules/ai/ChatStorageManager.spec.js b/tests/modules/ai/ChatStorageManager.spec.js new file mode 100644 index 00000000..b59d95a0 --- /dev/null +++ b/tests/modules/ai/ChatStorageManager.spec.js @@ -0,0 +1,53 @@ +'use strict'; + +var ChatStorageManager = require('../../../app/scripts/modules/ai/ChatStorageManager.js'); + +describe('ChatStorageManager', function () { + var storageManager; + + beforeEach(function () { + storageManager = new ChatStorageManager(); + }); + + afterEach(function () { + storageManager = null; + }); + + describe('Constructor', function () { + it('should initialize with max messages limit of 50', function () { + storageManager._maxMessages.should.equal(50); + }); + }); + + describe('#_getKey()', function () { + it('should generate key with ai_chat_ prefix', function () { + var key = storageManager._getKey('https://example.com'); + key.should.match(/^ai_chat_/); + }); + + it('should replace non-alphanumeric characters with underscores', function () { + var key = storageManager._getKey('https://example.com/path?query=value'); + key.should.equal('ai_chat_https___example_com_path_query_value'); + }); + + it('should handle null URL with default key', function () { + var key = storageManager._getKey(null); + key.should.equal('ai_chat_default'); + }); + + it('should handle undefined URL with default key', function () { + var key = storageManager._getKey(undefined); + key.should.equal('ai_chat_default'); + }); + + it('should handle special characters', function () { + var key = storageManager._getKey('http://test.com/?foo=bar&baz=qux'); + key.should.equal('ai_chat_http___test_com__foo_bar_baz_qux'); + }); + + it('should handle empty string with default', function () { + var key = storageManager._getKey(''); + key.should.equal('ai_chat_default'); + }); + }); +}); diff --git a/tests/modules/ui/AIChat.spec.js b/tests/modules/ui/AIChat.spec.js new file mode 100644 index 00000000..a97dce47 --- /dev/null +++ b/tests/modules/ui/AIChat.spec.js @@ -0,0 +1,329 @@ +'use strict'; + +var AIChat = require('../../../app/scripts/modules/ui/AIChat.js'); + +describe('AIChat', function () { + var fixtures = document.getElementById('fixtures'); + var aiChat; + + beforeEach(function () { + fixtures.innerHTML = ''; + aiChat = new AIChat('ai-chat', { getAppInfo: function () { return null; } }); + }); + + afterEach(function () { + if (aiChat) { + aiChat = null; + } + fixtures.innerHTML = ''; + }); + + describe('Constructor & Initialization', function () { + it('should create instance with container ID', function () { + aiChat._container.should.exist; + aiChat._container.id.should.equal('ai-chat'); + }); + + it('should set default values', function () { + (aiChat._currentUrl === null).should.be.true; + (aiChat._currentContext === null).should.be.true; + aiChat._messages.should.be.an('array').with.lengthOf(0); + aiChat._isStreaming.should.be.false; + aiChat._maxJsonDepth.should.equal(10); + }); + + it('should render chat interface', function () { + document.querySelector('.ai-chat-wrapper').should.exist; + }); + }); + + describe('#_render()', function () { + it('should render chat wrapper with ARIA attributes', function () { + var wrapper = document.querySelector('.ai-chat-wrapper'); + wrapper.should.exist; + wrapper.getAttribute('role').should.equal('region'); + wrapper.getAttribute('aria-label').should.equal('AI Chat'); + }); + + it('should render messages container', function () { + var container = document.getElementById('ai-messages-container'); + container.should.exist; + container.getAttribute('role').should.equal('log'); + }); + + it('should render input with aria-label', function () { + var input = document.getElementById('ai-input'); + input.should.exist; + input.getAttribute('aria-label').should.equal('Message input'); + }); + + it('should render send button with aria-label', function () { + var button = document.getElementById('ai-send-button'); + button.should.exist; + button.getAttribute('aria-label').should.equal('Send message'); + }); + + it('should render dialog with ARIA attributes', function () { + var dialog = document.getElementById('ai-confirm-dialog'); + dialog.should.exist; + dialog.getAttribute('role').should.equal('dialog'); + dialog.getAttribute('aria-modal').should.equal('true'); + }); + }); + + describe('#_escapeHtml()', function () { + it('should escape < and >', function () { + var result = aiChat._escapeHtml(''); + result.should.contain('<div>'); + }); + + it('should escape ampersand', function () { + var result = aiChat._escapeHtml('A & B'); + result.should.contain('&'); + }); + + it('should handle script tags', function () { + var result = aiChat._escapeHtml(''); + result.should.equal('<script>alert("xss")</script>'); + }); + + it('should handle quotes', function () { + var result = aiChat._escapeHtml('"quoted"'); + result.should.not.contain('<'); + }); + }); + + describe('#_parseMarkdown()', function () { + it('should escape HTML before formatting', function () { + var result = aiChat._parseMarkdown(''); + result.should.not.contain('', 'html'); + result.should.contain('<script>'); + }); + }); + + describe('#_createCodeViewer()', function () { + it('should create code viewer HTML', function () { + var result = aiChat._createCodeViewer('var x = 1;', 'javascript'); + result.should.contain('code-viewer'); + result.should.contain('data-code'); + }); + }); + + describe('#_createJsonViewer()', function () { + it('should create JSON viewer HTML', function () { + var result = aiChat._createJsonViewer({key: 'value'}); + result.should.contain('json-viewer'); + result.should.contain('data-json'); + }); + }); + }); + + describe('Message Handling', function () { + describe('#_addMessage()', function () { + it('should add user message', function () { + aiChat._addMessage('user', 'Hello'); + var container = document.getElementById('ai-messages-container'); + container.innerHTML.should.contain('Hello'); + }); + + it('should escape HTML in user messages', function () { + aiChat._addMessage('user', ''); + var container = document.getElementById('ai-messages-container'); + container.innerHTML.should.not.contain('
${this._escapeHtml(code)}