diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6e1dbd20a..981cd1042 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -14,7 +14,10 @@ # Other packages /packages/react/src/components/AnimatedHeader/ @carbon-design-system/animated-header-devs /packages/react/src/components/Processing/ @carbon-design-system/processing-devs +<<<<<<< Updated upstream /packages/react/src/components/SplitPanel/ @carbon-design-system/split-panel-devs +======= +>>>>>>> Stashed changes /packages/react/src/components/TextHighlighter/ @carbon-design-system/text-highlighter-devs /packages/react/src/components/ThemeSettings/ @carbon-design-system/theme-settings-devs diff --git a/.storybook/welcome/welcome.scss b/.storybook/welcome/welcome.scss index 1cf6a0068..e8e30bfe3 100644 --- a/.storybook/welcome/welcome.scss +++ b/.storybook/welcome/welcome.scss @@ -1,5 +1,6 @@ @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/colors'; +@include type.type-style('productive-heading-07'); .welcome__container { position: fixed; @@ -13,7 +14,6 @@ } .welcome__heading { - @include type.type-style('productive-heading-07'); color: colors.$gray-80; } diff --git a/packages/web-components/src/components/chat/carbon-labs-18.0.1.tgz b/packages/web-components/src/components/chat/carbon-labs-18.0.1.tgz new file mode 100644 index 000000000..3933a437a Binary files /dev/null and b/packages/web-components/src/components/chat/carbon-labs-18.0.1.tgz differ diff --git a/packages/web-components/src/components/chat/components/chartElement/__stories__/chartElement.stories.ts b/packages/web-components/src/components/chat/components/chartElement/__stories__/chartElement.stories.ts index d702975a0..f407e957f 100644 --- a/packages/web-components/src/components/chat/components/chartElement/__stories__/chartElement.stories.ts +++ b/packages/web-components/src/components/chat/components/chartElement/__stories__/chartElement.stories.ts @@ -248,6 +248,15 @@ export const Showcase = { container-height="400px">
+

Candle stick chart

+
+ + +
+

Line Chart



-

Orthographic world map

+
+

Radar Plot


PI / 2","value":"right"},{"value":"left"}],"baseline":[{"test":"scale(\'angular\', datum.key) > 0","value":"top"},{"test":"scale(\'angular\', datum.key) == 0","value":"middle"},{"value":"bottom"}],"fill":{"value":"black"},"fontWeight":{"value":"bold"}}}},{"type":"line","name":"outer-line","from":{"data":"radial-grid"},"encode":{"enter":{"interpolate":{"value":"linear-closed"},"x":{"field":"x2"},"y":{"field":"y2"},"stroke":{"value":"lightgray"},"strokeWidth":{"value":1}}}}]}'}" container-height="450px">
@@ -342,6 +352,26 @@ export const Showcase = { container-height="650px">
+ + { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", "width": + 800, "height": 500, "projection": { "type": "albersUsa" }, "layer": [ { + "data": { "url": "data/us-10m.json", "format": { "type": "topojson", + "feature": "states" } }, "mark": { "type": "geoshape", "fill": "lightgray", + "stroke": "white" } }, { "data": { "url": "data/us-state-capitals.json" }, + "encoding": { "longitude": { "field": "lon", "type": "quantitative" }, + "latitude": { "field": "lat", "type": "quantitative" } }, "layer": [{ + "mark": { "type": "circle", "color": "orange" } }, { "mark": { "type": + "text", "dy": -10 }, "encoding": { "text": {"field": "city", "type": + "nominal"} } }] } ] } { "$schema": + "https://vega.github.io/schema/vega-lite/v6.json", "description": "A simple + radial chart with embedded data.", "data": { "values": [12, 23, 47, 6, 52, + 19] }, "layer": [{ "mark": {"type": "arc", "innerRadius": 20, "stroke": + "#fff"} },{ "mark": {"type": "text", "radiusOffset": 10}, "encoding": { + "text": {"field": "data", "type": "quantitative"} } }], "encoding": { + "theta": {"field": "data", "type": "quantitative", "stack": true}, "radius": + {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20}}, + "color": {"field": "data", "type": "nominal", "legend": null} } } +

Multi histogram


0 ? substring(datum.name,0,indexof(datum.name, \' \')) : datum.name","as":"bLabel"}],"mark":"text","encoding":{"longitude":{"field":"cx","type":"quantitative"},"latitude":{"field":"cy","type":"quantitative"},"text":{"field":"bLabel","type":"nominal"},"size":{"value":8},"opacity":{"value":0.6}}},{"data":{"url":"https://vega.github.io/vega-lite/examples/data/londonTubeLines.json","format":{"type":"topojson","feature":"line"}},"mark":{"type":"geoshape","filled":false,"strokeWidth":2},"encoding":{"color":{"field":"id","type":"nominal","legend":{"title":null,"orient":"bottom-right","offset":0},"scale":{"domain":["Bakerloo","Central","Circle","District","DLR","Hammersmith & City","Jubilee","Metropolitan","Northern","Piccadilly","Victoria","Waterloo & City"],"range":["rgb(137,78,36)","rgb(220,36,30)","rgb(255,206,0)","rgb(1,114,41)","rgb(0,175,173)","rgb(215,153,175)","rgb(106,114,120)","rgb(114,17,84)","rgb(0,0,0)","rgb(0,24,168)","rgb(0,160,226)","rgb(106,187,170)"]}}}}]}'}" - container-height="450px"> + container-height="450px" + container-width="450px">

Parallel Coordinates

@@ -377,12 +408,13 @@ export const Showcase = { container-height="350px">
-

Candle stick chart

+
+

Orthographic world map


+ content="${'{"$schema": "https://vega.github.io/schema/vega-lite/v5.json","width": 500,"height": 300,"params": [{"name": "projection","value": "orthographic"}],"data": {"url": "https://vega.github.io/vega-lite/examples/data/world-110m.json","format": {"type": "topojson", "feature": "countries"}},"projection": {"type": {"expr": "projection"}},"mark": {"type": "geoshape", "fill": "lightgray", "stroke": "gray"}}'}" + container-height="450px">
`, }; diff --git a/packages/web-components/src/components/chat/components/chartElement/__stories__/docs.mdx b/packages/web-components/src/components/chat/components/chartElement/__stories__/docs.mdx index 725c68bb0..b1580e6a6 100644 --- a/packages/web-components/src/components/chat/components/chartElement/__stories__/docs.mdx +++ b/packages/web-components/src/components/chat/components/chartElement/__stories__/docs.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Markdown, Meta } from '@storybook/blocks'; +import { ArgTypes, Markdown, Meta, Canvas } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../../../../globals/internal/storybook-cdn'; import * as ChartElementStories from './chartElement.stories'; import packageJson from '../../../package.json'; @@ -101,9 +101,9 @@ Here's a quick example to get you started. - `debug` + `debug-mode` boolean - false + true shows specification editor button and displays all errors in component when in error mode, otherwise show: Chart failed to render, see console @@ -221,6 +221,54 @@ Here's a quick example to get you started. and this will false. If streaming: raw data is incrementally displayed until complete and rendered + + + `selected` + boolean + false + + add selection border to chart container + + + + `selectable` + boolean + false + + choose if chart container is hoverable and selectable, append border on click + + + + `use-vega-carbon-theme` + boolean + false + + choose to override carbonification process and opt for simple Carbon themes (based on auto-detected carbon theme). Warning: these are sinplified and may not cover most edge cases. + + + + `enable-context` + boolean + false + + show button that triggers chart selection event, meant to update chat context + + + + `streaming` + boolean + false + + enable streaming animation capabilities for incomplete content + + + + `thumbnail-width` + boolean + false + + choose maximum width of thumbnail object + @@ -427,3 +475,7 @@ charts. Touch/mobile features have not been tested and attributes are still subject to change. Features such as legend interactions to filter out data, viewing the source data as a table, locale support, and are not currently implemented as well. (subject to change) + + +## Showcase + \ No newline at end of file diff --git a/packages/web-components/src/components/chat/components/chartElement/src/chartElement.ts b/packages/web-components/src/components/chat/components/chartElement/src/chartElement.ts index 06c8f46cf..fe0128db2 100644 --- a/packages/web-components/src/components/chat/components/chartElement/src/chartElement.ts +++ b/packages/web-components/src/components/chat/components/chartElement/src/chartElement.ts @@ -90,6 +90,12 @@ export default class chartElement extends LitElement { @property({ type: Boolean, attribute: 'disable-options' }) disableOptions; + /** + * Disable all chart option buttons, supercedes all other individual button options + */ + @property({ type: Boolean, attribute: 'use-vega-carbon-theme' }) + forceCarbonTheme; + /** * Disable recontext button to make chart current */ @@ -329,6 +335,10 @@ export default class chartElement extends LitElement { this.disableEditor = true; } + if (this.forceCarbonTheme) { + this.carbonify = false; + } + if (this.renderMethod !== 'svg' && this.renderMethod !== 'canvas') { this.renderMethod = 'canvas'; } @@ -642,7 +652,8 @@ export default class chartElement extends LitElement { if (this.renderMethod === 'canvas') { renderMode = 'canvas'; } - await VegaEmbed.default(targetDiv, chosenSpec, { + + const vegaLiteOptions = { actions: false, hover: this.enableTooltip, //theme: 'carbon' + this.theme, @@ -657,7 +668,13 @@ export default class chartElement extends LitElement { }, }, renderer: renderMode as 'canvas' | 'svg', - }) + }; + + if (this.forceCarbonTheme) { + vegaLiteOptions['theme'] = 'carbon' + this.theme; + } + + await VegaEmbed.default(targetDiv, chosenSpec, vegaLiteOptions) .then(({ view }) => { this._previousSpec = this._visualizationSpec; if (this.thumbNail) { diff --git a/packages/web-components/src/components/chat/components/chat/__stories__/chat.stories.js b/packages/web-components/src/components/chat/components/chat/__stories__/chat.stories.js index a1c24c0c2..5d0a8d2c1 100644 --- a/packages/web-components/src/components/chat/components/chat/__stories__/chat.stories.js +++ b/packages/web-components/src/components/chat/components/chat/__stories__/chat.stories.js @@ -13,7 +13,7 @@ import '@carbon/web-components/es/components/code-snippet/index.js'; import '@carbon/web-components/es/components/button/index.js'; export default { - title: 'Components/Chat', + title: 'Components/AI Components/[LABS TESTING ONLY] Core Chat', component: 'clabs-chat', }; diff --git a/packages/web-components/src/components/chat/components/chat/src/chat.ts b/packages/web-components/src/components/chat/components/chat/src/chat.ts index 45cc24e3b..53544caf4 100644 --- a/packages/web-components/src/components/chat/components/chat/src/chat.ts +++ b/packages/web-components/src/components/chat/components/chat/src/chat.ts @@ -71,7 +71,7 @@ export default class CLABSChat extends LitElement { * force-auto-update - force scroll down no matter what */ @property({ type: Boolean, attribute: 'force-auto-update', reflect: true }) - forceAutoUpdate; + forceAutoUpdate = true; /** * show launcher when closed diff --git a/packages/web-components/src/components/chat/components/codeElement/src/codeElement.scss b/packages/web-components/src/components/chat/components/codeElement/src/codeElement.scss index 32b9900a4..211b49d49 100644 --- a/packages/web-components/src/components/chat/components/codeElement/src/codeElement.scss +++ b/packages/web-components/src/components/chat/components/codeElement/src/codeElement.scss @@ -120,7 +120,6 @@ $css--plex: true !default; box-sizing: border-box; flex: 0 0 20px; border-inline-end: 1px solid transparent; - cursor: pointer; inline-size: 2px; max-block-size: 20px; padding-inline-end: 0.5em; @@ -128,6 +127,7 @@ $css--plex: true !default; } .#{$clabs-prefix}--chat-code-line-collapser svg { block-size: 20px; + cursor: pointer; inline-size: 20px; } @@ -370,7 +370,7 @@ $css--plex: true !default; .hljs-attr, .hljs-attribute { - color: $teal-60; + color: $orange-60; } .hljs-variable, @@ -501,7 +501,7 @@ $css--plex: true !default; .hljs-attr, .hljs-attribute { - color: $teal-50; + color: $orange-50; } .hljs-variable, diff --git a/packages/web-components/src/components/chat/components/codeElement/src/codeElement.ts b/packages/web-components/src/components/chat/components/codeElement/src/codeElement.ts index 941057984..bbe89411f 100644 --- a/packages/web-components/src/components/chat/components/codeElement/src/codeElement.ts +++ b/packages/web-components/src/components/chat/components/codeElement/src/codeElement.ts @@ -781,7 +781,7 @@ export default class codeElement extends LitElement { this._displayedContent = this._originalContent; this._currentlyEdited = false; - const codeEditedEvent = new CustomEvent('on-code-edit-change', { + const codeEditedEvent = new CustomEvent('on-code-edit-cancel', { detail: { previousLineData: this._originalContent, newLineText: this._originalContent, diff --git a/packages/web-components/src/components/chat/components/diagramElement/__stories__/diagramElement.stories.js b/packages/web-components/src/components/chat/components/diagramElement/__stories__/diagramElement.stories.js index 6cb6070e2..7512f48df 100644 --- a/packages/web-components/src/components/chat/components/diagramElement/__stories__/diagramElement.stories.js +++ b/packages/web-components/src/components/chat/components/diagramElement/__stories__/diagramElement.stories.js @@ -12,7 +12,7 @@ import { html } from 'lit'; // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction export default { - title: 'Components/Research/Diagram', + title: 'Components/AI Components/Diagram', }; const examples = [ @@ -211,6 +211,8 @@ export const Showcase = { html` ${examples.map( (example) => html` +

${example.title}

+
\ No newline at end of file diff --git a/packages/web-components/src/components/chat/components/diagramElement/src/diagramElement.ts b/packages/web-components/src/components/chat/components/diagramElement/src/diagramElement.ts index 7a2468a17..cdb9ab967 100644 --- a/packages/web-components/src/components/chat/components/diagramElement/src/diagramElement.ts +++ b/packages/web-components/src/components/chat/components/diagramElement/src/diagramElement.ts @@ -123,7 +123,7 @@ export default class diagramElement extends LitElement { * @param {String} mode - fullscreen, test or default */ _buildOptions() { - const whiteTheme = { + /*const whiteTheme = { primaryColor: '#a6c8ff', primaryBorderColor: '#0f62fe', primaryTextColor: '#161616', @@ -163,6 +163,194 @@ export default class diagramElement extends LitElement { noteBkgColor: '#8a3ffc', noteBorderColor: '#6f6f6f', noteTextColor: '#f4f4f4', + };*/ + + const whiteTheme = { + // tell Mermaid this is a light theme + darkMode: false, + + // general + background: '#ffffff', + primaryColor: '#0f62fe', + secondaryColor: '#393939', + mainBkg: '#0f62fe', + secondBkg: '#393939', + lineColor: '#dcdcdc', + border1: '#002d9c', + border2: '#6f6f6f', + arrowheadColor: '#dcdcdc', + fontFamily: "'IBM Plex Sans', sans-serif", + fontSize: '16px', + + // derived + tertiaryColor: '#0f62fe', + primaryBorderColor: '#002d9c', + secondaryBorderColor: '#6f6f6f', + tertiaryBorderColor: '#002d9c', + primaryTextColor: '#ffffff', + secondaryTextColor: '#ffffff', + tertiaryTextColor: '#ffffff', + textColor: '#161616', + THEME_COLOR_LIMIT: 12, + + // flowchart + nodeBkg: '#0f62fe', + nodeBorder: '#002d9c', + clusterBkg: '#0f62fe', + clusterBorder: '#002d9c', + defaultLinkColor: '#dcdcdc', + titleColor: '#161616', + edgeLabelBackground: '#ffffff', + + // sequence + actorBorder: '#002d9c', + actorBkg: '#0f62fe', + actorTextColor: '#ffffff', + actorLineColor: '#002d9c', + signalColor: '#161616', + signalTextColor: '#161616', + labelBoxBkgColor: '#0f62fe', + labelBoxBorderColor: '#002d9c', + labelTextColor: '#ffffff', + loopTextColor: '#ffffff', + noteBkgColor: '#da1e28', + noteBorderColor: '#da1e28', + noteTextColor: '#ffffff', + activationBorderColor: '#393939', + activationBkgColor: '#393939', + sequenceNumberColor: '#dcdcdc', + + // Gantt + sectionBkgColor: '#0f62fe', + altSectionBkgColor: '#f3f3f3', + sectionBkgColor2: '#0f62fe', + excludeBkgColor: '#ffffff', + taskBorderColor: '#002d9c', + taskBkgColor: '#ffffff', + taskTextLightColor: '#ffffff', + taskTextColor: '#161616', + taskTextDarkColor: '#000000', + taskTextOutsideColor: '#161616', + taskTextClickableColor: '#0f62fe', + activeTaskBorderColor: '#002d9c', + activeTaskBkgColor: '#0f62fe', + gridColor: '#393939', + doneTaskBkgColor: '#dcdcdc', + doneTaskBorderColor: '#e0e0e0', + critBorderColor: '#da1e28', + critBkgColor: '#da1e28', + todayLineColor: '#da1e28', + vertLineColor: '#00bfff', + + // C4 context + personBorder: '#002d9c', + personBkg: '#0f62fe', + + // architecture + archEdgeColor: '#dcdcdc', + archEdgeArrowColor: '#dcdcdc', + archEdgeWidth: '3', + archGroupBorderColor: '#002d9c', + archGroupBorderWidth: '2px', + + // state & error + labelColor: '#161616', + errorBkgColor: '#da1e28', + errorTextColor: '#ffffff', + }; + + const g100Theme = { + // dark mode on + darkMode: true, + + // general + background: '#161616', + primaryColor: '#0f62fe', + secondaryColor: '#393939', + mainBkg: '#0f62fe', + secondBkg: '#393939', + lineColor: '#262626', + border1: '#002d9c', + border2: '#6f6f6f', + arrowheadColor: '#262626', + fontFamily: "'IBM Plex Sans', sans-serif", + fontSize: '16px', + + // derived + tertiaryColor: '#0f62fe', + primaryBorderColor: '#002d9c', + secondaryBorderColor: '#6f6f6f', + tertiaryBorderColor: '#002d9c', + primaryTextColor: '#ffffff', + secondaryTextColor: '#ffffff', + tertiaryTextColor: '#ffffff', + textColor: '#f4f4f4', + THEME_COLOR_LIMIT: 12, + + // flowchart + nodeBkg: '#0f62fe', + nodeBorder: '#002d9c', + clusterBkg: '#0f62fe', + clusterBorder: '#002d9c', + defaultLinkColor: '#262626', + titleColor: '#ffffff', + edgeLabelBackground: '#161616', + + // sequence + actorBorder: '#002d9c', + actorBkg: '#0f62fe', + actorTextColor: '#ffffff', + actorLineColor: '#002d9c', + signalColor: '#f4f4f4', + signalTextColor: '#f4f4f4', + labelBoxBkgColor: '#0f62fe', + labelBoxBorderColor: '#002d9c', + labelTextColor: '#ffffff', + loopTextColor: '#ffffff', + noteBkgColor: '#da1e28', + noteBorderColor: '#da1e28', + noteTextColor: '#ffffff', + activationBorderColor: '#393939', + activationBkgColor: '#393939', + sequenceNumberColor: '#262626', + + // Gantt + sectionBkgColor: '#0f62fe', + altSectionBkgColor: '#262626', + sectionBkgColor2: '#0f62fe', + excludeBkgColor: '#161616', + taskBorderColor: '#002d9c', + taskBkgColor: '#161616', + taskTextLightColor: '#ffffff', + taskTextColor: '#f4f4f4', + taskTextDarkColor: '#000000', + taskTextOutsideColor: '#f4f4f4', + taskTextClickableColor: '#0f62fe', + activeTaskBorderColor: '#002d9c', + activeTaskBkgColor: '#0f62fe', + gridColor: '#393939', + doneTaskBkgColor: '#262626', + doneTaskBorderColor: '#3d3d3d', + critBorderColor: '#da1e28', + critBkgColor: '#da1e28', + todayLineColor: '#da1e28', + vertLineColor: '#00bfff', + + // C4 context + personBorder: '#002d9c', + personBkg: '#0f62fe', + + // architecture + archEdgeColor: '#262626', + archEdgeArrowColor: '#262626', + archEdgeWidth: '3', + archGroupBorderColor: '#002d9c', + archGroupBorderWidth: '2px', + + // state & error + labelColor: '#f4f4f4', + errorBkgColor: '#da1e28', + errorTextColor: '#ffffff', }; const currentTheme = this.theme == 'light' ? whiteTheme : g100Theme; const mainTheme: any = 'base'; diff --git a/packages/web-components/src/components/chat/components/formulaElement/__stories__/docs.mdx b/packages/web-components/src/components/chat/components/formulaElement/__stories__/docs.mdx index 14a2ee172..21dc8dc6a 100644 --- a/packages/web-components/src/components/chat/components/formulaElement/__stories__/docs.mdx +++ b/packages/web-components/src/components/chat/components/formulaElement/__stories__/docs.mdx @@ -16,6 +16,24 @@ import packageJson from '../../../package.json'; * **Target library maintainer(s) / PR Reviewer(s):** N/A * **Support channel:** `#carbon-labs` + +Mathematical formulas are essential to clearly let users understand how the model reasoned for any problem requiring mathematical reasoning: +* How many 8x8 inch tiles to cover with 20x42ft patio? * +* How many days until march 25th 2028? * +* Which planet is closest to earth on average given all orbits? * + +These rely on LaTeX - the common language in all Academic/Research publication processes. It's extensive use makes it ideal for LLM-generation + +## Example + +### MathJax rendering + - \ No newline at end of file + + +### Underlying code + + + diff --git a/packages/web-components/src/components/chat/components/formulaElement/__stories__/formulaElement.stories.js b/packages/web-components/src/components/chat/components/formulaElement/__stories__/formulaElement.stories.js index e4e4a2f26..f3f7d5ae6 100644 --- a/packages/web-components/src/components/chat/components/formulaElement/__stories__/formulaElement.stories.js +++ b/packages/web-components/src/components/chat/components/formulaElement/__stories__/formulaElement.stories.js @@ -46,18 +46,6 @@ const mathExamples = [ }, ]; -export const Default = { - /** - * Renders the template for Storybook - * - * @returns {TemplateResult<1>} - */ - render: () => - html` - `, -}; - export const Showcase = { /** * Renders the template for Storybook diff --git a/packages/web-components/src/components/chat/components/historyViewer/__stories__/historyViewer.stories.js b/packages/web-components/src/components/chat/components/historyViewer/__stories__/historyViewer.stories.js index 05caa647f..f72431302 100644 --- a/packages/web-components/src/components/chat/components/historyViewer/__stories__/historyViewer.stories.js +++ b/packages/web-components/src/components/chat/components/historyViewer/__stories__/historyViewer.stories.js @@ -12,7 +12,7 @@ import { html } from 'lit'; import examples from './example.json'; // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction export default { - title: 'Components/Research/History Viewer', + title: 'Components/AI Components/[Experimental] History Viewer', }; export const Default = { diff --git a/packages/web-components/src/components/chat/components/messages/src/messages.template.ts b/packages/web-components/src/components/chat/components/messages/src/messages.template.ts index 2ad334510..5541639d0 100644 --- a/packages/web-components/src/components/chat/components/messages/src/messages.template.ts +++ b/packages/web-components/src/components/chat/components/messages/src/messages.template.ts @@ -49,9 +49,9 @@ export function messagesTemplate(customElementClass) { aria-labelledby="${clabsPrefix}--chat-messages-target-reader-label" class="${clabsPrefix}--chat-messages-container ${streamResponses ? clabsPrefix + '--chat-messages-container-streaming' - : ''} - - ${dockingEnabled ? clabsPrefix + '--chat-messages-container-docked' : ''}"> + : ''} ${dockingEnabled + ? clabsPrefix + '--chat-messages-container-docked' + : ''}"> ${computedMessages ? html` diff --git a/packages/web-components/src/components/chat/components/messages/src/messages.ts b/packages/web-components/src/components/chat/components/messages/src/messages.ts index 6def85874..4abb5e0b1 100644 --- a/packages/web-components/src/components/chat/components/messages/src/messages.ts +++ b/packages/web-components/src/components/chat/components/messages/src/messages.ts @@ -149,9 +149,9 @@ export default class messages extends LitElement { * detect when component is rendered to process rawtext */ firstUpdated() { - this.scrollDiv = this.shadowRoot?.querySelector( + this.scrollDiv = this; /*this.shadowRoot?.querySelector( '.clabs--chat-messages-container' - ); + );*/ this._scrollToBottom(); } @@ -284,7 +284,9 @@ export default class messages extends LitElement { /** auto-scroll chat-messages div when a new message has appeared **/ _updateScroll() { + console.log('update'); if (this.scrollDiv instanceof HTMLElement) { + console.log('div found'); if (!this.scrollTimeout) { this.scrollTimeout = setTimeout(() => { if (this._autoScroll || this.forceScrollDown) { @@ -292,6 +294,7 @@ export default class messages extends LitElement { if (this._limitScroll) { scrollTarget = this._previousScrollHeight; } + console.log(this.scrollDiv); this.scrollDiv?.scrollTo({ top: scrollTarget, behavior: 'smooth', diff --git a/packages/web-components/src/components/chat/components/popupElement/src/popupElement.scss b/packages/web-components/src/components/chat/components/popupElement/src/popupElement.scss index b97ab0d49..25ee71ab1 100644 --- a/packages/web-components/src/components/chat/components/popupElement/src/popupElement.scss +++ b/packages/web-components/src/components/chat/components/popupElement/src/popupElement.scss @@ -192,6 +192,12 @@ text-align: start; } + .#{$clabs-prefix}--chat-popup-element { + margin-block-start: 1rem; + padding-inline: 1rem; + text-align: start; + } + .#{$clabs-prefix}--chat-popup-header-section { display: flex; box-sizing: border-box; diff --git a/packages/web-components/src/components/chat/components/popupElement/src/popupElement.template.ts b/packages/web-components/src/components/chat/components/popupElement/src/popupElement.template.ts index dc81d6887..bb2784fa0 100644 --- a/packages/web-components/src/components/chat/components/popupElement/src/popupElement.template.ts +++ b/packages/web-components/src/components/chat/components/popupElement/src/popupElement.template.ts @@ -177,23 +177,27 @@ export function popupElementTemplate(customElementClass) { ` : ''} ${radioTitle - ? html`
${radioTitle}
+ ? html`
+ ${radioTitle} +

` : ''} ${radioButtons ? html` - - ${radioButtons?.map( - (item) => html` - - ` - )} - +
+ + ${radioButtons?.map( + (item) => html` + + ` + )} + +
` : ''} ${model diff --git a/packages/web-components/src/components/chat/components/popupElement/src/popupElement.ts b/packages/web-components/src/components/chat/components/popupElement/src/popupElement.ts index 652747408..dfce30957 100644 --- a/packages/web-components/src/components/chat/components/popupElement/src/popupElement.ts +++ b/packages/web-components/src/components/chat/components/popupElement/src/popupElement.ts @@ -204,7 +204,7 @@ export default class popupElement extends LitElement { /** show dropdown with list of violation types, which auto-renders subelements */ @property({ type: Boolean, attribute: 'custom-policy-mode' }) - customPolicyMode = false; + customPolicyMode; /** * feedback ai content diff --git a/packages/web-components/src/components/tag/__stories__/tag.mdx b/packages/web-components/src/components/tag/_stories-dont-show_/tag.mdx similarity index 100% rename from packages/web-components/src/components/tag/__stories__/tag.mdx rename to packages/web-components/src/components/tag/_stories-dont-show_/tag.mdx diff --git a/packages/web-components/src/components/tag/__stories__/tag.stories.js b/packages/web-components/src/components/tag/_stories-dont-show_/tag.stories.js similarity index 100% rename from packages/web-components/src/components/tag/__stories__/tag.stories.js rename to packages/web-components/src/components/tag/_stories-dont-show_/tag.stories.js diff --git a/yarn.lock b/yarn.lock index f72b1fb64..4c19c46a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11335,9 +11335,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000844, caniuse-lite@npm:^1.0.30001487, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669": - version: 1.0.30001687 - resolution: "caniuse-lite@npm:1.0.30001687" - checksum: 10c0/9ca0f6d33dccaf4692339d0fda50e03e4dd7eb7f25faabd1cb33e2099d9a76b0bc30c37be3315e91c1d990da1b5cc864eee2077494f4d0ba94d68b48fe2ea7f1 + version: 1.0.30001718 + resolution: "caniuse-lite@npm:1.0.30001718" + checksum: 10c0/67f9ad09bc16443e28d14f265d6e468480cd8dc1900d0d8b982222de80c699c4f2306599c3da8a3fa7139f110d4b30d49dbac78f215470f479abb6ffe141d5d3 languageName: node linkType: hard