From 75a3819199ed953dc3e9603426689fef53f180a4 Mon Sep 17 00:00:00 2001 From: Owen Cornec Date: Tue, 26 Nov 2024 13:32:01 -0500 Subject: [PATCH 1/3] chore(chat): new feedback, chart analysis --- .../__stories__/cardElement.stories.js | 2 +- .../__stories__/carouselElement.stories.js | 2 +- .../__stories__/chartElement.stories.ts | 23 +- .../chartElement/__stories__/examples3.json | 452 ++++++++++++++++++ .../chartElement/src/chartElement.ts | 75 +++ .../chat/__stories__/chat.stories.js | 100 +++- .../__stories__/codeElement.stories.js | 2 +- .../codeElement/src/codeElement.scss | 3 - .../__stories__/diagramElement.stories.js | 2 +- .../editableTextElement.stories.js | 2 +- .../__stories__/errorElement.stories.js | 2 +- .../feedbackElement/__stories__/docs.mdx | 116 ----- .../__stories__/feedbackElement.stories.js | 46 -- .../feedbackElement/feedbackElement.ts | 31 -- .../feedbackElement/src/feedbackElement.scss | 98 ---- .../src/feedbackElement.template.ts | 102 ---- .../feedbackElement/src/feedbackElement.ts | 244 ---------- .../__stories__/fileUploadElement.stories.js | 2 +- .../__stories__/formulaElement.stories.js | 2 +- .../formulaElement/src/formulaElement.scss | 1 + .../chat/components/header/src/header.scss | 3 + .../components/header/src/header.template.ts | 41 +- .../chat/components/header/src/header.ts | 30 +- .../__stories__/historyViewer.stories.js | 2 +- .../__stories__/imageElement.stories.js | 2 +- .../__stories__/linkListElement.stories.js | 2 +- .../__stories__/listElement.stories.js | 2 +- .../__stories__/loadingElement.stories.js | 2 +- .../chat/components/message/src/message.ts | 2 +- .../__stories__/molecularElement.stories.js | 2 +- .../__stories__/popupElement.stories.js | 4 +- .../popupElement/src/popupElement.scss | 112 ++++- .../popupElement/src/popupElement.template.ts | 128 +++-- .../popupElement/src/popupElement.ts | 79 ++- .../__stories__/tableElement.stories.js | 2 +- .../__stories__/tagListElement.stories.js | 3 +- .../tagListElement/src/tagListElement.scss | 5 + .../src/tagListElement.template.ts | 63 ++- .../tagListElement/src/tagListElement.ts | 8 +- .../__stories__/textElement.stories.js | 2 +- .../src/components/chat/package.json | 2 +- .../src/components/feedback/package.json | 2 +- .../src/components/network-graph/package.json | 2 +- .../components/tag/__stories__/tag.stories.js | 2 +- .../src/components/tag/package.json | 2 +- .../src/components/ux-control/package.json | 2 +- yarn.lock | 426 +++++++++++------ 47 files changed, 1294 insertions(+), 945 deletions(-) create mode 100644 packages/web-components/src/components/chat/components/chartElement/__stories__/examples3.json delete mode 100644 packages/web-components/src/components/chat/components/feedbackElement/__stories__/docs.mdx delete mode 100644 packages/web-components/src/components/chat/components/feedbackElement/__stories__/feedbackElement.stories.js delete mode 100644 packages/web-components/src/components/chat/components/feedbackElement/feedbackElement.ts delete mode 100644 packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.scss delete mode 100644 packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.template.ts delete mode 100644 packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.ts diff --git a/packages/web-components/src/components/chat/components/cardElement/__stories__/cardElement.stories.js b/packages/web-components/src/components/chat/components/cardElement/__stories__/cardElement.stories.js index 8bdc2c72..e970b705 100644 --- a/packages/web-components/src/components/chat/components/cardElement/__stories__/cardElement.stories.js +++ b/packages/web-components/src/components/chat/components/cardElement/__stories__/cardElement.stories.js @@ -13,7 +13,7 @@ import '@carbon/web-components/es/components/button/index.js'; // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction export default { - title: 'Components/Chat/Card', + title: 'Components/Core/Card', component: 'clabs-chat-card', }; diff --git a/packages/web-components/src/components/chat/components/carouselElement/__stories__/carouselElement.stories.js b/packages/web-components/src/components/chat/components/carouselElement/__stories__/carouselElement.stories.js index 3734aed7..80f0f626 100644 --- a/packages/web-components/src/components/chat/components/carouselElement/__stories__/carouselElement.stories.js +++ b/packages/web-components/src/components/chat/components/carouselElement/__stories__/carouselElement.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/Chat/Carousel', + title: 'Components/Core/Carousel', }; const carouselExamples = [ 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 4dfd10fb..60ecce42 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 @@ -10,10 +10,11 @@ import '../chartElement'; import { html } from 'lit'; import complexExamples from './examples2.json'; +import otherExamples from './examples3.json'; // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction export default { - title: 'Components/Chart', + title: 'Components/Experimental/Chart', component: 'clabs-chat-chart', }; @@ -386,6 +387,26 @@ export const ComplexExamples = { `, }; +export const FacetingTest = { + /** + * Renders the template for Showcase Storybook + * @returns {TemplateResult<1>} + */ + render: () => + html` + ${otherExamples.map( + (item) => + html`

${item.name}

+ + ` + )} + `, +}; + export const RepeatingLayerCharts = { /** * Renders the template for Showcase Storybook diff --git a/packages/web-components/src/components/chat/components/chartElement/__stories__/examples3.json b/packages/web-components/src/components/chat/components/chartElement/__stories__/examples3.json new file mode 100644 index 00000000..1f14b5c1 --- /dev/null +++ b/packages/web-components/src/components/chat/components/chartElement/__stories__/examples3.json @@ -0,0 +1,452 @@ +[ + { + "name": "trellis", + "spec": { + "name": "trellis_barley", + "data": { + "url": "https://vega.github.io/vega-lite/data/barley.json" + }, + "mark": "point", + "height": { + "step": 12 + }, + "encoding": { + "facet": { + "field": "site", + "type": "ordinal", + "columns": 2, + "sort": { + "op": "median", + "field": "yield" + } + }, + "x": { + "aggregate": "median", + "field": "yield", + "type": "quantitative", + "scale": { + "zero": false + } + }, + "y": { + "field": "variety", + "type": "ordinal", + "sort": "-x" + }, + "color": { + "field": "year", + "type": "nominal" + } + } + } + }, + { + "name": "trellis_barley", + "spec": { + "name": "trellis_barley", + "data": { + "url": "https://vega.github.io/vega-lite/data/barley.json" + }, + "mark": "point", + "height": { + "step": 12 + }, + "encoding": { + "facet": { + "field": "site", + "type": "ordinal", + "columns": 2, + "sort": { + "op": "median", + "field": "yield" + } + }, + "x": { + "aggregate": "median", + "field": "yield", + "type": "quantitative", + "scale": { + "zero": false + } + }, + "y": { + "field": "variety", + "type": "ordinal", + "sort": "-x" + }, + "color": { + "field": "year", + "type": "nominal" + } + } + } + }, + { + "name": "hconcat", + "spec": { + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "Horizontally concatenated charts that show different types of discretizing scales.", + "data": { + "values": [ + { + "a": "A", + "b": 28 + }, + { + "a": "B", + "b": 55 + }, + { + "a": "C", + "b": 43 + }, + { + "a": "D", + "b": 91 + }, + { + "a": "E", + "b": 81 + }, + { + "a": "F", + "b": 53 + }, + { + "a": "G", + "b": 19 + }, + { + "a": "H", + "b": 87 + }, + { + "a": "I", + "b": 52 + } + ] + }, + "hconcat": [ + { + "mark": "circle", + "encoding": { + "y": { + "field": "b", + "type": "nominal", + "sort": null, + "axis": { + "ticks": false, + "domain": false, + "title": null + } + }, + "size": { + "field": "b", + "type": "quantitative", + "scale": { + "type": "quantize" + } + }, + "color": { + "field": "b", + "type": "quantitative", + "scale": { + "type": "quantize", + "zero": true + }, + "legend": { + "title": "Quantize" + } + } + } + }, + { + "mark": "circle", + "encoding": { + "y": { + "field": "b", + "type": "nominal", + "sort": null, + "axis": { + "ticks": false, + "domain": false, + "title": null + } + }, + "size": { + "field": "b", + "type": "quantitative", + "scale": { + "type": "quantile", + "range": [ + 80, + 160, + 240, + 320, + 400 + ] + } + }, + "color": { + "field": "b", + "type": "quantitative", + "scale": { + "type": "quantile", + "scheme": "magma" + }, + "legend": { + "format": "d", + "title": "Quantile" + } + } + } + }, + { + "mark": "circle", + "encoding": { + "y": { + "field": "b", + "type": "nominal", + "sort": null, + "axis": { + "ticks": false, + "domain": false, + "title": null + } + }, + "size": { + "field": "b", + "type": "quantitative", + "scale": { + "type": "threshold", + "domain": [ + 30, + 70 + ], + "range": [ + 80, + 200, + 320 + ] + } + }, + "color": { + "field": "b", + "type": "quantitative", + "scale": { + "type": "threshold", + "domain": [ + 30, + 70 + ], + "scheme": "viridis" + }, + "legend": { + "title": "Threshold" + } + } + } + } + ], + "resolve": { + "scale": { + "color": "independent", + "size": "independent" + } + } + } + }, + { + "name": "concat", + "spec": { + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "A population pyramid for the US in 2000.", + "data": { + "url": "https://vega.github.io/vega-lite/data/population.json" + }, + "transform": [ + { + "filter": "datum.year == 2000" + }, + { + "calculate": "datum.sex == 2 ? 'Female' : 'Male'", + "as": "gender" + } + ], + "spacing": 0, + "hconcat": [ + { + "transform": [ + { + "filter": { + "field": "gender", + "equal": "Female" + } + } + ], + "title": "Female", + "mark": "bar", + "encoding": { + "y": { + "field": "age", + "axis": null, + "sort": "descending" + }, + "x": { + "aggregate": "sum", + "field": "people", + "title": "population", + "axis": { + "format": "s" + }, + "sort": "descending" + }, + "color": { + "field": "gender", + "scale": { + "range": [ + "#675193", + "#ca8861" + ] + }, + "legend": null + } + } + }, + { + "width": 20, + "view": { + "stroke": null + }, + "mark": { + "type": "text", + "align": "center" + }, + "encoding": { + "y": { + "field": "age", + "type": "ordinal", + "axis": null, + "sort": "descending" + }, + "text": { + "field": "age", + "type": "quantitative" + } + } + }, + { + "transform": [ + { + "filter": { + "field": "gender", + "equal": "Male" + } + } + ], + "title": "Male", + "mark": "bar", + "encoding": { + "y": { + "field": "age", + "title": null, + "axis": null, + "sort": "descending" + }, + "x": { + "aggregate": "sum", + "field": "people", + "title": "population", + "axis": { + "format": "s" + } + }, + "color": { + "field": "gender", + "legend": null + } + } + } + ], + "config": { + "view": { + "stroke": null + }, + "axis": { + "grid": false + } + } + } + }, + { + "name": "repeat", + "spec": { + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "repeat": { + "row": [ + "Horsepower", + "Acceleration", + "Miles_per_Gallon" + ], + "column": [ + "Miles_per_Gallon", + "Acceleration", + "Horsepower" + ] + }, + "spec": { + "data": { + "url": "https://vega.github.io/vega-lite/examples/data/cars.json" + }, + "mark": "point", + "params": [ + { + "name": "brush", + "select": { + "type": "interval", + "resolve": "union", + "on": "[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!", + "translate": "[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!", + "zoom": "wheel![event.shiftKey]" + } + }, + { + "name": "grid", + "select": { + "type": "interval", + "resolve": "global", + "translate": "[pointerdown[!event.shiftKey], window:pointerup] > window:pointermove!", + "zoom": "wheel![!event.shiftKey]" + }, + "bind": "scales" + } + ], + "encoding": { + "x": { + "field": { + "repeat": "column" + }, + "type": "quantitative" + }, + "y": { + "field": { + "repeat": "row" + }, + "type": "quantitative", + "axis": { + "minExtent": 30 + } + }, + "color": { + "condition": { + "param": "brush", + "field": "Origin", + "type": "nominal" + }, + "value": "grey" + } + } + } + } + } +] \ 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 deb4fb5c..8020ea24 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 @@ -1268,6 +1268,7 @@ export default class chartElement extends LitElement { */ _prepareVisualization(premadeSpec?: object) { let spec: any = {}; + if (!premadeSpec) { try { spec = JSON.parse(this.content); @@ -1314,6 +1315,12 @@ export default class chartElement extends LitElement { delete tempSubSpec['padding']; layeredSpec['layer'][index] = tempSubSpec; }*/ + } else if (spec['hconcat']) { + plainSpec = this._configUpdate(spec); + } else if (spec.encoding?.facet) { + plainSpec = this._configUpdate(spec); + } else if (spec['vconcat']) { + plainSpec = this._configUpdate(spec); } else if (spec['repeat']) { this._specType = 'repeated'; const currentContainerWidth = this.clientWidth; @@ -1410,6 +1417,74 @@ export default class chartElement extends LitElement { return ''; } + /** + * _configUpdate - apply changes for carbonization + * @param {object} spec - vega sepcification JSON + */ + _configUpdate(spec) { + const specCopy = this._prepareSpecification(spec, true, true, 0); + const coreConfig = specCopy.config; + const newSpec = this._subConfigUpdate(spec, coreConfig); + return newSpec; + } + + /** + * _subConfigUpdate - apply changes for carbonization + * @param {object} subSpec - vega sepcification JSON + * @param {object} coreConfig - added carbon styling + */ + _subConfigUpdate(subSpec, coreConfig) { + if (!subSpec) { + return; + } + + subSpec.config = { + ...subSpec.config, + ...coreConfig, + }; + + if (subSpec.layer) { + subSpec.layer.forEach((layer) => + this._subConfigUpdate(layer, coreConfig) + ); + } + if (subSpec.facet) { + if (subSpec.facet.spec) { + this._subConfigUpdate(subSpec.facet.spec, coreConfig); + ['row', 'column'].forEach((facetType) => { + if (subSpec.facet[facetType]?.spec) { + this._subConfigUpdate(subSpec.facet[facetType].spec, coreConfig); + } + }); + } + } + if (subSpec.repeat) { + if (subSpec.repeat.spec) { + this._subConfigUpdate(subSpec.repeat.spec, coreConfig); + } + if (subSpec.repeat.layer) { + subSpec.repeat.layer.forEach((layer) => + this._subConfigUpdate(layer, coreConfig) + ); + } + } + if (subSpec.spec) { + this._subConfigUpdate(subSpec.spec, coreConfig); + } + if (subSpec.hconcat) { + subSpec.hconcat.forEach((layer) => + this._subConfigUpdate(layer, coreConfig) + ); + } + if (subSpec.vconcat) { + subSpec.vconcat.forEach((layer) => + this._subConfigUpdate(layer, coreConfig) + ); + } + + return subSpec; + } + /** * _prepareSpecification - edit Vega specific to change mark values and apply colors or rewrite config attribute * @param {object} spec - vega sepcification JSON 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 f9172485..32239f0a 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/Chat', + title: 'Components/Chat', component: 'clabs-chat', }; @@ -26,6 +26,33 @@ export default { ], */ +const codeExamples = [ + [ + 'code', + '```from math import sqrt\n#prime function to check given number prime or not:\ndef Prime(number,itr):\n\t#base condition\n\tif itr == 1:\n\t\treturn True\n\t#if given number divided by itr or not\n\tif number % itr == 0:\n\t\treturn False\n\t#Recursive function Call\n\tif Prime(number,itr-1) == False:\n\t\treturn False\n\treturn True\n```', + '', + 'Prime function in python', + ], + [ + 'editable-code', + '```\n\n\t\n\t\tThis is the title of the webpage\n\t\n\t\n\t\n\t\t

This is an example paragraph. Anything in the body tag will appear on the page, just like this p tag and its contents.

\n\t\n```', + '', + 'Webpage example', + ], + [ + 'editable-code', + '```user@Macbook-Air server % npm run build\nuser@Macbook-Air server % npm run lint:styles --fix\nuser@Macbook-Air server % npm format:write\nuser@Macbook-Air server % python3 server.py\n```', + '', + 'Multi-line command line', + ], + [ + 'editable-code', + "```CREATE TABLE employees (\nid INT PRIMARY KEY,\nfirst_name VARCHAR(50),\nlast_name VARCHAR(50),\nemail VARCHAR(100),\ndepartment_id INT,\nhire_date DATE\n);\n-- Creating a table named 'departments'\nCREATE TABLE departments (\nid INT PRIMARY KEY,\nname VARCHAR(50)\n);\n-- Inserting data into the 'departments' table\nINSERT INTO departments (id, name) VALUES\n(1, 'Human Resources'),\n(2, 'Marketing'),\n(3, 'Sales'),\n(4, 'IT');\n-- Inserting data into the 'employees' table\nINSERT INTO employees (id, first_name, last_name, email, department_id, hire_date) VALUES\n(1, 'John', 'Doe', 'john.doe@example.com', 3, '2020-01-01'),\n(2, 'Jane', 'Doe', 'jane.doe@example.com', 2, '2019-06-15'),\n(3, 'Jim', 'Smith', 'jim.smith@example.com', 3, '2021-02-20');\n```", + '', + 'SQL example', + ], +]; + const coreExamples = [ [ 'text', @@ -45,13 +72,13 @@ const coreExamples = [ ], [ 'code', - 'from math import sqrt\n#prime function to check given number prime or not:\ndef Prime(number,itr):\n\t#base condition\n\tif itr == 1:\n\t\treturn True\n\t#if given number divided by itr or not\n\tif number % itr == 0:\n\t\treturn False\n\t#Recursive function Call\n\tif Prime(number,itr-1) == False:\n\t\treturn False\n\treturn True\n', + '```from math import sqrt\n#prime function to check given number prime or not:\ndef Prime(number,itr):\n\t#base condition\n\tif itr == 1:\n\t\treturn True\n\t#if given number divided by itr or not\n\tif number % itr == 0:\n\t\treturn False\n\t#Recursive function Call\n\tif Prime(number,itr-1) == False:\n\t\treturn False\n\treturn True\n```', '', 'Prime function in python', ], [ 'editable-code', - '\n\n\t\n\t\tThis is the title of the webpage\n\t\n\t\n\t\n\t\t

This is an example paragraph. Anything in the body tag will appear on the page, just like this p tag and its contents.

\n\t\n', + '```\n\n\t\n\t\tThis is the title of the webpage\n\t\n\t\n\t\n\t\t

This is an example paragraph. Anything in the body tag will appear on the page, just like this p tag and its contents.

\n\t\n```', '', 'Webpage example', ], @@ -121,9 +148,10 @@ const coreExamples = [ 'SEGMENTATION ERROR: Failed to render the content provided. (example)', ], ['loading', ''], + //['html-text','\n'], [ 'html-text', - "

This is using a p tag, styled with Comic Sans, sized at 20px and colored in GoldenRod

", + '

This is using a p tag, styled with Times New Roman, centered text, sized at 28px and colored in DarkGoldenrod.

', ], [ 'list', @@ -149,7 +177,7 @@ const coreExamples = [ '', 'Smiles representation of Thyroxine from PubChem', ], - [ + /*[ 'diagram', `sequenceDiagram participant web as Web Browser @@ -181,7 +209,7 @@ const coreExamples = [ end`, '', 'Architecture Diagram example', - ], + ],*/ [ 'chart', '{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"A scatterplot showing body mass and flipper lengths of penguins.","data":{"url":"https://vega.github.io/vega-lite/examples/data/penguins.json"},"mark":"point","encoding":{"x":{"field":"Flipper Length (mm)","type":"quantitative","scale":{"zero":false}},"y":{"field":"Body Mass (g)","type":"quantitative","scale":{"zero":false}},"color":{"field":"Species","type":"nominal"}}}', @@ -784,6 +812,26 @@ const rawTextExamples = { '\n'; return acc; }, ''), + Code: + 'user:Show me a prime function in Python, a webpage tenplate, a multiline command line and a SQL query:\nbot:' + + codeExamples.reduce((acc, item, index) => { + acc += + '' + + (index + 1) + + '. Here is a <clabs-chat-' + + item[0] + + '> element' + + (item[2] ? ' of type ' + item[2] + '' : '') + + ':
' + + (item[3] + ? '' + + item[3] + + '\n' + : '\n') + + item[1] + + '\n'; + return acc; + }, ''), Formulas: "user:Give me a dozen math formulas as latex strings:\nbot:Cauchy-Schwarz Inequality\n \\(\\left( \\sum_{k=1}^n a_k b_k \\right)^{\\!\\!2} \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\\)\n Maxwell's Equations\n \\(\\begin{align} \\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} & = \\frac{4\\pi}{c}\\vec{\\mathbf{j}} \\ \\nabla \\cdot \\vec{\\mathbf{E}} & = 4 \\pi \\rho \\ \\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\ \\nabla \\cdot \\vec{\\mathbf{B}} & = 0 \\end{align}\\)\n Rogers-Ramanujan Identity\n \\(1 + \\frac{q^2}{(1-q)}+\\frac{q^6}{(1-q)(1-q^2)}+\\cdots = \\prod_{j=0}^{\\infty}\\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \\quad\\quad \\text{for $|q| < 1$}.\\)\n Cross Product Formula\n \\(\\mathbf{V}_1 \\times \\mathbf{V}_2 = \\begin{vmatrix} \\mathbf{i} & \\mathbf{j} & \\mathbf{k} \\ \\frac{\\partial X}{\\partial u} & \\frac{\\partial Y}{\\partial u} & 0 \\ \\frac{\\partial X}{\\partial v} & \\frac{\\partial Y}{\\partial v} & 0 \\ \\end{vmatrix}\\)\n String Theory Action\n \\( S = -\\frac{1}{2}\\int d^2\\sigma \\sqrt{-h} h^{ab}\\partial_a X^\\mu \\partial_b X^\\mu \\\\ \\frac{1}{4 \\pi \\alpha'} \\int d^2\\sigma \\sqrt{-h} \\left( h^{ab} \\partial_a X^\\mu \\partial_b X_\\mu + \\alpha' R \\Phi(X) \\right \\\\ [\\alpha_m^\\mu, \\alpha_n^\\nu] = m \\delta_{m+n,0} \\eta^{\\mu \\nu} \\)\n Custom: Tex stress test\n \\(\\begin{align} \\int_{0}^{\\infty} e^{-x^2} \\, dx & = \\frac{\\sqrt{\\pi}}{2} \\\\ \\sum_{n=1}^{\\infty} \\frac{1}{n^2} & = \\frac{\\pi^2}{6} \\\\ \\mathbf{A} \\mathbf{x} & = \\left[ \\begin{array}{ccc} a_{11} & a_{12} & a_{13} \\\\ a_{21} & a_{22} & a_{23} \\\\ a_{31} & a_{32} & a_{33} \\end{array} \\right] \\left[ \\begin{array}{c} x_1 \\\\ x_2 \\\\ x_3 \\end{array} \\right] \\\\ e^{i \\pi} + 1 & = 0 \\\\ \\lim_{x \\to 0} \\frac{\\sin x}{x} & = 1 \\\\ \\left( \\sum_{k=1}^n a_k b_k \\right)^2 & \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right) \\\\ \\begin{bmatrix} 1 & 2 & 3 \\\\ 4 & 5 & 6 \\\\ 7 & 8 & 9 \\end{bmatrix} \\begin{bmatrix} x \\\\ y \\\\ z \\end{bmatrix} & = \\begin{bmatrix} 1 \\cdot x + 2 \\cdot y + 3 \\cdot z \\\\ 4 \\cdot x + 5 \\cdot y + 6 \\cdot z \\\\ 7 \\cdot x + 8 \\cdot y + 9 \\cdot z \\end{bmatrix} \\\\ \\frac{d}{dx} \\left( \\frac{1}{x} \\right) & = -\\frac{1}{x^2}\\end{align}\\)\nHow else can I help you today?", 'List of flowers': @@ -802,6 +850,8 @@ const rawTextExamples = { 'user:Explain to me how your streaming capabilities work, then give me an example of every component you have available.\nbot:

Methodology:

\n data is sent in token by token into the Chat. With each token, the stream is automatically parsed. Blocks are detected depending on a variety of LLM conventions to denote in order:\n1. Text blocks with link/annotation markdowns\n2. Text blocks containing html components\n3. Code blocks delimited by a custom delimiter\n4. JSON objects displayed as code\n5. Unless they contain $schema then recategorized as charts\n6. Array elements containing text or URLs\n7. CSV table objects with predefined newline/seperator strings\n8. List elements starting with - * or numbered lists (such as this)\n9. Molecules defined by a SMILES string\n10.URLs of any kind, classified as files/videos/urls/images post-hoc\n

Here is a simple piece using the Code component:

\n```$ npm install --save carbon-components```\n

Here is text using annotations:

\nAbraham Lincoln was an American lawyer, politician, and statesman who served as the 16th [president of the United States](https://en.wikipedia.org/wiki/President_of_the_United_States) from 1861 until his [assassination](https://en.wikipedia.org/wiki/Assassination_of_Abraham_Lincoln) in 1865.\n Lincoln led the United States through the [American Civil War](https://en.wikipedia.org/wiki/American_Civil_War), defending the nation as a constitutional [union](https://en.wikipedia.org/wiki/Union_(American_Civil_War)), defeating the insurgent [Confederacy](https://en.wikipedia.org/wiki/Confederate_States_of_America), playing a major role in the [abolition of slavery](https://en.wikipedia.org/wiki/Abolitionism_in_the_United_States), expanding the power of the [federal government](https://en.wikipedia.org/wiki/Federal_government_of_the_United_States), and modernizing the [U.S. economy](https://en.wikipedia.org/wiki/Economy_of_the_United_States).\nLincoln was born into poverty in a [log cabin](https://en.wikipedia.org/wiki/Log_cabin) in [Kentucky](https://en.wikipedia.org/wiki/Kentucky) and was raised on the [frontier](https://en.wikipedia.org/wiki/American_frontier), mainly in [Indiana](https://en.wikipedia.org/wiki/Indiana).\n\nHere are [all links available in this article](https://en.wikipedia.org/wiki/President_of_the_United_States,https://en.wikipedia.org/wiki/Assassination_of_Abraham_Lincoln,https://en.wikipedia.org/wiki/American_Civil_War,https://en.wikipedia.org/wiki/Confederate_States_of_America,https://en.wikipedia.org/wiki/Abolitionism_in_the_United_States,https://en.wikipedia.org/wiki/Federal_government_of_the_United_States,https://en.wikipedia.org/wiki/Log_cabin,https://en.wikipedia.org/wiki/Kentucky,https://en.wikipedia.org/wiki/American_frontier,https://en.wikipedia.org/wiki/Indiana)\n

Here is an element of type "img" using the Image element (Picture of a Dahlia from bougs.com):

\nhttps://bouqs.com/blog/wp-content/uploads/2019/05/summer-dahlia.jpg\n

Here are Card elements of type "url" and "video":

\nhttps://en.wikipedia.org/wiki/Fireworks\nhttps://upload.wikimedia.org/wikipedia/commons/transcoded/d/da/Paris_lockdown_-_Vimeo.webm/Paris_lockdown_-_Vimeo.webm.1080p.vp9.webm\nImage Carousel example:\n["https://bouqs.com/blog/wp-content/uploads/2019/05/20_summer-cosmos.jpg","https://bouqs.com/blog/wp-content/uploads/2019/05/summer-dahlia.jpg","https://bouqs.com/blog/wp-content/uploads/2023/06/zinnia-gbcbfedd94_1280.jpg","https://bouqs.com/blog/wp-content/uploads/2021/09/chrysanthemum-5668882_1280.jpg","https://bouqs.com/blog/wp-content/uploads/2021/09/celosia-7299458_1280.jpg","https://bouqs.com/blog/wp-content/uploads/2021/05/sunflower-fields.jpg","https://bouqs.com/blog/wp-content/uploads/2021/09/snapdragon-20809_1280.jpg","https://bouqs.com/blog/wp-content/uploads/2021/09/strawflower-362280_1280.jpg"]\n

File Carousel example:

\n["https://vega.github.io/vega-lite/examples/data/disasters.csv","https://vega.github.io/editor/data/unemployment.tsv","https://vega.github.io/vega-lite/data/barley.json","https://vega.github.io/vega-lite/examples/data/ohlc.json","https://vega.github.io/vega-lite/examples/data/stocks.csv"]\n

Video Carousel example:

\n["https://upload.wikimedia.org/wikipedia/commons/transcoded/7/7d/Apollo_11._Television_clip_of_Buzz_descending_the_ladder_and_stepping_onto_the_moon%2C_1094228.ogv/Apollo_11._Television_clip_of_Buzz_descending_the_ladder_and_stepping_onto_the_moon%2C_1094228.ogv.360p.webm","https://upload.wikimedia.org/wikipedia/commons/transcoded/6/6c/Polar_orbit.ogv/Polar_orbit.ogv.360p.vp9.webm","https://upload.wikimedia.org/wikipedia/commons/transcoded/d/da/Paris_lockdown_-_Vimeo.webm/Paris_lockdown_-_Vimeo.webm.1080p.vp9.webm"]\n

Audio Carousel example:

\n["https://upload.wikimedia.org/wikipedia/commons/f/f5/Giovanni_Giuseppe_Cambini_-_Quintet_No._1_in_Bb_major%2C_movement_2.ogg","https://upload.wikimedia.org/wikipedia/commons/2/20/Franz_Liszt_-_Second_Hungarian_Rhapsody.ogg","https://upload.wikimedia.org/wikipedia/commons/b/b6/Johann_Sebastian_Bach_-_Klavierkonzert_d-moll_-_3._Allegro.ogg","https://upload.wikimedia.org/wikipedia/commons/2/25/Schuberts_8th_Symphony%2C_2nd_movement_Andante_con_moto_in_E_major.ogg","https://upload.wikimedia.org/wikipedia/commons/b/b4/Wolfgang_Amadeus_Mozart_-_Klarinettenkonzert_A-Dur_-_1._Allegro.ogg"]\n

URL example:

\n["https://www.wikipedia.org","https://www.ibm.com","https://www.google.com","https://www.reddit.com","https://www.github.com","https://www.arxiv.org","https://www.archive.org","https://www.instagram.com"]\nCephalostatin-1 in a SMILES format using the molecule component:\nCC(C)(O1)C[C@@H](O)[C@@]1(O2)[C@@H](C)[C@@H]3CC=C4[C@]3(C2)C(=O)C[C@H]5[C@H]4CC[C@@H](C6)[C@]5(C)Cc(n7)c6nc(C[C@@]89(C))c7C[C@@H]8CC[C@@H]%10[C@@H]9C[C@@H](O)[C@@]%11(C)C%10=C[C@H](O%12)[C@]%11(O)[C@H](C)[C@]%12(O%13)[C@H](O)C[C@@]%13(C)CO\n

Code example:

\n````/**\n * Copyright IBM Corp. 2016, 2023\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from "react";\nimport { DataTable } from "..";\nconst {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableContainer,\n\tTableHead,\n\tTableHeader,\n\tTableRow\n} = DataTable;\nimport mdx from "../DataTable.mdx";\nimport "./datatable-story.scss";\nexport default {\n\ttitle: "Components/DataTable/Basic",\n\tcomponent: DataTable,\n\tsubcomponents: {\n\t\tTableContainer,\n\t\tTable,\n\t\tTableHead,\n\t\tTableRow,\n\t\tTableHeader,\n\t\tTableBody,\n\t\tTableCell\n\t},\n\tparameters: {\n\t\tdocs: {\n\t\t\tpage: mdx\n\t\t}\n\t}\n};\nexport const Default = () => {\n\tconst rows = [{\n\t\tid: "load-balancer-1",\n\t\tname: "Load Balancer 1",\n\t\trule: "Round robin",\n\t\tStatus: "Starting",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-2",\n\t\tname: "Load Balancer 2",\n\t\trule: "DNS delegation",\n\t\tstatus: "Active",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-3",\n\t\tname: "Load Balancer 3",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-4",\n\t\tname: "Load Balancer 4",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-5",\n\t\tname: "Load Balancer 5",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-6",\n\t\tname: "Load Balancer 6",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-7",\n\t\tname: "Load Balancer 7",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}];\n\tconst headers = ["Name", "Rule", "Status", "Other", "Example"];\n\treturn \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{headers.map(header => \n\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{rows.map(row => \n\t\t\t\t\t\t{Object.keys(row).filter(key => key !== "id").map(key => {\n\t\t\t\t\treturn {row[key]};\n\t\t\t\t})}\n\t\t\t\t\t)}\n\t\t\t\n\t\t
;```\n

Chart component with US map of unemployment:

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","title":"US Unemployment by county","data":{"url":"https://vega.github.io/editor/data/us-10m.json","format":{"type":"topojson","feature":"counties"}},"transform":[{"lookup":"id","from":{"data":{"url":"https://vega.github.io/editor/data/unemployment.tsv"},"key":"id","fields":["rate"]}}],"projection":{"type":"albersUsa"},"mark":"geoshape","encoding":{"color":{"field":"rate","type":"quantitative"}}}\nHeatmap Chart:\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/vega-lite/data/seattle-weather.csv"},"title":"Daily Max Temperatures (C) in Cleveland, OH","config":{"view":{"strokeWidth":0,"step":13},"axis":{"domain":false}},"mark":"rect","encoding":{"x":{"field":"date","timeUnit":"date","type":"ordinal","title":"Day","axis":{"labelAngle":0,"format":"%e"}},"y":{"field":"date","timeUnit":"month","type":"ordinal","title":"Month"},"color":{"field":"temp_max","aggregate":"max","type":"quantitative","legend":{"title":null}}}}\n

Bubble Plot chart:

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"Deaths by natural disasters","data":{"url":"https://vega.github.io/vega-lite/examples/data/disasters.csv"},"width":600,"height":400,"transform":[{"filter":"datum.Entity !== \'All natural disasters\'"}],"mark":{"type":"circle","opacity":0.8,"stroke":"black","strokeWidth":1},"encoding":{"x":{"field":"Year","type":"temporal","axis":{"grid":false}},"y":{"field":"Entity","type":"nominal","axis":{"title":""}},"size":{"field":"Deaths","type":"quantitative","title":"Annual Global Deaths","legend":{"clipHeight":30},"scale":{"rangeMax":5000}},"color":{"field":"Entity","type":"nominal","legend":null}}}\n

Table example:

\nName,Age,Occupation,Location,State\nJerry,35,Comedian,Upper east side,NY\nGeorge,35,Unemployed,Queens,NY\nElaine,32,Publisher,Midtown,NY\nKramer,36,Unknown,Upper east side,NY\nWhat else would you like to see?', Molecules: 'user:Show me 5 molecules and their SMILES string representation:\nbot:Of course, here are the SMILES representations of each item you requested using the MolecularElement Component:\nBergenin\n```OC[C@@H](O1)[C@@H](O)[C@H](O)[C@@H]2[C@@H]1c3c(O)c(OC)c(O)cc3C(=O)O2```\ncustom\n```OC(C(=O)O[C@H]1C[N+]2(CCC0C3=CC=CC=C3)CCC1CC2)(C1=CC=CS1)C1=CC=CS1```\nCephalostatin-1\n```CC(C)(O1)C[C@@H](O)[C@@]1(O2)[C@@H](C)[C@@H]3CC=C4[C@]3(C2)C(=O)C[C@H]5[C@H]4CC[C@@H](C6)[C@]5(C)Cc(n7)c6nc(C[C@@]89(C))c7C[C@@H]8CC[C@@H]%10[C@@H]9C[C@@H](O)[C@@]%11(C)C%10=C[C@H](O%12)[C@]%11(O)[C@H](C)[C@]%12(O%13)[C@H](O)C[C@@]%13(C)CO```\nAcetate\n```CC(=O)[O-]```\nBenzene (C6H6)\n```C1=CC=CC=C1```\n5-amino-4-methylpentanamide\n```CC(CCC(=O)N)CN```\nBromobenzene\n```C1=CC=C(C=C1)Br```\nCaffeine\n```CN1C=NC2=C1C(=O)N(C(=O)N2C)C```\nThyroxine\n```C1=C(C=C(C(=C1I)OC2=CC(=C(C(=C2)I)O)I)I)C[C@@H](C(=O)O)N```\nCholesterol\n```CC(C)CCCC(C)C1CCC2C1(CCCC2=CC=C3CC4CC(CC(C4)O)C(O)C3(C)C)C```\nChlorine\n```CCC1=C(C2=NC1=CC3=C(C4=C(C(C(=C4[N-]3)C5=NC(=CC6=NC(=C2)C(=C6C)C=C)C(C5CCC(=O)OCC=C(C)CCCC(C)CCCC(C)CCCC(C)C)C)C(=O)OC)[O-])C)C.[Mg+2]```\nPaclitaxel (Taxol)\n```CC1=C2C(C(=O)C3(C(CC4C(C3C(C(C2(C)C)(CC1OC(=O)C(C(C5=CC=CC=C5)NC(=O)C6=CC=CC=C6)O)O)OC(=O)C7=CC=CC=C7)(CO4)OC(=O)C)O)C)OC(=O)C```\nATP (Adenosine Triphosphate)\n```C1=NC(=C2C(=N1)N(C=N2)C3C(C(C(O3)COP(=O)(O)OP(=O)(O)OP(=O)(O)O)O)O)N.C1=NC(=C2C(=N1)N(C=N2)C3C(C(C(O3)COP(=O)(O)OP(=O)(O)OP(=O)(O)O)O)O)N```\nCyclosporine\n```CCC1C(=O)N(CC(=O)N(C(C(=O)NC(C(=O)N(C(C(=O)NC(C(=O)NC(C(=O)N(C(C(=O)N(C(C(=O)N(C(C(=O)N(C(C(=O)N1)C(C(C)CC=CC)O)C)C(C)C)C)CC(C)C)C)CC(C)C)C)C)C)CC(C)C)C)C(C)C)CC(C)C)C)C```\nVitamin B12\n```CC1=CC2=C(C=C1C)N(C=N2)C3C(C(C(O3)CO)OP(=O)([O-])OC(C)CNC(=O)CCC4(C(C5C6(C(C(C(=C(C7=NC(=CC8=NC(=C(C4=N5)C)C(C8(C)C)CCC(=O)N)C(C7(C)CC(=O)N)CCC(=O)N)C)[N-]6)CCC(=O)N)(C)CC(=O)N)C)CC(=O)N)C)O.[C-]#N.[Co+3]```\nInsulin\n```CCC(C)C1C(=O)NC2CSSCC(C(=O)NC(CSSCC(C(=O)NCC(=O)NC(C(=O)NC(C(=O)NC(C(=O)NC(C(=O)NC(C(=O)NC(C(=O)NC(C(=O)NC(C(=O)NC(C(=O)NC(C(=O)NC(CSSCC(NC(=O)C(NC(=O)C(NC(=O)C(NC(=O)C(NC(=O)C(NC(=O)C(NC(=O)C(NC(=O)C(NC2=O)CO)CC(C)C)CC3=CC=C(C=C3)O)CCC(=O)N)CC(C)C)CCC(=O)O)CC(=O)N)CC4=CC=C(C=C4)O)C(=O)NC(CC(=O)N)C(=O)O)C(=O)NCC(=O)NC(CCC(=O)O)C(=O)NC(CCCNC(=N)N)C(=O)NCC(=O)NC(CC5=CC=CC=C5)C(=O)NC(CC6=CC=CC=C6)C(=O)NC(CC7=CC=C(C=C7)O)C(=O)NC(C(C)O)C(=O)N8CCCC8C(=O)NC(CCCCN)C(=O)NC(C(C)O)C(=O)O)C(C)C)CC(C)C)CC9=CC=C(C=C9)O)CC(C)C)C)CCC(=O)O)C(C)C)CC(C)C)CC2=CNC=N2)CO)NC(=O)C(CC(C)C)NC(=O)C(CC2=CNC=N2)NC(=O)C(CCC(=O)N)NC(=O)C(C(=O)N)NC(=O)C(C(C)C)NC(=O)C(CC2=CC=CC=C2)N)C(=O)NC(C(=O)NC(C(=O)N1)CO)C(C)O)NC(=O)C(CCC(=O)N)NC(=O)C(CCC(=O)O)NC(=O)C(C(C)C)NC(=O)C(C(C)CC)NC(=O)CN```\n', + MoreCharts: + 'user:Show me charts!\nbot:

Box Plot

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"Boxplot example with random data","data":{"values":[{"group":"Group A","value":34},{"group":"Group A","value":28},{"group":"Group A","value":55},{"group":"Group B","value":91},{"group":"Group B","value":81},{"group":"Group B","value":67},{"group":"Group C","value":45},{"group":"Group C","value":66},{"group":"Group C","value":73},{"group":"Group D","value":28},{"group":"Group D","value":35},{"group":"Group D","value":56},{"group":"Group E","value":12},{"group":"Group E","value":45},{"group":"Group E","value":99}]},"mark":"boxplot","encoding":{"y":{"field":"group","type":"nominal"},"x":{"field":"value","type":"quantitative"}}}\n

Map

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","title":"US Unemployment by county","data":{"url":"https://vega.github.io/editor/data/us-10m.json","format":{"type":"topojson","feature":"counties"}},"transform":[{"lookup":"id","from":{"data":{"url":"https://vega.github.io/editor/data/unemployment.tsv"},"key":"id","fields":["rate"]}}],"projection":{"type":"albersUsa"},"mark":"geoshape","encoding":{"color":{"field":"rate","type":"quantitative"}}}\n

Horizontal Multi Bar Chart

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/vega-lite/data/barley.json"},"mark":"bar","encoding":{"x":{"aggregate":"sum","field":"yield"},"y":{"field":"variety"},"color":{"field":"site"}}}\n

Heatmap

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/vega-lite/data/seattle-weather.csv"},"title":"Daily Max Temperatures (C) in Cleveland, OH","config":{"view":{"strokeWidth":0,"step":13},"axis":{"domain":false}},"mark":"rect","encoding":{"x":{"field":"date","timeUnit":"date","type":"ordinal","title":"Day","axis":{"labelAngle":0,"format":"%e"}},"y":{"field":"date","timeUnit":"month","type":"ordinal","title":"Month"},"color":{"field":"temp_max","aggregate":"max","type":"quantitative","legend":{"title":null}}}}\n

Bubble Plot

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"Deaths by natural disasters","data":{"url":"https://vega.github.io/vega-lite/examples/data/disasters.csv"},"width":600,"height":400,"transform":[{"filter":"datum.Entity !== \'All natural disasters\'"}],"mark":{"type":"circle","opacity":0.8,"stroke":"black","strokeWidth":1},"encoding":{"x":{"field":"Year","type":"temporal","axis":{"grid":false}},"y":{"field":"Entity","type":"nominal","axis":{"title":""}},"size":{"field":"Deaths","type":"quantitative","title":"Annual Global Deaths","legend":{"clipHeight":30},"scale":{"rangeMax":5000}},"color":{"field":"Entity","type":"nominal","legend":null}}}\n

Multi-series line chart

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"Stock prices of 5 Tech Companies over Time.","data":{"url":"https://vega.github.io/vega-lite/examples/data/stocks.csv"},"mark":"line","encoding":{"x":{"field":"date","type":"temporal"},"y":{"field":"price","type":"quantitative"},"color":{"field":"symbol","type":"nominal"}}}\n

Stream Graph

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":300,"height":200,"data":{"url":"https://vega.github.io/vega-lite/data/unemployment-across-industries.json"},"mark":"area","encoding":{"x":{"timeUnit":"yearmonth","field":"date","axis":{"domain":false,"format":"%Y","tickSize":0}},"y":{"aggregate":"sum","field":"count","axis":null,"stack":"center"},"color":{"field":"series","scale":{"scheme":"category20b"}}}}\n

', Charts: 'user:Show me charts!\nbot:

Box Plot

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"Boxplot example with random data","data":{"values":[{"group":"Group A","value":34},{"group":"Group A","value":28},{"group":"Group A","value":55},{"group":"Group B","value":91},{"group":"Group B","value":81},{"group":"Group B","value":67},{"group":"Group C","value":45},{"group":"Group C","value":66},{"group":"Group C","value":73},{"group":"Group D","value":28},{"group":"Group D","value":35},{"group":"Group D","value":56},{"group":"Group E","value":12},{"group":"Group E","value":45},{"group":"Group E","value":99}]},"mark":"boxplot","encoding":{"y":{"field":"group","type":"nominal"},"x":{"field":"value","type":"quantitative"}}}\n

Map

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","title":"US Unemployment by county","data":{"url":"https://vega.github.io/editor/data/us-10m.json","format":{"type":"topojson","feature":"counties"}},"transform":[{"lookup":"id","from":{"data":{"url":"https://vega.github.io/editor/data/unemployment.tsv"},"key":"id","fields":["rate"]}}],"projection":{"type":"albersUsa"},"mark":"geoshape","encoding":{"color":{"field":"rate","type":"quantitative"}}}\n

Bar Chart

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","title":"A simple bar chart with embedded data","data":{"values":[{"x axis value":"A","y axis value":28000},{"x axis value":"B","y axis value":55000},{"x axis value":"C","y axis value":43000},{"x axis value":"D","y axis value":91000},{"x axis value":"E","y axis value":81000},{"x axis value":"F","y axis value":53000},{"x axis value":"G","y axis value":19000},{"x axis value":"H","y axis value":87000},{"x axis value":"I","y axis value":52000}]},"mark":"bar","encoding":{"x":{"field":"x axis value","type":"nominal","axis":{"labelAngle":0}},"y":{"field":"y axis value","type":"quantitative"}}}\n

Horizontal Multi Bar Chart

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/vega-lite/data/barley.json"},"mark":"bar","encoding":{"x":{"aggregate":"sum","field":"yield"},"y":{"field":"variety"},"color":{"field":"site"}}}\n

Pie Chart

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","title":"Pie chart example","data":{"values":[{"category":"A","value":18},{"category":"B","value":10},{"category":"C","value":2}]},"mark":{"type":"arc","innerRadius":0},"encoding":{"theta":{"field":"value","type":"quantitative"},"color":{"field":"category","type":"nominal"}}}\n

Donut Chart

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"A simple donut chart with embedded data.","data":{"values":[{"category":1,"value":4},{"category":2,"value":6},{"category":3,"value":10},{"category":4,"value":3},{"category":5,"value":7},{"category":6,"value":8}]},"mark":{"type":"arc","innerRadius":50},"encoding":{"theta":{"field":"value","type":"quantitative"},"color":{"field":"category","type":"nominal"}}}\n

Heatmap

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/vega-lite/data/seattle-weather.csv"},"title":"Daily Max Temperatures (C) in Cleveland, OH","config":{"view":{"strokeWidth":0,"step":13},"axis":{"domain":false}},"mark":"rect","encoding":{"x":{"field":"date","timeUnit":"date","type":"ordinal","title":"Day","axis":{"labelAngle":0,"format":"%e"}},"y":{"field":"date","timeUnit":"month","type":"ordinal","title":"Month"},"color":{"field":"temp_max","aggregate":"max","type":"quantitative","legend":{"title":null}}}}\n

Scatter Plot

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"A scatterplot showing body mass and flipper lengths of penguins.","data":{"url":"https://vega.github.io/vega-lite/examples/data/penguins.json"},"mark":"point","encoding":{"x":{"field":"Flipper Length (mm)","type":"quantitative","scale":{"zero":false}},"y":{"field":"Body Mass (g)","type":"quantitative","scale":{"zero":false}},"color":{"field":"Species","type":"nominal"}}}\n

Bubble Plot

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"Deaths by natural disasters","data":{"url":"https://vega.github.io/vega-lite/examples/data/disasters.csv"},"width":600,"height":400,"transform":[{"filter":"datum.Entity !== \'All natural disasters\'"}],"mark":{"type":"circle","opacity":0.8,"stroke":"black","strokeWidth":1},"encoding":{"x":{"field":"Year","type":"temporal","axis":{"grid":false}},"y":{"field":"Entity","type":"nominal","axis":{"title":""}},"size":{"field":"Deaths","type":"quantitative","title":"Annual Global Deaths","legend":{"clipHeight":30},"scale":{"rangeMax":5000}},"color":{"field":"Entity","type":"nominal","legend":null}}}\n

Multi-series line chart

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","description":"Stock prices of 5 Tech Companies over Time.","data":{"url":"https://vega.github.io/vega-lite/examples/data/stocks.csv"},"mark":"line","encoding":{"x":{"field":"date","type":"temporal"},"y":{"field":"price","type":"quantitative"},"color":{"field":"symbol","type":"nominal"}}}\n

Candle stick chart

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":400,"description":"A candlestick chart","data":{"url":"https://vega.github.io/vega-lite/examples/data/ohlc.json"},"encoding":{"x":{"field":"date","type":"temporal","title":"Date in 2009","axis":{"format":"%m/%d","labelAngle":-45,"title":"Date in 2009"}},"y":{"type":"quantitative","scale":{"zero":false},"axis":{"title":"Price"}},"color":{"condition":{"test":"datum.open < datum.close","value":"#06982d"},"value":"#ae1325"}},"layer":[{"mark":"rule","encoding":{"y":{"field":"low"},"y2":{"field":"high"}}},{"mark":"bar","encoding":{"y":{"field":"open"},"y2":{"field":"close"}}}]}\n

Orthographic world map

\n{"$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"}}\n

Stream Graph

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":300,"height":200,"data":{"url":"https://vega.github.io/vega-lite/data/unemployment-across-industries.json"},"mark":"area","encoding":{"x":{"timeUnit":"yearmonth","field":"date","axis":{"domain":false,"format":"%Y","tickSize":0}},"y":{"aggregate":"sum","field":"count","axis":null,"stack":"center"},"color":{"field":"series","scale":{"scheme":"category20b"}}}}\n

Multi histogram

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","repeat":["Horsepower","Miles_per_Gallon","Acceleration","Displacement"],"columns":2,"spec":{"data":{"url":"https://vega.github.io/vega-lite/examples/data/cars.json"},"mark":"bar","encoding":{"x":{"field":{"repeat":"repeat"},"bin":true},"y":{"aggregate":"count"},"color":{"field":"Origin"}}}}\n

Interactive multi-scatter plot

\n{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","repeat":{"row":["Horsepower","Acceleration","Miles_per_Gallon"],"column":["Miles_per_Gallon","Acceleration","Horsepower"]},"spec":{"data":{"url":"https://vega.github.io/vega-lite/examples/data/cars.json"},"mark":"point","params":[{"name":"brush","select":{"type":"interval","resolve":"union","on":"[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!","translate":"[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!","zoom":"wheel![event.shiftKey]"}},{"name":"grid","select":{"type":"interval","resolve":"global","translate":"[pointerdown[!event.shiftKey], window:pointerup] > window:pointermove!","zoom":"wheel![!event.shiftKey]"},"bind":"scales"}],"encoding":{"x":{"field":{"repeat":"column"},"type":"quantitative"},"y":{"field":{"repeat":"row"},"type":"quantitative","axis":{"minExtent":30}},"color":{"condition":{"param":"brush","field":"Origin","type":"nominal"},"value":"grey"}}}}\n', 'Table Test': @@ -995,24 +1045,26 @@ const conversationExamples = { time: '16:55', index: 1, elements: coreExamples.reduce((acc, item, index) => { - acc.push({ - type: 'html-text', - content: - '' + - (index + 1) + - '. Here is a <clabs-chat-' + - item[0] + - '> element' + - (item[2] ? ' of type ' + item[2] + '' : '') + - ':' + - (item[3] - ? '
' + - item[3] + - '' - : ''), - }); - acc.push({ type: item[2] ? item[2] : item[0], content: item[1] }); - //acc.push({"type":"html-text","content":item[3]?'\n

'+item[3]+'

':''}) + if (item[0] !== 'diagram') { + acc.push({ + type: 'html-text', + content: + '' + + (index + 1) + + '. Here is a <clabs-chat-' + + item[0] + + '> element' + + (item[2] ? ' of type ' + item[2] + '' : '') + + ':' + + (item[3] + ? '
' + + item[3] + + '' + : ''), + }); + acc.push({ type: item[2] ? item[2] : item[0], content: item[1] }); + //acc.push({"type":"html-text","content":item[3]?'\n

'+item[3]+'

':''}) + } return acc; }, []), }, diff --git a/packages/web-components/src/components/chat/components/codeElement/__stories__/codeElement.stories.js b/packages/web-components/src/components/chat/components/codeElement/__stories__/codeElement.stories.js index 49354f65..eb1d93ac 100644 --- a/packages/web-components/src/components/chat/components/codeElement/__stories__/codeElement.stories.js +++ b/packages/web-components/src/components/chat/components/codeElement/__stories__/codeElement.stories.js @@ -13,7 +13,7 @@ import '@carbon/web-components/es/components/button/index.js'; // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction export default { - title: 'Components/Chat/Code', + title: 'Components/Experimental/Code', component: 'clabs-chat-code', }; 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 e934ac87..b955359a 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 @@ -83,9 +83,6 @@ $css--plex: true !default; resize: none; tab-size: 3; - text-decoration: underline; - text-decoration-color: $layer-selected-01; - text-underline-offset: 3px; word-break: break-word; } 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 a5575304..6cb6070e 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/Chat/Diagram', + title: 'Components/Research/Diagram', }; const examples = [ diff --git a/packages/web-components/src/components/chat/components/editableTextElement/__stories__/editableTextElement.stories.js b/packages/web-components/src/components/chat/components/editableTextElement/__stories__/editableTextElement.stories.js index 5002b014..51e09cd4 100644 --- a/packages/web-components/src/components/chat/components/editableTextElement/__stories__/editableTextElement.stories.js +++ b/packages/web-components/src/components/chat/components/editableTextElement/__stories__/editableTextElement.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/Chat/EditableText', + title: 'Components/Core/EditableText', }; export const Default = { diff --git a/packages/web-components/src/components/chat/components/errorElement/__stories__/errorElement.stories.js b/packages/web-components/src/components/chat/components/errorElement/__stories__/errorElement.stories.js index cf862355..ec3cd27a 100644 --- a/packages/web-components/src/components/chat/components/errorElement/__stories__/errorElement.stories.js +++ b/packages/web-components/src/components/chat/components/errorElement/__stories__/errorElement.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/Chat/Error', + title: 'Components/Core/Error', }; export const Default = { diff --git a/packages/web-components/src/components/chat/components/feedbackElement/__stories__/docs.mdx b/packages/web-components/src/components/chat/components/feedbackElement/__stories__/docs.mdx deleted file mode 100644 index 235722f5..00000000 --- a/packages/web-components/src/components/chat/components/feedbackElement/__stories__/docs.mdx +++ /dev/null @@ -1,116 +0,0 @@ -import { Markdown, Meta } from '@storybook/blocks'; -import { cdnJs, cdnCss } from '../../../../../globals/internal/storybook-cdn'; -import * as feedbackElementStories from './feedbackElement.stories'; -import packageJson from '../../../package.json'; - - - -# Carbon Ai Chat: Feedback - -> **NOTE: Chat components that reached "preview candidate" status are in the process of graduating to a stable library! If you are starting out new or currently using the existing Carbon Labs version, we recommend going to #carbon-ai-chat to request access to the new library.** -> -> **The chat components in Carbon Labs that reached "preview candidate" status will continue to be supported here until they are fully migrated to the new location.** - -- **Initiative owner(s):** Owen Cornec -- **Status:** Draft -- **Target library:** `Carbon AI Chat` -- **Target library maintainer(s) / PR Reviewer(s):** Ethan Winters, Damon Lundin -- **Support channel:** `#carbon-ai-chat` - -## Table of Contents - -- [Overview](#overview) - - [Attributes and Properties](#attributes-and-properties) - - [Events](#events) - - [Troubleshooting](#troubleshooting) -- [Installation](#installation) - - [JS via import](#js-via-import) -- [Styles](#styles) - -## Overview - - - -The Chat component is a collaboration between the **IBM Research Visual AI Lab -(VAIL)** and the **Carbon Design Team** to provide an open-source, easily -expandable chat interface to interact with large language models. Our core -values are: open-source collaboration, universal support, ease of use and the -in-depth customization Carbon is known for. - -The **Carbon Labs popup** component aims to render any JSON defintiion provided -by the parent to display an informative popup component which provides detailed -feedback about the target response/content. - -### Troubleshooting - - - -Contact **Owen Cornec** on Slack or at **o.cornec@ibm.com** for requests -regarding general information, installation, trouble-shooting and custom -features. - -## Installation - -## Installation - - - -Here's a quick example to get you started. - -### JS via import - - - -```javascript -import '@carbon-labs/ai-chat-feedback/es/index.js'; -``` - -## Attributes and Properties - - - -### Setting values as attributes ```html - - - -````### Setting values with a JSON definition - -Place JSON defintion in Chat as `feedbackDefinitions` or Popup as -`feedbackFormValues`: - -```json -{ - "thumbs-down": { - "title": "Unsatisfactory Response", - "tags": [ - "Inaccurate", - "Incomplete", - "Missing links", - "Privacy violations", - "Hate speech" - ], - "prompt": "What was unsatisfactory about this response?", - "responsePlaceholder": "Describe issues with this response" - }, - "thumbs-up": { - "title": "Feedback", - "tags": ["Accurate", "Comprehensive", "Consice", "Easy to Understand"], - "prompt": "Why did you choose this rating?", - "responsePlaceholder": "Add a comment" - } -} -```` - -### Styles - -You'll also need to import the theming tokens from `@carbon/styles` either from -npm or from our CDN helpers. Checkout our Stackblitz example above to see how -that is implemented. - -{`${cdnJs({ components: ['chat'] }, packageJson)}`} -{`${cdnCss()}`} diff --git a/packages/web-components/src/components/chat/components/feedbackElement/__stories__/feedbackElement.stories.js b/packages/web-components/src/components/chat/components/feedbackElement/__stories__/feedbackElement.stories.js deleted file mode 100644 index ded70424..00000000 --- a/packages/web-components/src/components/chat/components/feedbackElement/__stories__/feedbackElement.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2024 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import '../feedbackElement'; -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/Chat/Feedback', -}; - -export const Default = { - /** - * Renders the template for Storybook - * - * @returns {TemplateResult<1>} - */ - render: () => html` -
-
-

Default

- -
-
-

Custom

- - -
-
- -
-
- `, -}; diff --git a/packages/web-components/src/components/chat/components/feedbackElement/feedbackElement.ts b/packages/web-components/src/components/chat/components/feedbackElement/feedbackElement.ts deleted file mode 100644 index 69f922c2..00000000 --- a/packages/web-components/src/components/chat/components/feedbackElement/feedbackElement.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { customElement } from 'lit/decorators.js'; -import { settings } from '@carbon-labs/utilities/es/settings/index.js'; -import feedbackElement from './src/feedbackElement.js'; -import { feedbackElementTemplate } from './src/feedbackElement.template.js'; - -const { stablePrefix: clabsPrefix } = settings; - -/** - * Constructed class functionality for the test input custom element - */ -@customElement(`${clabsPrefix}-chat-feedback`) -class CLABSFeedbackElement extends feedbackElement { - /** - * Renders the template while passing in class functionality - * - * @returns {TemplateResult<1>} - */ - render() { - return feedbackElementTemplate(this); - } -} -export default CLABSFeedbackElement; diff --git a/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.scss b/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.scss deleted file mode 100644 index 51fbc3c9..00000000 --- a/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.scss +++ /dev/null @@ -1,98 +0,0 @@ -/** - * Copyright IBM Corp. 2023, 2024 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -@use '../../../../../globals/scss/vars' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/colors' as *; - -:host(#{$clabs-prefix}-chat-feedback) { - @keyframes fade-in { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - - .#{$clabs-prefix}--chat-popup-container { - display: flex; - overflow: visible; - box-sizing: border-box; - flex-direction: row; - - padding: 32px; - border: 1px solid $support-info; - border-radius: 8px; - animation: fade-in 600ms forwards; - - background: linear-gradient(0deg, $link-inverse-hover 0%, $background 25%), - #ffffff; - box-shadow: -40px 30px 100px -25px rgba(0, 67, 206, 0.25), - -60px 80px 60px -45px rgba(0, 0, 0, 0.1), - inset 0 -80px 70px -65px rgba(69, 137, 255, 0.2); - - inline-size: 320px; - opacity: 0; - transition: border-color 0.15s linear; - } - - .#{$clabs-prefix}--chat-popup-main-content { - display: flex; - box-sizing: border-box; - flex-direction: column; - gap: 16px; - padding-block-end: 42px; - } - - .#{$clabs-prefix}--chat-popup-title { - color: $text-secondary; - font-size: 14px; - font-weight: 400; - letter-spacing: 0.16px; - line-height: 18px; - text-align: start; - } - - .#{$clabs-prefix}--chat-popup-prompt { - font-size: 18px; - font-weight: 400; - line-height: 26px; - text-align: start; - } - - .#{$clabs-prefix}--chat-popup-tag-list { - padding-block-start: 8px; - } - - .#{$clabs-prefix}--chat-popup-feedback-text { - gap: 0; - inline-size: 272px; - inset-block-start: 205.54px; - inset-inline-start: 24px; - } - - .#{$clabs-prefix}--chat-popup-disclaimer { - font-size: 12px; - font-weight: 400; - letter-spacing: 0.32px; - line-height: 16px; - text-align: start; - } - - .#{$clabs-prefix}--chat-popup-submit { - position: absolute; - inset-block-end: 0; - inset-inline-end: 0; - } - .#{$clabs-prefix}--chat-popup-close { - position: absolute; - inset-block-start: 16px; - inset-inline-end: 16px; - } -} diff --git a/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.template.ts b/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.template.ts deleted file mode 100644 index 5c556289..00000000 --- a/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.template.ts +++ /dev/null @@ -1,102 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { settings } from '@carbon-labs/utilities/es/settings/index.js'; -const { stablePrefix: clabsPrefix } = settings; - -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import Close16 from '@carbon/web-components/es/icons/close/16.js'; -import '@carbon/web-components/es/components/button/index.js'; -import '@carbon/web-components/es/components/textarea/index.js'; - -import '@carbon/web-components/es/components/icon-button/index.js'; -import '../../tagListElement/tagListElement.js'; - -/** - * Lit template for feedback - * - * @param {object} customElementClass Class functionality for the custom element - * @returns {TemplateResult<1>} Lit html template - */ -export function feedbackElementTemplate(customElementClass) { - const { - _handleClose: handleClose, - _handleSubmit: handleSubmit, - _handleTextInput: handleTextInput, - popupTitle, - promptTitle, - textAreaPlaceholder, - handleTagSelection, - tagList, - disclaimer, - parentMessageId, - } = customElementClass; - return html`
-
-
- ${popupTitle ? popupTitle : 'Feedback'} -
-
- ${promptTitle ? promptTitle : 'Why did you choose this rating?'} -
-
- - -
-
- - Feedback comment - -
-
- ${disclaimer - ? unsafeHTML(disclaimer) - : "Your feedback on the use of AI-powered features by our dedicated team is to drive improvements. By continuing, you agree to IBM's Feedback Collecting Policy."} -
-
- - Submit - -
-
- - ${Close16({ slot: 'icon' })} - Close - -
-
-
`; -} diff --git a/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.ts b/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.ts deleted file mode 100644 index 44333cfc..00000000 --- a/packages/web-components/src/components/chat/components/feedbackElement/src/feedbackElement.ts +++ /dev/null @@ -1,244 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { LitElement } from 'lit'; -import { property, state } from 'lit/decorators.js'; - -// @ts-ignore -import styles from './feedbackElement.scss?inline'; -/** - * Input component using search typeahead api - */ -export default class feedbackElement extends LitElement { - static styles = styles; - /** - * Array of subelements parsed from API reply - */ - @property({ type: Object, attribute: 'popup-elements', reflect: true }) - popupElements; - - /** - * top level title for section - */ - @property({ type: Boolean, attribute: 'is-slotted' }) - isSlotted; - - /** - * top level title for section - */ - @property({ type: String, attribute: 'popup-title' }) - popupTitle; - - /** - * array definition of tags to select - */ - @property({ type: Object, attribute: 'tag-list' }) - tagList; - - /** - * legal disclaimer text - */ - @property({ type: String, attribute: 'disclaimer' }) - disclaimer; - - /** - * question asked of user to give feedback - */ - @property({ type: String, attribute: 'prompt-title' }) - promptTitle; - - /** - * placeholder in text area - */ - @property({ type: String, attribute: 'text-area-placeholder' }) - textAreaPlaceholder; - - /** - * boolean determining to auto-open or not - */ - @property({ type: Boolean, attribute: 'is-open' }) - isOpen; - - /** - * optional orientation value to show caret - */ - @property({ type: String, attribute: 'orientation', reflect: true }) - orientation = 'top'; - - /** - * target div to attach to - */ - @property({ type: Object, attribute: 'targetElement' }) - targetElement; - - /** - * predefined JSON values of all above by dev/user - */ - @property({ type: Object, attribute: 'feedbackFormValues' }) - feedbackFormValues; - - /** - * top description - */ - @property({ type: String, attribute: 'description' }) - description; - - /** title of list, requires show-list - */ - @property({ type: String, attribute: 'list-title' }) - listTitle; - - /** whether to show list - */ - @property({ type: Boolean, attribute: 'show-list' }) - showList; - - /** whether to show text area - */ - @property({ type: Boolean, attribute: 'show-text-area' }) - showTextArea = true; - - /** - * array of list items with title and text content - */ - @property({ type: Object, attribute: 'listItems' }) - listItems; - - /** - * model object with title and url - */ - @property({ type: Object, attribute: 'model' }) - model; - - /** - * internal saved text values for feedback - */ - @state() - _textInput; - - /** - * internal tag seelction list - */ - @state() - _tagSelections; - - /** - * index of message element in message list - */ - @property({ type: String, attribute: 'parent-message-id' }) - parentMessageId; - - /** - * Event listener to check if parent visibility changed - */ - //private intersectionObserver; - - @state() - usePopup = true; - - @state() - isSelected = false; - - /** detect when component is rendered to process rawtext - */ - firstUpdated() { - if (this.feedbackFormValues) { - this._setValues(this.feedbackFormValues); - } - - if (this.isSlotted) { - this.style.setProperty('--chat-popup-slotted-mode', 'fixed'); - } - - const container = this.shadowRoot?.querySelector( - '.clabs--chat-popup-container' - ); - if (container instanceof HTMLElement) { - container.focus(); - } - } - - /** _handleTextInput - handle text change in submission - * @param {event} event - textarea change event - */ - _handleTextInput(event) { - const { value } = event.target; - this._textInput = value; - } - - /** - * updated - check changed properties - * @param {object} changedProperties - LIT object denoting changed attributes - */ - updated(changedProperties) { - if (changedProperties.has('isOpen')) { - this.style.setProperty( - '--chat-popup-element-visibility', - this.isOpen ? 'visible' : 'hidden' - ); - } - if (changedProperties.has('feedbackFormValues')) { - this._setValues(this.feedbackFormValues); - } - } - - /** - * _setValues - if preset Object is added, update all display values - * @param {object} values - defined values - */ - _setValues(values) { - this.popupTitle = values.title; - this.textAreaPlaceholder = values.responsePlaceholder; - this.promptTitle = values.prompt; - this.tagList = values.tags; - this.disclaimer = values.disclaimer; - this.requestUpdate(); - } - - /** - * _handleSubmit - submit event when submit button click - * @param {event} event - button click event - */ - _handleSubmit(event) { - const feedbackDetails = { - formValues: this.feedbackFormValues, - userComment: this._textInput ? this._textInput : 'no feedback given', - parentMessageId: this.parentMessageId ? this.parentMessageId : 'unknown', - tagSelections: this._tagSelections, - }; - const complexFeedbackSubmission = new CustomEvent( - 'on-user-complex-feedback-request', - { - detail: feedbackDetails, - bubbles: true, - composed: true, - } - ); - this.dispatchEvent(complexFeedbackSubmission); - this._handleClose(event); - } - - /** - * handleTagSelection - handle when tag list subelement sends seelction signal - * @param {event} event - tag click event - */ - handleTagSelection(event) { - const selections = event.detail.selectionList; - this._tagSelections = selections; - } - - /** - * closing event when close button is selected - * @param {event} event - clsing button event - */ - _handleClose(event) { - event.preventDefault(); - //this.isSelected = false; - } -} diff --git a/packages/web-components/src/components/chat/components/fileUploadElement/__stories__/fileUploadElement.stories.js b/packages/web-components/src/components/chat/components/fileUploadElement/__stories__/fileUploadElement.stories.js index 3f79e90a..4f01bd51 100644 --- a/packages/web-components/src/components/chat/components/fileUploadElement/__stories__/fileUploadElement.stories.js +++ b/packages/web-components/src/components/chat/components/fileUploadElement/__stories__/fileUploadElement.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/Chat/File Upload', + title: 'Components/Experimental/File Upload', }; export const Default = { 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 4a49a778..f5a0c560 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 @@ -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/Chat/Formula', + title: 'Components/Experimental/Formula', }; const mathExamples = [ diff --git a/packages/web-components/src/components/chat/components/formulaElement/src/formulaElement.scss b/packages/web-components/src/components/chat/components/formulaElement/src/formulaElement.scss index 452cd27b..698baba2 100644 --- a/packages/web-components/src/components/chat/components/formulaElement/src/formulaElement.scss +++ b/packages/web-components/src/components/chat/components/formulaElement/src/formulaElement.scss @@ -21,6 +21,7 @@ $css--plex: true !default; :host(#{$clabs-prefix}-chat-formula) { overflow: hidden; font-family: IBMPlexMath-Regular, serif; + font-size: 22px; inline-size: 100%; pointer-events: none; diff --git a/packages/web-components/src/components/chat/components/header/src/header.scss b/packages/web-components/src/components/chat/components/header/src/header.scss index c4498358..3a0eafe7 100644 --- a/packages/web-components/src/components/chat/components/header/src/header.scss +++ b/packages/web-components/src/components/chat/components/header/src/header.scss @@ -49,6 +49,9 @@ $css--plex: true !default; inline-size: 100%; transition: background 200ms ease; } + .#{$clabs-prefix}--chat-header-drag-button::part(button) { + inline-size: 120px; + } .#{$clabs-prefix}--chat-header-drag-area:hover { background: $background-hover; diff --git a/packages/web-components/src/components/chat/components/header/src/header.template.ts b/packages/web-components/src/components/chat/components/header/src/header.template.ts index 2ae8676a..b5d3c8b7 100644 --- a/packages/web-components/src/components/chat/components/header/src/header.template.ts +++ b/packages/web-components/src/components/chat/components/header/src/header.template.ts @@ -23,6 +23,7 @@ import '@carbon/web-components/es/components/overflow-menu/index.js'; import '../../popupElement/popupElement.js'; import '@carbon/web-components/es/components/slug/index.js'; +import '@carbon/web-components/es/components/ai-label/index.js'; import '@carbon/web-components/es/components/icon-button/index.js'; import '@carbon/web-components/es/components/button/index.js'; @@ -65,11 +66,14 @@ export function headerTemplate(customElementClass) { _checkKeyboardMenu: checkKeyboardMenu, _renderLabel: renderLabel, slugOpened, + _handleMenuOpened, headerSlugObject, _handleSlugClick: handleSlugClick, _hideAISlug: hideAISlug, customLabels: customLabels, _useSlug: useSlug, + _useAiLabel: useAiLabel, + _isDragging: isDragging, } = customElementClass; return html`
${Menu24({ @@ -201,16 +207,22 @@ export function headerTemplate(customElementClass) {
${dockingEnabled ? html` -
-
${Move16()}
-
+ @keyup="${handleDragAreaKeyup}"> + ${Move16({ slot: 'icon' })} + ${!isDragging + ? renderLabel('header-move-start-button') + : renderLabel('header-move-end-button')} + ` : ''} @@ -221,8 +233,7 @@ export function headerTemplate(customElementClass) { size="sm" slot="slug" autoalign - alignment="bottom" - slug-label="Show information"> + alignment="bottom">
` + : useAiLabel + ? html` + +
+ Explanation of AI-generated content +
+ + ` : html` ${orientation === 'top' @@ -72,18 +80,38 @@ export function popupElementTemplate(customElementClass) {
` : ''}
- ${popupTitle - ? html` -
- ${popupTitle} -
- ` - : ''} +
+ ${popupTitle + ? html` +
+ ${popupTitle}${currentlySelectedMode + ? ': ' + currentlySelectedMode + : ''} +
+ ` + : ''} + ${overflowClose + ? html` + ${Close16({ slot: 'icon' })} + ${renderLabel('feedback-close')} + ` + : ''} +
${promptTitle ? html`

${promptTitle} @@ -94,13 +122,12 @@ export function popupElementTemplate(customElementClass) { ${description}

` : ''} -
- ${tagList ? html`
+ + ${Close16({ slot: 'icon' })} + ${renderLabel('feedback-close')} + +
` + : ''} -
- - ${Close16({ slot: 'icon' })} - ${renderLabel('feedback-close')} - +
+ + ${invalidEntry + ? renderLabel('feedback-submit-button-unavailable') + : renderLabel('feedback-submit-button')} +
-
- - ${invalidEntry - ? renderLabel('feedback-submit-button-unavailable') - : renderLabel('feedback-submit-button')} - -
+ + ${customPolicyMode + ? html`
+ + ${violationTypes.map( + (elem) => html` + + ${elem} + + ` + )} + +
` + : ``}
${orientation === 'bottom' ? html`
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 f2d05f24..91dae478 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 @@ -152,6 +152,9 @@ export default class popupElement extends LitElement { @state() _tagSelections = {}; + @state() + overflowClose = true; + /** * response type i.e positive nbegative custom etc */ @@ -168,7 +171,7 @@ export default class popupElement extends LitElement { * compact mode */ @property({ type: Boolean, attribute: 'compact-mode' }) - compactMode; + compactMode = false; /** * check if submission is valid @@ -198,6 +201,37 @@ export default class popupElement extends LitElement { @state() collectionAgreement; + /** show dropdown with list of violation types, which auto-renders subelements + */ + @property({ type: Boolean, attribute: 'custom-policy-mode' }) + customPolicyMode = false; + + /** + * feedback ai content + */ + @state() + feedbackAiContent; + + /** + * list of violations + */ + @state() + violationTypes = [ + 'General', + 'Hate speech', + 'Unethical content', + 'Factual errors', + 'Personal information', + 'Copyright infringement', + 'Security concerns', + ]; + + /** + * currently selected mode + */ + @state() + currentlySelectedMode; + /** * Event listener to check if parent visibility changed */ @@ -211,6 +245,9 @@ export default class popupElement extends LitElement { /** detect when component is rendered to process rawtext */ firstUpdated() { + if (this.customPolicyMode) { + this.style.setProperty('--chat-popup-element-mode-offset', '63px'); + } this.style.setProperty( '--chat-popup-element-inline-position', this.inlinePosition @@ -447,6 +484,8 @@ export default class popupElement extends LitElement { let verticalPosition = 60; let orientation = 'top'; + console.log(this.feedbackFormValues); + if ( parentHeight - feedbackHeight > offsetTop || feedbackHeight > offsetTop @@ -456,7 +495,7 @@ export default class popupElement extends LitElement { } if (this.compactMode) { - horizontalPosition = 0; + horizontalPosition = 16; } this.inlinePosition = horizontalPosition; @@ -514,6 +553,42 @@ export default class popupElement extends LitElement { this._checkValidity(); } + /** + * handleModeSelection - handle dropdown mode changes + * @param {event} event - tag click event + */ + _handleModeSelection(event) { + if (event?.detail?.item?.value) { + this.currentlySelectedMode = event.detail.item.value; + this.presetFeedback(); + } + } + + /** + * presetFeedback - seelction mechanism to customize templates + */ + presetFeedback() { + switch (this.currentlySelectedMode) { + case 'Hate speech': + this.tagList = null; + this.disclaimer = ''; + this.promptTitle = 'Help us do better'; + this.textAreaPlaceholder = 'Describe issues with this response'; + this.disableTextArea = true; + this.description = + 'Select the severity of this violation and provide details if needed'; + this.radioTitle = 'Severity'; + this.radioButtons = [ + { value: 0, text: 'mild' }, + { value: 1, text: 'concerning' }, + { value: 2, text: 'elevated' }, + { value: 3, text: 'serious' }, + { value: 5, text: 'very serious' }, + ]; + break; + } + } + /** * closing event when close button is selected * @param {event} event - clsing button event diff --git a/packages/web-components/src/components/chat/components/tableElement/__stories__/tableElement.stories.js b/packages/web-components/src/components/chat/components/tableElement/__stories__/tableElement.stories.js index 4f535229..280a74b1 100644 --- a/packages/web-components/src/components/chat/components/tableElement/__stories__/tableElement.stories.js +++ b/packages/web-components/src/components/chat/components/tableElement/__stories__/tableElement.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/Chat/Table', + title: 'Components/Experimental/Table', }; export const Default = { diff --git a/packages/web-components/src/components/chat/components/tagListElement/__stories__/tagListElement.stories.js b/packages/web-components/src/components/chat/components/tagListElement/__stories__/tagListElement.stories.js index dd306f73..4aab6e18 100644 --- a/packages/web-components/src/components/chat/components/tagListElement/__stories__/tagListElement.stories.js +++ b/packages/web-components/src/components/chat/components/tagListElement/__stories__/tagListElement.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/Chat/TagList', + title: 'Components/Core/TagList', }; export const Default = { @@ -22,6 +22,7 @@ export const Default = { * @returns {TemplateResult<1>} */ render: () => html` `, }; diff --git a/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.scss b/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.scss index 5e27b86e..0afa4828 100644 --- a/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.scss +++ b/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.scss @@ -24,6 +24,11 @@ $css--plex: true !default; max-inline-size: 100%; } + .#{$clabs-prefix}--chat-tag-list-container-inline { + display: flex; + flex-flow: row wrap; + } + @keyframes fade-in { from { opacity: 0; diff --git a/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.template.ts b/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.template.ts index 562fcec1..9d38895a 100644 --- a/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.template.ts +++ b/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.template.ts @@ -31,6 +31,7 @@ export function tagListElementTemplate(customElementClass) { actionIcon, monoLabel, isInLine, + useTags, selectionIndex, } = customElementClass; @@ -39,37 +40,49 @@ export function tagListElementTemplate(customElementClass) { ? html`
${errorMessage}
` - : html`
+ : html`
${tagList.map( (value, index) => html`
- - ${monoLabel ? monoLabel : value} - ${actionIcon === 'add' - ? Add16({ slot: 'icon' }) - : actionIcon === 'upload' - ? Upload16({ slot: 'icon' }) - : actionIcon === 'send' - ? SendAlt16({ slot: 'icon' }) - : ''} - + ${useTags + ? html` + + ${monoLabel ? monoLabel : value} + + ` + : html` + + ${monoLabel ? monoLabel : value} + ${actionIcon === 'add' + ? Add16({ slot: 'icon' }) + : actionIcon === 'upload' + ? Upload16({ slot: 'icon' }) + : actionIcon === 'send' + ? SendAlt16({ slot: 'icon' }) + : ''} + + `}
` )}
`} diff --git a/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.ts b/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.ts index ddb8006a..1e68bb42 100644 --- a/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.ts +++ b/packages/web-components/src/components/chat/components/tagListElement/src/tagListElement.ts @@ -62,7 +62,7 @@ export default class tagListElement extends LitElement { /** * isInLine - place buttons using flex */ - @property({ type: String, attribute: 'is-inline' }) + @property({ type: Boolean, attribute: 'is-inline' }) isInLine = true; /** @@ -71,6 +71,12 @@ export default class tagListElement extends LitElement { @property({ type: Boolean, attribute: 'multi-select' }) multiSelect; + /** + * full-width - fill whole width of parent + */ + @property({ type: Boolean, attribute: 'tag-mode' }) + tagMode = false; + /** * selectionIndex - array of active tags when selected */ diff --git a/packages/web-components/src/components/chat/components/textElement/__stories__/textElement.stories.js b/packages/web-components/src/components/chat/components/textElement/__stories__/textElement.stories.js index c829083e..cd22ac9e 100644 --- a/packages/web-components/src/components/chat/components/textElement/__stories__/textElement.stories.js +++ b/packages/web-components/src/components/chat/components/textElement/__stories__/textElement.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/Chat/Text', + title: 'Components/Core/Text', component: 'clabs-chat-text', }; diff --git a/packages/web-components/src/components/chat/package.json b/packages/web-components/src/components/chat/package.json index 5384deb0..8d26e840 100644 --- a/packages/web-components/src/components/chat/package.json +++ b/packages/web-components/src/components/chat/package.json @@ -38,7 +38,7 @@ "@babel/core": "^7.26.0", "@babel/runtime": "^7.23.2", "@carbon-labs/utilities": "0.14.0", - "@carbon/web-components": "2.11.1", + "@carbon/web-components": "^2.17.0", "@ibm/telemetry-js": "^1.6.0", "highlightjs": "^9.16.2", "mathjax": "^3.2.2", diff --git a/packages/web-components/src/components/feedback/package.json b/packages/web-components/src/components/feedback/package.json index 2fc2d156..a7005027 100644 --- a/packages/web-components/src/components/feedback/package.json +++ b/packages/web-components/src/components/feedback/package.json @@ -38,7 +38,7 @@ "@babel/runtime": "^7.23.2", "@carbon-labs/utilities": "0.14.0", "@carbon/grid": "^11.21.0", - "@carbon/web-components": "2.11.1", + "@carbon/web-components": "^2.17.0", "uuid": "^9.0.1" } } diff --git a/packages/web-components/src/components/network-graph/package.json b/packages/web-components/src/components/network-graph/package.json index a1894580..208084e5 100644 --- a/packages/web-components/src/components/network-graph/package.json +++ b/packages/web-components/src/components/network-graph/package.json @@ -37,7 +37,7 @@ "@babel/runtime": "^7.23.2", "@carbon-labs/utilities": "0.14.0", "@carbon/grid": "^11.21.0", - "@carbon/web-components": "2.11.1", + "@carbon/web-components": "^2.17.0", "force-graph": "^1.43.5" } } diff --git a/packages/web-components/src/components/tag/__stories__/tag.stories.js b/packages/web-components/src/components/tag/__stories__/tag.stories.js index 1fef8d4f..a264a74b 100644 --- a/packages/web-components/src/components/tag/__stories__/tag.stories.js +++ b/packages/web-components/src/components/tag/__stories__/tag.stories.js @@ -11,7 +11,7 @@ import { html } from 'lit'; import { action } from '@storybook/addon-actions'; export default { - title: 'Components/Tag/Tag', + title: 'Components/Research/Tag', component: 'clabs-tag', }; diff --git a/packages/web-components/src/components/tag/package.json b/packages/web-components/src/components/tag/package.json index 944659f2..7a3ded7d 100644 --- a/packages/web-components/src/components/tag/package.json +++ b/packages/web-components/src/components/tag/package.json @@ -37,6 +37,6 @@ "@babel/runtime": "^7.23.2", "@carbon-labs/utilities": "0.8.0", "@carbon/grid": "^11.21.0", - "@carbon/web-components": "2.11.1" + "@carbon/web-components": "^2.17.0" } } diff --git a/packages/web-components/src/components/ux-control/package.json b/packages/web-components/src/components/ux-control/package.json index 0155eca9..b40a5f4c 100644 --- a/packages/web-components/src/components/ux-control/package.json +++ b/packages/web-components/src/components/ux-control/package.json @@ -38,6 +38,6 @@ "@babel/runtime": "^7.23.2", "@carbon-labs/utilities": "0.8.0", "@carbon/grid": "^11.21.0", - "@carbon/web-components": "2.11.1" + "@carbon/web-components": "^2.17.0" } } diff --git a/yarn.lock b/yarn.lock index e4c1f9ff..c9a86fc5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1380,7 +1380,7 @@ __metadata: "@babel/core": "npm:^7.26.0" "@babel/runtime": "npm:^7.23.2" "@carbon-labs/utilities": "npm:0.14.0" - "@carbon/web-components": "npm:2.11.1" + "@carbon/web-components": "npm:^2.17.0" "@ibm/telemetry-js": "npm:^1.6.0" "@types/highlightjs": "npm:^9" highlightjs: "npm:^9.16.2" @@ -1401,7 +1401,7 @@ __metadata: "@babel/runtime": "npm:^7.23.2" "@carbon-labs/utilities": "npm:0.14.0" "@carbon/grid": "npm:^11.21.0" - "@carbon/web-components": "npm:2.11.1" + "@carbon/web-components": "npm:^2.17.0" uuid: "npm:^9.0.1" languageName: unknown linkType: soft @@ -1414,7 +1414,7 @@ __metadata: "@babel/runtime": "npm:^7.23.2" "@carbon-labs/utilities": "npm:0.8.0" "@carbon/grid": "npm:^11.21.0" - "@carbon/web-components": "npm:2.11.1" + "@carbon/web-components": "npm:^2.17.0" languageName: unknown linkType: soft @@ -1426,7 +1426,7 @@ __metadata: "@babel/runtime": "npm:^7.23.2" "@carbon-labs/utilities": "npm:0.8.0" "@carbon/grid": "npm:^11.21.0" - "@carbon/web-components": "npm:2.11.1" + "@carbon/web-components": "npm:^2.17.0" languageName: unknown linkType: soft @@ -1438,7 +1438,7 @@ __metadata: "@babel/runtime": "npm:^7.23.2" "@carbon-labs/utilities": "npm:0.14.0" "@carbon/grid": "npm:^11.21.0" - "@carbon/web-components": "npm:2.11.1" + "@carbon/web-components": "npm:^2.17.0" force-graph: "npm:^1.43.5" languageName: unknown linkType: soft @@ -1459,15 +1459,6 @@ __metadata: languageName: node linkType: hard -"@carbon/colors@npm:^11.23.0, @carbon/colors@npm:^11.23.1": - version: 11.23.1 - resolution: "@carbon/colors@npm:11.23.1" - dependencies: - "@ibm/telemetry-js": "npm:^1.5.0" - checksum: 10c0/96b6d9b803a1c38491e4be448267e38b901a1bcc5975f26bc7a64b84dabc3e2ece80462882b328f0dff3aad0df8704a4459936f87f7202a206c24d30c6b760fa - languageName: node - linkType: hard - "@carbon/colors@npm:^11.28.0": version: 11.28.0 resolution: "@carbon/colors@npm:11.28.0" @@ -1477,15 +1468,6 @@ __metadata: languageName: node linkType: hard -"@carbon/feature-flags@npm:^0.20.0": - version: 0.20.0 - resolution: "@carbon/feature-flags@npm:0.20.0" - dependencies: - "@ibm/telemetry-js": "npm:^1.5.0" - checksum: 10c0/986d30c32d39827c0ae0da2c33674d83438ce3e9e85724b3a14db1b2fc19a2bb8266763931d37bcfb9ff718d3eee7cb945dd85922b6be45bf190f0f79fcd739a - languageName: node - linkType: hard - "@carbon/feature-flags@npm:^0.24.0": version: 0.24.0 resolution: "@carbon/feature-flags@npm:0.24.0" @@ -1514,31 +1496,6 @@ __metadata: languageName: node linkType: hard -"@carbon/grid@npm:^11.24.0, @carbon/grid@npm:^11.24.1": - version: 11.24.1 - resolution: "@carbon/grid@npm:11.24.1" - dependencies: - "@carbon/layout": "npm:^11.23.1" - "@ibm/telemetry-js": "npm:^1.5.0" - checksum: 10c0/14bad9a94df8a0d4e06cb08706e58784d2c06593d9c256ea242559b6514e52438c451db751b68489b7d33529469fd2da539adf4f7ed0f4721050ca01401f557a - languageName: node - linkType: hard - -"@carbon/ibm-products-styles@npm:^2.30.1": - version: 2.48.0 - resolution: "@carbon/ibm-products-styles@npm:2.48.0" - dependencies: - "@ibm/telemetry-js": "npm:^1.5.0" - peerDependencies: - "@carbon/grid": ^11.27.0 - "@carbon/layout": ^11.26.0 - "@carbon/motion": ^11.22.0 - "@carbon/themes": ^11.40.0 - "@carbon/type": ^11.31.0 - checksum: 10c0/3a62558b049d6957c8a14f6990c830c474fbf90fca09e746db1a0d6f43f44472a9e806c9553639e02271aa4c62e76810151861dd2d433eb65910c022dd11f294 - languageName: node - linkType: hard - "@carbon/icon-helpers@npm:10.54.0": version: 10.54.0 resolution: "@carbon/icon-helpers@npm:10.54.0" @@ -1626,15 +1583,6 @@ __metadata: languageName: node linkType: hard -"@carbon/layout@npm:^11.23.0, @carbon/layout@npm:^11.23.1": - version: 11.23.1 - resolution: "@carbon/layout@npm:11.23.1" - dependencies: - "@ibm/telemetry-js": "npm:^1.5.0" - checksum: 10c0/463ebc4eb0b5f85c68ea3640d71cc36cdfa7941d3cdc9dc6cf6ac3a558ae8904e12d5ed628a7967f931f3bbf167a72ded6afe6dfeebe5fedcc139cd90811a4e8 - languageName: node - linkType: hard - "@carbon/motion@npm:11.21.0": version: 11.21.0 resolution: "@carbon/motion@npm:11.21.0" @@ -1644,15 +1592,6 @@ __metadata: languageName: node linkType: hard -"@carbon/motion@npm:^11.19.0": - version: 11.19.1 - resolution: "@carbon/motion@npm:11.19.1" - dependencies: - "@ibm/telemetry-js": "npm:^1.5.0" - checksum: 10c0/f00ffae2f5076089ecc8de3e300b8b57bab7998cc82608d8a4ddaeafff35cab110bbf003a1c3e87b2e782af0af329b43b03a13c02192ce44443117eae1eda0be - languageName: node - linkType: hard - "@carbon/motion@npm:^11.24.0": version: 11.24.0 resolution: "@carbon/motion@npm:11.24.0" @@ -1662,17 +1601,17 @@ __metadata: languageName: node linkType: hard -"@carbon/styles@npm:1.61.0": - version: 1.61.0 - resolution: "@carbon/styles@npm:1.61.0" +"@carbon/styles@npm:^1.69.0": + version: 1.69.0 + resolution: "@carbon/styles@npm:1.69.0" dependencies: - "@carbon/colors": "npm:^11.23.0" - "@carbon/feature-flags": "npm:^0.20.0" - "@carbon/grid": "npm:^11.24.0" - "@carbon/layout": "npm:^11.23.0" - "@carbon/motion": "npm:^11.19.0" - "@carbon/themes": "npm:^11.37.0" - "@carbon/type": "npm:^11.28.0" + "@carbon/colors": "npm:^11.28.0" + "@carbon/feature-flags": "npm:^0.24.0" + "@carbon/grid": "npm:^11.29.0" + "@carbon/layout": "npm:^11.28.0" + "@carbon/motion": "npm:^11.24.0" + "@carbon/themes": "npm:^11.43.0" + "@carbon/type": "npm:^11.33.0" "@ibm/plex": "npm:6.0.0-next.6" "@ibm/telemetry-js": "npm:^1.5.0" peerDependencies: @@ -1680,13 +1619,13 @@ __metadata: peerDependenciesMeta: sass: optional: true - checksum: 10c0/2088c7cf76afe8a5827a59e2d4322773c560bd49424de2373e5019986529dfb7747a2b6bc9390ee0180ae468a12cd3f979001c7946c2571abdb03b1ef6f2fbe8 + checksum: 10c0/492ec13513c5fb173d5cd5f5a62b310f5133bb7062eea35cdb03389f3b644bf9028b3fbf0d2eaf882541df99f509fb1ea706e442f5bad2dd6018aa305d3adfdc languageName: node linkType: hard -"@carbon/styles@npm:^1.69.0": - version: 1.69.0 - resolution: "@carbon/styles@npm:1.69.0" +"@carbon/styles@npm:^1.70.0": + version: 1.70.0 + resolution: "@carbon/styles@npm:1.70.0" dependencies: "@carbon/colors": "npm:^11.28.0" "@carbon/feature-flags": "npm:^0.24.0" @@ -1696,13 +1635,21 @@ __metadata: "@carbon/themes": "npm:^11.43.0" "@carbon/type": "npm:^11.33.0" "@ibm/plex": "npm:6.0.0-next.6" + "@ibm/plex-mono": "npm:0.0.3-alpha.0" + "@ibm/plex-sans": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-arabic": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-devanagari": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-hebrew": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-thai": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-thai-looped": "npm:0.0.3-alpha.0" + "@ibm/plex-serif": "npm:0.0.3-alpha.0" "@ibm/telemetry-js": "npm:^1.5.0" peerDependencies: sass: ^1.33.0 peerDependenciesMeta: sass: optional: true - checksum: 10c0/492ec13513c5fb173d5cd5f5a62b310f5133bb7062eea35cdb03389f3b644bf9028b3fbf0d2eaf882541df99f509fb1ea706e442f5bad2dd6018aa305d3adfdc + checksum: 10c0/020d94f3c34d95695b05e26556648ee5e155fe796c862048e6c8db3d5529dab4a079d050c03962ab20243161b542bc42389ffebd23f6ca0e11baf0308c867974 languageName: node linkType: hard @@ -1719,19 +1666,6 @@ __metadata: languageName: node linkType: hard -"@carbon/themes@npm:^11.37.0": - version: 11.37.1 - resolution: "@carbon/themes@npm:11.37.1" - dependencies: - "@carbon/colors": "npm:^11.23.1" - "@carbon/layout": "npm:^11.23.1" - "@carbon/type": "npm:^11.28.1" - "@ibm/telemetry-js": "npm:^1.5.0" - color: "npm:^4.0.0" - checksum: 10c0/83dd8813c533880afffd69996bc31bb18051beff4effaf57f39d1e288b7c3fc7224f6d291865e1653c213e43c222f7d0772e85a4980db8ead1cdb45fdf53043a - languageName: node - linkType: hard - "@carbon/type@npm:11.33.0, @carbon/type@npm:^11.33.0": version: 11.33.0 resolution: "@carbon/type@npm:11.33.0" @@ -1743,30 +1677,18 @@ __metadata: languageName: node linkType: hard -"@carbon/type@npm:^11.28.0, @carbon/type@npm:^11.28.1": - version: 11.28.1 - resolution: "@carbon/type@npm:11.28.1" - dependencies: - "@carbon/grid": "npm:^11.24.1" - "@carbon/layout": "npm:^11.23.1" - "@ibm/telemetry-js": "npm:^1.5.0" - checksum: 10c0/b5446b26b99cb12a646145475dff42a175ad61dcd3a2bca7daa99ef3024ef48edc67752eb96c7d84a2ae33e1bf15ebd4b04512e61cdd70e2302ded0c2f08d19b - languageName: node - linkType: hard - -"@carbon/web-components@npm:2.11.1": - version: 2.11.1 - resolution: "@carbon/web-components@npm:2.11.1" +"@carbon/web-components@npm:^2.17.0": + version: 2.18.0 + resolution: "@carbon/web-components@npm:2.18.0" dependencies: - "@babel/runtime": "npm:^7.16.3" - "@carbon/ibm-products-styles": "npm:^2.30.1" - "@carbon/styles": "npm:1.61.0" + "@carbon/styles": "npm:^1.70.0" "@floating-ui/dom": "npm:^1.6.3" "@ibm/telemetry-js": "npm:^1.5.0" flatpickr: "npm:4.6.13" - lit: "npm:^2.7.6" + lit: "npm:^3.1.0" lodash-es: "npm:^4.17.21" - checksum: 10c0/40629356183d072314ca9235abe973f0aca1f8dfbadbb458cbdfa0735797446952a9384e1616138e27050ca66f59ba43ad805ea293dfd295ca0411cf7420b0f9 + tslib: "npm:^2.6.3" + checksum: 10c0/6d7012537b100827a9cba3fff9355239562575ad069b7f715add71c4899ed2c2b014b8f1190282b6e43c754e5394159f80abef5671c2c253cbfb3d9ffc216d7a languageName: node linkType: hard @@ -2738,6 +2660,62 @@ __metadata: languageName: node linkType: hard +"@ibm/plex-mono@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-mono@npm:0.0.3-alpha.0" + checksum: 10c0/75fa4dcaac8deef027004c7ed431a438e3584bc7a21e16446818ea576f2ed9af06a80980f3959d2ce0c640f30bdcc1b3c8583a858c4c7419320c70aa75e46b1e + languageName: node + linkType: hard + +"@ibm/plex-sans-arabic@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-arabic@npm:0.0.3-alpha.0" + checksum: 10c0/be0ca3afe44241c0d429bb307540c72e3af81cc02bda9bb0027d00cd82e00b53ad2301d6e20f2b0434f260325d255edbddeab4addc5f32076dc7ee1988c51a3a + languageName: node + linkType: hard + +"@ibm/plex-sans-devanagari@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-devanagari@npm:0.0.3-alpha.0" + checksum: 10c0/838c23d4e279f4b800594227f1b59edc291dc39c76551e0db988cf9641600683b885fb469de7ec8504204b8d7f76dddd04b5478ed995bdb9719465766d79f316 + languageName: node + linkType: hard + +"@ibm/plex-sans-hebrew@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-hebrew@npm:0.0.3-alpha.0" + checksum: 10c0/7737413091a9751b2e031ef2cf3adec4942c708896f3b3344973c03e94b947af176515717ba9ecc027e6f142633193ead4318ed65bf023c49618664aa892f96c + languageName: node + linkType: hard + +"@ibm/plex-sans-thai-looped@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-thai-looped@npm:0.0.3-alpha.0" + checksum: 10c0/40596540e64e997bd65b860241764118df896cfb3426c081f75df1416c99f3a61a61881f1df066bd422ad0db934e8720e0f9e353ba385039cc437d89f30d8ee8 + languageName: node + linkType: hard + +"@ibm/plex-sans-thai@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-thai@npm:0.0.3-alpha.0" + checksum: 10c0/ef0877fcafdd99f6cd6c5aff3b96245de9dada9aee58bdcaa5da70256161ce7b67a7457e4a5952c9351b4eff0e06195c548ed0527eaf4259cc4e581a835af733 + languageName: node + linkType: hard + +"@ibm/plex-sans@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans@npm:0.0.3-alpha.0" + checksum: 10c0/9178849fa798506d55d16cd09210825255952b8661243e933cb2e68874e94ce9a438f848adb6f1729044d899991ce75f4eb5ad4a018f52fa4d43c3b5d25628cc + languageName: node + linkType: hard + +"@ibm/plex-serif@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-serif@npm:0.0.3-alpha.0" + checksum: 10c0/215c3182b6b197045711bc351162f2084a9ed06a85f00a00099543f2ac789e2b1a0659f83ff9d2602cd30fde4d3225b549f82ce966f4d64bb124e17bd77962d0 + languageName: node + linkType: hard + "@ibm/plex@npm:6.0.0-next.6": version: 6.0.0-next.6 resolution: "@ibm/plex@npm:6.0.0-next.6" @@ -2939,7 +2917,7 @@ __metadata: languageName: node linkType: hard -"@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0, @lit-labs/ssr-dom-shim@npm:^1.2.0": +"@lit-labs/ssr-dom-shim@npm:^1.2.0": version: 1.2.1 resolution: "@lit-labs/ssr-dom-shim@npm:1.2.1" checksum: 10c0/75cecf2cc4c1a089c6984d9f45b8264e3b4947b4ebed96aef7eb201bd6b3f26caeaafedf457884ac38d4f2d99cddaf94a4b2414c02c61fbf1f64c0a0dade11f4 @@ -2955,15 +2933,6 @@ __metadata: languageName: node linkType: hard -"@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.6.0": - version: 1.6.3 - resolution: "@lit/reactive-element@npm:1.6.3" - dependencies: - "@lit-labs/ssr-dom-shim": "npm:^1.0.0" - checksum: 10c0/10f1d25e24e32feb21c4c6f9e11d062901241602e12c4ecf746b3138f87fed4d8394194645514d5c1bfd5f33f3fd56ee8ef41344e2cb4413c40fe4961ec9d419 - languageName: node - linkType: hard - "@lit/reactive-element@npm:^2.0.4": version: 2.0.4 resolution: "@lit/reactive-element@npm:2.0.4" @@ -4212,6 +4181,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm-eabi@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.13.0" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@rollup/rollup-android-arm-eabi@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-android-arm-eabi@npm:4.24.0" @@ -4219,6 +4195,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm64@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-android-arm64@npm:4.13.0" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-android-arm64@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-android-arm64@npm:4.24.0" @@ -4226,6 +4209,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-arm64@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-darwin-arm64@npm:4.13.0" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-arm64@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-darwin-arm64@npm:4.24.0" @@ -4233,6 +4223,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-x64@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-darwin-x64@npm:4.13.0" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-x64@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-darwin-x64@npm:4.24.0" @@ -4240,6 +4237,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm-gnueabihf@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.13.0" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "@rollup/rollup-linux-arm-gnueabihf@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.24.0" @@ -4254,6 +4258,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm64-gnu@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.13.0" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-gnu@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.24.0" @@ -4261,6 +4272,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm64-musl@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.13.0" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-musl@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-linux-arm64-musl@npm:4.24.0" @@ -4275,6 +4293,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-riscv64-gnu@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.13.0" + conditions: os=linux & cpu=riscv64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-riscv64-gnu@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.24.0" @@ -4289,6 +4314,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-x64-gnu@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.13.0" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-gnu@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-linux-x64-gnu@npm:4.24.0" @@ -4296,6 +4328,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-x64-musl@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.13.0" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-musl@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-linux-x64-musl@npm:4.24.0" @@ -4303,6 +4342,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-arm64-msvc@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.13.0" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-win32-arm64-msvc@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.24.0" @@ -4310,6 +4356,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-ia32-msvc@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.13.0" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@rollup/rollup-win32-ia32-msvc@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.24.0" @@ -4317,6 +4370,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-x64-msvc@npm:4.13.0": + version: 4.13.0 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.13.0" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-win32-x64-msvc@npm:4.24.0": version: 4.24.0 resolution: "@rollup/rollup-win32-x64-msvc@npm:4.24.0" @@ -5662,7 +5722,7 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:*, @types/estree@npm:^1.0.0": +"@types/estree@npm:*, @types/estree@npm:1.0.5, @types/estree@npm:^1.0.0": version: 1.0.5 resolution: "@types/estree@npm:1.0.5" checksum: 10c0/b3b0e334288ddb407c7b3357ca67dbee75ee22db242ca7c56fe27db4e1a31989cb8af48a84dd401deb787fe10cc6b2ab1ee82dc4783be87ededbe3d53c79c70d @@ -15159,17 +15219,6 @@ __metadata: languageName: node linkType: hard -"lit-element@npm:^3.3.0": - version: 3.3.3 - resolution: "lit-element@npm:3.3.3" - dependencies: - "@lit-labs/ssr-dom-shim": "npm:^1.1.0" - "@lit/reactive-element": "npm:^1.3.0" - lit-html: "npm:^2.8.0" - checksum: 10c0/f44c12fa3423a4e9ca5b84651410687e14646bb270ac258325e6905affac64a575f041f8440377e7ebaefa3910b6f0d6b8b1e902cb1aa5d0849b3fdfbf4fb3b6 - languageName: node - linkType: hard - "lit-element@npm:^4.0.4": version: 4.0.4 resolution: "lit-element@npm:4.0.4" @@ -15181,6 +15230,17 @@ __metadata: languageName: node linkType: hard +"lit-element@npm:^4.1.0": + version: 4.1.1 + resolution: "lit-element@npm:4.1.1" + dependencies: + "@lit-labs/ssr-dom-shim": "npm:^1.2.0" + "@lit/reactive-element": "npm:^2.0.4" + lit-html: "npm:^3.2.0" + checksum: 10c0/b3c6c77d60a8239134d7c7e7c002be48414074f5b42f9ad026216749101a4f948266a4db9110a536fb23914044d584dbe4185c87064a4fa98baa4045ba2bbb46 + languageName: node + linkType: hard + "lit-html@npm:^2.0.0 || ^3.0.0, lit-html@npm:^3.1.2": version: 3.1.2 resolution: "lit-html@npm:3.1.2" @@ -15190,12 +15250,12 @@ __metadata: languageName: node linkType: hard -"lit-html@npm:^2.8.0": - version: 2.8.0 - resolution: "lit-html@npm:2.8.0" +"lit-html@npm:^3.2.0": + version: 3.2.1 + resolution: "lit-html@npm:3.2.1" dependencies: "@types/trusted-types": "npm:^2.0.2" - checksum: 10c0/90057dee050803823ac884c1355b0213ab8c05fbe2ec63943c694b61aade5d36272068f3925f45a312835e504f9c9784738ef797009f0a756a750351eafb52d5 + checksum: 10c0/31c02df2148bf9a73545570cbe57aae01c4de1d9b44060b6ff13641837d38e39e6b1abcf92e13882cc84f5fee37605ed79602b91ad479728549014462808118e languageName: node linkType: hard @@ -15210,14 +15270,14 @@ __metadata: languageName: node linkType: hard -"lit@npm:^2.7.6": - version: 2.8.0 - resolution: "lit@npm:2.8.0" +"lit@npm:^3.1.0": + version: 3.2.1 + resolution: "lit@npm:3.2.1" dependencies: - "@lit/reactive-element": "npm:^1.6.0" - lit-element: "npm:^3.3.0" - lit-html: "npm:^2.8.0" - checksum: 10c0/bf33c26b1937ee204aed1adbfa4b3d43a284e85aad8ea9763c7865365917426eded4e5888158b4136095ea42054812561fe272862b61775f1198fad3588b071f + "@lit/reactive-element": "npm:^2.0.4" + lit-element: "npm:^4.1.0" + lit-html: "npm:^3.2.0" + checksum: 10c0/064a31459fe54ad052c0685d058dd5aef089ddc97a247888ef91a0356dfef60c8cc531e48077bbd2cb4e9f48cb86f0ff0951bb535f1d9f144d2351f253291f66 languageName: node linkType: hard @@ -15501,7 +15561,14 @@ __metadata: languageName: node linkType: hard -"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0": +"lru-cache@npm:^10.0.1": + version: 10.2.0 + resolution: "lru-cache@npm:10.2.0" + checksum: 10c0/c9847612aa2daaef102d30542a8d6d9b2c2bb36581c1bf0dc3ebf5e5f3352c772a749e604afae2e46873b930a9e9523743faac4e5b937c576ab29196774712ee + languageName: node + linkType: hard + +"lru-cache@npm:^10.2.0": version: 10.4.3 resolution: "lru-cache@npm:10.4.3" checksum: 10c0/ebd04fbca961e6c1d6c0af3799adcc966a1babe798f685bb84e6599266599cd95d94630b10262f5424539bc4640107e8a33aa28585374abf561d30d16f4b39fb @@ -19938,7 +20005,61 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^4.0.0, rollup@npm:^4.20.0, rollup@npm:^4.4.0": +"rollup@npm:^4.0.0, rollup@npm:^4.4.0": + version: 4.13.0 + resolution: "rollup@npm:4.13.0" + dependencies: + "@rollup/rollup-android-arm-eabi": "npm:4.13.0" + "@rollup/rollup-android-arm64": "npm:4.13.0" + "@rollup/rollup-darwin-arm64": "npm:4.13.0" + "@rollup/rollup-darwin-x64": "npm:4.13.0" + "@rollup/rollup-linux-arm-gnueabihf": "npm:4.13.0" + "@rollup/rollup-linux-arm64-gnu": "npm:4.13.0" + "@rollup/rollup-linux-arm64-musl": "npm:4.13.0" + "@rollup/rollup-linux-riscv64-gnu": "npm:4.13.0" + "@rollup/rollup-linux-x64-gnu": "npm:4.13.0" + "@rollup/rollup-linux-x64-musl": "npm:4.13.0" + "@rollup/rollup-win32-arm64-msvc": "npm:4.13.0" + "@rollup/rollup-win32-ia32-msvc": "npm:4.13.0" + "@rollup/rollup-win32-x64-msvc": "npm:4.13.0" + "@types/estree": "npm:1.0.5" + fsevents: "npm:~2.3.2" + dependenciesMeta: + "@rollup/rollup-android-arm-eabi": + optional: true + "@rollup/rollup-android-arm64": + optional: true + "@rollup/rollup-darwin-arm64": + optional: true + "@rollup/rollup-darwin-x64": + optional: true + "@rollup/rollup-linux-arm-gnueabihf": + optional: true + "@rollup/rollup-linux-arm64-gnu": + optional: true + "@rollup/rollup-linux-arm64-musl": + optional: true + "@rollup/rollup-linux-riscv64-gnu": + optional: true + "@rollup/rollup-linux-x64-gnu": + optional: true + "@rollup/rollup-linux-x64-musl": + optional: true + "@rollup/rollup-win32-arm64-msvc": + optional: true + "@rollup/rollup-win32-ia32-msvc": + optional: true + "@rollup/rollup-win32-x64-msvc": + optional: true + fsevents: + optional: true + bin: + rollup: dist/bin/rollup + checksum: 10c0/90f8cdf9c2115223cbcfe91d932170a85c0928ae1943f45af6877907ea150585b80f656cf2bc471c6f809cb7e158dd85dbea9f91ab4fd5bce0eaf6c3f5f4fd92 + languageName: node + linkType: hard + +"rollup@npm:^4.20.0": version: 4.24.0 resolution: "rollup@npm:4.24.0" dependencies: @@ -21956,7 +22077,14 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2, tslib@npm:^2.6.3": +"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2": + version: 2.6.2 + resolution: "tslib@npm:2.6.2" + checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb + languageName: node + linkType: hard + +"tslib@npm:^2.6.3": version: 2.8.1 resolution: "tslib@npm:2.8.1" checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62 From 599e57dc966c434c2425a6bfbb02c2c9a25470df Mon Sep 17 00:00:00 2001 From: Owen Cornec Date: Wed, 27 Nov 2024 03:00:46 -0500 Subject: [PATCH 2/3] chore(chat): chart spec handling, code examples --- .../chartElement/src/chartElement.scss | 24 +++- .../chartElement/src/chartElement.template.ts | 12 +- .../chartElement/src/chartElement.ts | 91 ++++++++++--- .../chat/__stories__/chat.stories.js | 123 ++++++++++++++++++ .../__stories__/codeElement.stories.js | 30 ++++- .../chat/components/header/src/header.ts | 4 - .../imageElement/src/imageElement.scss | 2 - .../popupElement/src/popupElement.ts | 2 - 8 files changed, 252 insertions(+), 36 deletions(-) diff --git a/packages/web-components/src/components/chat/components/chartElement/src/chartElement.scss b/packages/web-components/src/components/chat/components/chartElement/src/chartElement.scss index 040b8e67..53830de6 100644 --- a/packages/web-components/src/components/chat/components/chartElement/src/chartElement.scss +++ b/packages/web-components/src/components/chat/components/chartElement/src/chartElement.scss @@ -66,11 +66,10 @@ .#{$clabs-prefix}--chat-chart-thumbnail-container img { position: absolute; - block-size: calc(100% - 16px); - inline-size: calc(100% - 16px); - inset-block-start: 8px; - inset-inline-start: 8px; - object-fit: cover; + block-size: calc(100%); + inline-size: calc(100%); + inset-block-start: 0; + inset-inline-start: 0; } .#{$clabs-prefix}--chat-chart-options-prefade { @@ -147,6 +146,7 @@ display: flex; overflow: hidden; box-sizing: border-box; + flex: 1; flex-direction: column; block-size: 100%; inline-size: 80%; @@ -160,10 +160,11 @@ .#{$clabs-prefix}--chat-editor-modal-section-chart { overflow: hidden; box-sizing: border-box; + flex: 2; border: 1px solid $border-subtle-00; border-radius: 8px; block-size: 100%; - inline-size: 100%; + inline-size: 50%; } .#{$clabs-prefix}--chat-chart-options svg { @@ -265,7 +266,7 @@ .#{$clabs-prefix}--chat-chart-fullscreen-container { position: fixed; z-index: 999; - display: var(--chat-chart-fullscreen-visibility, none); + display: none; box-sizing: border-box; padding: 64px; background: $background; @@ -274,6 +275,7 @@ inline-size: 100vw; inset: 0; } + .#{$clabs-prefix}--chat-chart-fullscreen-container-close { position: fixed; z-index: 9999; @@ -281,6 +283,14 @@ inset-inline-end: 20px; } + .#{$clabs-prefix}--chat-chart-modal-visible { + display: block; + } + + .#{$clabs-prefix}--chat-chart-edit-modal-visible { + display: flex; + } + @keyframes loading-animation { from { background-position: 200% 0; diff --git a/packages/web-components/src/components/chat/components/chartElement/src/chartElement.template.ts b/packages/web-components/src/components/chat/components/chartElement/src/chartElement.template.ts index 9a55540e..8d9abd04 100644 --- a/packages/web-components/src/components/chat/components/chartElement/src/chartElement.template.ts +++ b/packages/web-components/src/components/chat/components/chartElement/src/chartElement.template.ts @@ -92,7 +92,11 @@ export function chartElementTemplate(customElementClass) { : html``} ${content ? html` -
@@ -100,7 +104,11 @@ export function chartElementTemplate(customElementClass) {
-
+
${ chartLoading || errorMessage ? html` 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 8020ea24..eff28950 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 @@ -142,7 +142,7 @@ export default class chartElement extends LitElement { * Enable user-brush selection to fetch groups of elements to make targeted query */ @property({ type: Boolean, attribute: 'enable-multi-selections' }) - enableMultiSelections = true; + enableMultiSelections; /** * internal brush selection value @@ -1054,6 +1054,7 @@ export default class chartElement extends LitElement { * @param {event} event - custom codelement live change event */ _handleLiveCarbonEditorChange(event) { + console.log(event); if (event?.detail?.newLineText) { const previousData = this._visualizationSpec.data; @@ -1068,12 +1069,12 @@ export default class chartElement extends LitElement { //this.content = JSON.stringify(newSpec); //this._prepareVisualization(newSpec) this._prepareSpecification(newSpec, false, true, 0); - //this._prepareVisualization(newSpec); + this._prepareVisualization(newSpec); this._editedSpec = newSpec; - window.setTimeout(async () => { + /*window.setTimeout(async () => { await this._displayVisualization(); - }, 200); + }, 200);*/ } catch (error) { console.error(error); this.chartLoading = true; @@ -1309,20 +1310,11 @@ export default class chartElement extends LitElement { if ('layer' in spec) { this._specType = 'layered'; layeredSpec = this._prepareSpecification(spec, false, true, 0); - /*for (const [index, subSpec] of spec['layer'].entries()) { - const tempSubSpec = this._prepareSpecification(JSON.parse(JSON.stringify(subSpec)), true, false, index+1); - delete tempSubSpec['background']; - delete tempSubSpec['padding']; - layeredSpec['layer'][index] = tempSubSpec; - }*/ - } else if (spec['hconcat']) { - plainSpec = this._configUpdate(spec); - } else if (spec.encoding?.facet) { - plainSpec = this._configUpdate(spec); - } else if (spec['vconcat']) { + } else if (spec.encoding?.facet || spec['hconcat'] || spec['vconcat']) { plainSpec = this._configUpdate(spec); } else if (spec['repeat']) { this._specType = 'repeated'; + const currentContainerWidth = this.clientWidth; const currentContainerHeight = this.clientHeight; repeatedSpec = this._prepareSpecification( @@ -1402,7 +1394,7 @@ export default class chartElement extends LitElement { } } - let finalSpec; + let finalSpec = spec; // = if (spec['layer']) { finalSpec = layeredSpec; @@ -1417,9 +1409,74 @@ export default class chartElement extends LitElement { return ''; } + /** _adjustSubElements + * @param {object} spec - vega sp3cification JSON + * @param {integer} width - chart width + * @param {integer} height - chart height + */ + _adjustSubElements(spec, width, height) { + const gapSize = 8; + const legendHeight = 30; + const titleHeight = 40; + //const facetHeight = 30; + const hasTitle = !!spec.title; + const hasLegend = true; + /*spec.encoding && + Object.values(spec.encoding).some( + (subEncoding) => subEncoding.legend !== null + );*/ + if (spec.repeat) { + const itemCount = spec.repeat.row + ? spec.repeat.row.length + : spec.repeat.column.length; + const subWidth = (width - gapSize * (itemCount - 1)) / itemCount; + const subHeight = height; + this._adjustSubElements(spec.spec, subWidth, subHeight); + } else if (spec.vconcat) { + const subHeight = + (height - gapSize * (spec.vconcat.length - 1)) / spec.vconcat.length; + spec.vconcat.forEach((subSpec) => { + this._adjustSubElements(subSpec, width, subHeight); + }); + } else if (spec.concat) { + const rows = Math.ceil(Math.sqrt(spec.concat.length)); + const columns = Math.ceil(spec.concat.length / rows); + const subWidth = (width - gapSize * (columns - 1)) / columns; + const subHeight = (height - gapSize * (rows - 1)) / rows; + spec.concat.forEach((subSpec) => { + this._adjustSubElements(subSpec, subWidth, subHeight); + }); + } else if (spec.facet) { + /*const rows = Math.ceil(Math.sqrt(spec.concat.length)); + const columns = Math.ceil(spec.concat.length/rows);*/ + } else { + let newHeight = height; + if (hasTitle) { + newHeight -= titleHeight; + } + if (hasLegend) { + newHeight -= legendHeight; + } + spec.height = newHeight; + spec.width = width; + } + } + + /** + * _adjustChart - apply changes for carbonization + * @param {object} spec - vega sp3cification JSON + */ + _adjustChart(spec) { + const globalPadding = 16; + const chartWidth = this.clientWidth - 2 * globalPadding; + const chartHeight = this.clientHeight - 2 * globalPadding; + this._adjustSubElements(spec, chartWidth, chartHeight); + return spec; + } + /** * _configUpdate - apply changes for carbonization - * @param {object} spec - vega sepcification JSON + * @param {object} spec - vega sp3cification JSON */ _configUpdate(spec) { const specCopy = this._prepareSpecification(spec, true, true, 0); 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 32239f0a..7b999213 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 @@ -1015,6 +1015,7 @@ const objectPlaygroundControls = { 'Flowers', 'Visualization', 'Cloud', + 'Diagrams', ], }, conversationJSON: { @@ -1623,6 +1624,128 @@ const conversationExamples = { index: 1, }, ], + Diagrams: [ + { + text: 'Give me 3 server diagram examples for a VPC', + origin: 'user', + time: '16:56', + index: 0, + }, + { + text: '', + origin: 'bot', + hasError: false, + time: '10:34', + index: 1, + elements: [ + { + content: 'Here are a few example architectures available to you:\n\n', + type: 'text', + }, + { + content: '1. VPC landing zone - Standard variation', + type: 'text', + }, + { + content: + 'The Standard variation of the VPC landing zone deployable architecture uses two Virtual Private Clouds (VPC), a Management VPC, and a Workload VPC to manage the environment and the deployed workload. Each VPC is a multi-zoned, multi-subnet implementation that keeps your workloads secure. A transit gateway connects the VPCs to each other and Virtual Private Endpoints are used connect to IBM Cloud services.', + type: 'text', + }, + { + content: + 'https://github.com/terraform-ibm-modules/terraform-ibm-landing-zone/raw/main/reference-architectures/vpc.drawio.svg', + type: 'img', + }, + { + content: + 'https://cloud.ibm.com/catalog/architecture/deploy-arch-ibm-slz-vpc-9fc0fa64-27af-4fed-9dce-47b3640ba739-global', + type: 'link-list', + }, + { + content: + '2. Red Hat OpenShift Container Platform on VPC landing zone - QuickStart variation', + type: 'text', + }, + { + content: + 'The QuickStart variation of the Red Hat OpenShift Container Platform on VPC landing zone deployable architecture creates a fully customizable Virtual Private Cloud (VPC) environment in a single region. The solution provides a single Red Hat OpenShift cluster in a secure VPC for your workloads. The QuickStart variation is designed to deploy quickly for demonstration and development.\n', + type: 'text', + }, + { + content: + 'https://github.com/terraform-ibm-modules/terraform-ibm-landing-zone/raw/main/reference-architectures/roks-quickstart.drawio.svg', + type: 'img', + }, + { + content: + 'https://cloud.ibm.com/catalog/architecture/deploy-arch-ibm-slz-ocp-95fccffc-ae3b-42df-b6d9-80be5914d852-global', + type: 'link-list', + }, + { + content: + '3. Red Hat OpenShift Container Platform on VPC landing zone', + type: 'text', + }, + { + content: + 'https://github.com/terraform-ibm-modules/terraform-ibm-landing-zone/raw/main/reference-architectures/roks.drawio.svg', + type: 'img', + }, + { + content: + 'https://cloud.ibm.com/catalog/architecture/deploy-arch-ibm-slz-ocp-95fccffc-ae3b-42df-b6d9-80be5914d852-global', + type: 'link-list', + }, + { + content: + 'Select an option to start from and begin editing your server architecture.', + type: 'text', + }, + ], + }, + { + text: 'Give me a VSi variant', + origin: 'user', + time: '16:59', + index: 0, + }, + { + text: '', + origin: 'bot', + hasError: false, + time: '10:34', + index: 1, + elements: [ + { + content: 'Here is a template suited to you needs:\n', + type: 'text', + }, + { + content: 'VSI on VPC landing zone - Standard variation', + type: 'text', + }, + { + content: + 'The Standard variation of the VSI on VPC landing zone deployable architecture is based on the IBM Cloud for Financial Services reference architecture. The architecture creates a customizable and secure infrastructure, with virtual servers, to run your workloads with a Virtual Private Cloud (VPC) in multizone regions.', + type: 'text', + }, + { + content: + 'https://github.com/terraform-ibm-modules/terraform-ibm-landing-zone/raw/main/reference-architectures/vsi-vsi.drawio.svg', + type: 'img', + }, + { + content: + 'https://cloud.ibm.com/catalog/architecture/deploy-arch-ibm-slz-vsi-ef663980-4c71-4fac-af4f-4a510a9bcf68-global', + type: 'link-list', + }, + { + content: 'Would you like to customize this configuration?', + type: 'text', + }, + ], + }, + ], Agents: [ { text: 'Find me a dataset about the weather in Ohio circa 2015', diff --git a/packages/web-components/src/components/chat/components/codeElement/__stories__/codeElement.stories.js b/packages/web-components/src/components/chat/components/codeElement/__stories__/codeElement.stories.js index eb1d93ac..9f24fa48 100644 --- a/packages/web-components/src/components/chat/components/codeElement/__stories__/codeElement.stories.js +++ b/packages/web-components/src/components/chat/components/codeElement/__stories__/codeElement.stories.js @@ -48,6 +48,12 @@ const codeExamples = { 'from math import sqrt\n#prime function to check given number prime or not:\ndef Prime(number,itr):\n\t#base condition\n\tif itr == 1:\n\t\treturn True\n\t#if given number divided by itr or not\n\tif number % itr == 0:\n\t\treturn False\n\t#Recursive function Call\n\tif Prime(number,itr-1) == False:\n\t\treturn False\n\treturn True\n', 'carbon datatable': `import React from "react";\nimport { DataTable } from "..";\nconst {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableContainer,\n\tTableHead,\n\tTableHeader,\n\tTableRow\n} = DataTable;\nimport mdx from "../DataTable.mdx";\nimport "./datatable-story.scss";\nexport default {\n\ttitle: "Components/DataTable/Basic",\n\tcomponent: DataTable,\n\tsubcomponents: {\n\t\tTableContainer,\n\t\tTable,\n\t\tTableHead,\n\t\tTableRow,\n\t\tTableHeader,\n\t\tTableBody,\n\t\tTableCell\n\t},\n\tparameters: {\n\t\tdocs: {\n\t\t\tpage: mdx\n\t\t}\n\t}\n};\nexport const Default = () => {\n\tconst rows = [{\n\t\tid: "load-balancer-1",\n\t\tname: "Load Balancer 1",\n\t\trule: "Round robin",\n\t\tStatus: "Starting",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-2",\n\t\tname: "Load Balancer 2",\n\t\trule: "DNS delegation",\n\t\tstatus: "Active",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-3",\n\t\tname: "Load Balancer 3",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-4",\n\t\tname: "Load Balancer 4",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-5",\n\t\tname: "Load Balancer 5",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-6",\n\t\tname: "Load Balancer 6",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}, {\n\t\tid: "load-balancer-7",\n\t\tname: "Load Balancer 7",\n\t\trule: "Round robin",\n\t\tstatus: "Disabled",\n\t\tother: "Test",\n\t\texample: "22"\n\t}];\n\tconst headers = ["Name", "Rule", "Status", "Other", "Example"];\n\treturn \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{headers.map(header => \n\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{rows.map(row => \n\t\t\t\t\t\t{Object.keys(row).filter(key => key !== "id").map(key => {\n\t\t\t\t\treturn {row[key]};\n\t\t\t\t})}\n\t\t\t\t\t)}\n\t\t\t\n\t\t
;\n};`, 'SQL example': `-- Simple SQL file example\n-- Creating a table named 'employees'\nCREATE TABLE employees (\nid INT PRIMARY KEY,\nfirst_name VARCHAR(50),\nlast_name VARCHAR(50),\nemail VARCHAR(100),\ndepartment_id INT,\nhire_date DATE\n);\n-- Creating a table named 'departments'\nCREATE TABLE departments (\nid INT PRIMARY KEY,\nname VARCHAR(50)\n);\n-- Inserting data into the 'departments' table\nINSERT INTO departments (id, name) VALUES\n(1, 'Human Resources'),\n(2, 'Marketing'),\n(3, 'Sales'),\n(4, 'IT');\n-- Inserting data into the 'employees' table\nINSERT INTO employees (id, first_name, last_name, email, department_id, hire_date) VALUES\n(1, 'John', 'Doe', 'john.doe@example.com', 3, '2020-01-01'),\n(2, 'Jane', 'Doe', 'jane.doe@example.com', 2, '2019-06-15'),\n(3, 'Jim', 'Smith', 'jim.smith@example.com', 3, '2021-02-20');\n`, + COBOL: `IDENTIFICATION DIVISION.\nPROGRAM-ID. VARS.\nDATA DIVISION.\n\t*> working storage defines variables\n\tWORKING-STORAGE SECTION.\n\t*> define a number with a sign, 3 numbers, a decimal, and then\n\t*> two numbers aafter the decimal. by default it should be 0 filled\n\t01 FIRST-VAR PIC S9(3)V9(2).\n\t*> do the same thing as above but actually initialize\n\t*> to a number -123.45\n\t01 SECOND-VAR PIC S9(3)V9(2) VALUE -123.45.\n\t*> defines an alphabetic string and initialize it to abcdef\n\t01 THIRD-VAR PIC A(6) VALUE 'ABCDEF'.\n\t*> define an alphanumeric string and initialize it to a121$\n\t01 FOURTH-VAR PIC X(5) VALUE 'A121$'.\n\t*> create a grouped variable\n\t01 GROUP-VAR.\n\t\t05 SUBVAR-1 PIC 9(3) VALUE 337.\n\t\t*> create 3 alphanumerics, but use less than\n\t\t*> the allocated space for each of them\n\t\t05 SUBVAR-2 PIC X(15) VALUE 'LALALALA'.\n\t\t05 SUBVAR-3 PIC X(15) VALUE 'LALALA'.\n\t\t05 SUBVAR-4 PIC X(15) VALUE 'LALALA'.\n*> print our variables\nPROCEDURE DIVISION.\n\tDISPLAY "1ST VAR :"FIRST-VAR.\n\tDISPLAY "2ND VAR :"SECOND-VAR.\n\tDISPLAY "3RD VAR :"THIRD-VAR.\n\tDISPLAY "4TH VAR :"FOURTH-VAR.\n\tDISPLAY "GROUP VAR :"GROUP-VAR.\n\tSTOP RUN.`, + Java: `public class BinaryConverter {\n\t\n\tpublic static void main(String[] args){\n\t\tfor(int i = -5; i < 33; i++){\n\t\t\tSystem.out.println(i + ": " + toBinary(i));\n\t\t\tSystem.out.println(i);\n\t\t\t//always another way\n\t\t\tSystem.out.println(i + ": " + Integer.toBinaryString(i));\n\t\t}\n\t}\n\t\n\t/*\n\t * pre: none\n\t * post: returns a String with base10Num in base 2\n\t */\n\tpublic static String toBinary(int base10Num){\n\t\tboolean isNeg = base10Num < 0;\n\t\tbase10Num = Math.abs(base10Num);\n\t\tString result = "";\n\t\t\n\t\twhile(base10Num > 1){\n\t\t\tresult = (base10Num % 2) + result;\n\t\t\tbase10Num /= 2;\n\t\t}\n\t\tassert base10Num == 0 || base10Num == 1 : "value is not <= 1: " + base10Num;\n\t\t\n\t\tresult = base10Num + result;\n\t\tassert all0sAnd1s(result);\n\t\t\n\t\tif( isNeg )\n\t\t\tresult = "-" + result;\n\t\treturn result;\n\t}\n\t\n\t/*\n\t * pre: cal != null\n\t * post: return true if val consists only of characters 1 and 0, false otherwise\n\t */\n\tpublic static boolean all0sAnd1s(String val){\n\t\tassert val != null : "Failed precondition all0sAnd1s. parameter cannot be null";\n\t\tboolean all = true;\n\t\tint i = 0;\n\t\tchar c;\n\t\t\n\t\twhile(all && i < val.length()){\n\t\t\tc = val.charAt(i);\n\t\t\tall = c == '0' || c == '1';\n\t\t\ti++;\n\t\t}\n\t\treturn all;\n\t}\n}`, + 'C++': + '#include \nusing namespace std;\n\n\nint main() {\n\tint x = 5;\n\tint y = 6;\n\tint sum = x + y;\n\tcout << sum;\n\treturn 0;\n}\n', + Malbolge: + "(=<`$9]7<5YXz7wT.3,+O/o'K%$H'~D|#z@b=`{^Lx8%$Xmrkpohm-kNi;gsedcba`_^][ZYXWVUTSRQPONMLKJIHGFEDCBA@?>=<;:9876543s+O} */ - render: () => html`

Single line code

+ render: () => html` +

Single line code



+

SQL example with ticks

+ + +

Python code example with language name


HTML with ticks
- `, + +
+

COBOL example

+
+ +
+

Java example

+
+ +
+

Malbolge example

+
+ + `, }; export const Editing = { diff --git a/packages/web-components/src/components/chat/components/header/src/header.ts b/packages/web-components/src/components/chat/components/header/src/header.ts index 6fd1d0a5..b635b7e8 100644 --- a/packages/web-components/src/components/chat/components/header/src/header.ts +++ b/packages/web-components/src/components/chat/components/header/src/header.ts @@ -221,7 +221,6 @@ export default class header extends LitElement { this.menuContainerTarget = this.shadowRoot?.querySelector( '#' + clabsPrefix + '--chat-header-container-target' ); - console.log(this.parentElement); } /** @@ -566,8 +565,6 @@ export default class header extends LitElement { */ _handleMenuClosed(_event) { this.menuOpened = false; - console.log('close'); - console.log(_event); } /** @@ -575,7 +572,6 @@ export default class header extends LitElement { * @param {event} _event - click event when toggling menu */ _handleMenuOpened(_event) { - console.log('open'); this.menuOpened = true; } diff --git a/packages/web-components/src/components/chat/components/imageElement/src/imageElement.scss b/packages/web-components/src/components/chat/components/imageElement/src/imageElement.scss index 17cb7874..be3b2a07 100644 --- a/packages/web-components/src/components/chat/components/imageElement/src/imageElement.scss +++ b/packages/web-components/src/components/chat/components/imageElement/src/imageElement.scss @@ -15,7 +15,6 @@ $css--plex: true !default; .#{$clabs-prefix}--chat-image-container { display: flex; overflow: hidden; - max-block-size: 246px; } @keyframes fade-in { from { @@ -31,7 +30,6 @@ $css--plex: true !default; border-radius: 8px; animation: fade-in 600ms forwards; block-size: auto; - max-block-size: 246px; max-inline-size: 100%; object-fit: contain; opacity: 0; 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 91dae478..65274740 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 @@ -484,8 +484,6 @@ export default class popupElement extends LitElement { let verticalPosition = 60; let orientation = 'top'; - console.log(this.feedbackFormValues); - if ( parentHeight - feedbackHeight > offsetTop || feedbackHeight > offsetTop From 7c73e4238c597557f058947789e9fc44b77229a0 Mon Sep 17 00:00:00 2001 From: Owen Cornec Date: Wed, 27 Nov 2024 03:09:06 -0500 Subject: [PATCH 3/3] chore(chat): removed missing import --- packages/web-components/src/components/chat/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web-components/src/components/chat/index.ts b/packages/web-components/src/components/chat/index.ts index f7d58171..13020315 100644 --- a/packages/web-components/src/components/chat/index.ts +++ b/packages/web-components/src/components/chat/index.ts @@ -30,6 +30,5 @@ import './components/molecularElement/molecularElement.js'; import './components/formulaElement/formulaElement.js'; import './components/fileUploadElement/fileUploadElement.js'; import './components/popupElement/popupElement.js'; -import './components/feedbackElement/feedbackElement.js'; import './components/diagramElement/diagramElement.js'; import './components/historyViewer/historyViewer.js';