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.
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):
\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{"$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
\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
\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
\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
;\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/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) {