Skip to content

Commit f6abcfc

Browse files
ethanwintersethanwinters
authored
chore: workspace examples (carbon-design-system#936)
1 parent b80983a commit f6abcfc

File tree

65 files changed

+8664
-2873
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+8664
-2873
lines changed

‎demo/src/react/DemoApp.css‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
height: calc(100vh - 48px);
2222
width: 320px;
2323
z-index: 9999;
24-
transition: right 200ms;
24+
/* Carbon motion token: motion.$duration-moderate-01 (240ms) with motion.motion(standard, productive) */
25+
transition: right 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
2526
visibility: visible;
2627
}
2728

@@ -30,11 +31,13 @@
3031
}
3132

3233
.sidebar--expanding {
33-
transition: right 200ms, width 300ms cubic-bezier(0.2, 0, 0.38, 0.9);
34+
/* Carbon motion tokens: motion.$duration-moderate-01 (240ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
35+
transition: right 240ms cubic-bezier(0.2, 0, 0.38, 0.9), width 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
3436
}
3537

3638
.sidebar--contracting {
37-
transition: right 200ms, width 300ms cubic-bezier(0.2, 0, 0.38, 0.9);
39+
/* Carbon motion tokens: motion.$duration-moderate-01 (240ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
40+
transition: right 240ms cubic-bezier(0.2, 0, 0.38, 0.9), width 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
3841
}
3942

4043
.sidebar--closing {
@@ -65,19 +68,22 @@
6568
[dir="rtl"] .sidebar {
6669
right: auto;
6770
left: 0;
68-
transition: left 100ms, visibility 0s 100ms;
71+
/* Carbon motion token: motion.$duration-fast-01 (70ms) with motion.motion(standard, productive) */
72+
transition: left 70ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 70ms;
6973
}
7074

7175
[dir="rtl"] .sidebar--expanded {
7276
width: calc(100vw - 320px - 2rem);
7377
}
7478

7579
[dir="rtl"] .sidebar--expanding {
76-
transition: left 100ms, width 300ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 100ms;
80+
/* Carbon motion tokens: motion.$duration-fast-01 (70ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
81+
transition: left 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 400ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 70ms;
7782
}
7883

7984
[dir="rtl"] .sidebar--contracting {
80-
transition: left 100ms, width 300ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 100ms;
85+
/* Carbon motion tokens: motion.$duration-fast-01 (70ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
86+
transition: left 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 400ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 70ms;
8187
}
8288

8389
[dir="rtl"] .sidebar--closing {
@@ -89,5 +95,8 @@
8995
right: auto;
9096
left: calc(calc(320px + 1rem) * -1);
9197
width: 320px;
92-
transition: left 100ms, visibility 0s 0s;
93-
}
98+
/* Carbon motion token: motion.$duration-fast-01 (70ms) with motion.motion(standard, productive) */
99+
transition: left 70ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 0s;
100+
}
101+
102+
/* Made with Bob */

‎demo/src/web-components/demo-app.ts‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ export class DemoApp extends LitElement {
8383
height: calc(100vh - 48px);
8484
width: 320px;
8585
z-index: 9999;
86-
transition: right 200ms;
86+
/* Carbon motion token: motion.$duration-moderate-01 (240ms) with motion.motion(standard, productive) */
87+
transition: right 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
8788
visibility: visible;
8889
}
8990
@@ -92,15 +93,17 @@ export class DemoApp extends LitElement {
9293
}
9394
9495
.sidebar--expanding {
96+
/* Carbon motion tokens: motion.$duration-moderate-01 (240ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
9597
transition:
96-
right 200ms,
97-
width 300ms cubic-bezier(0.2, 0, 0.38, 0.9);
98+
right 240ms cubic-bezier(0.2, 0, 0.38, 0.9),
99+
width 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
98100
}
99101
100102
.sidebar--contracting {
103+
/* Carbon motion tokens: motion.$duration-moderate-01 (240ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
101104
transition:
102-
right 200ms,
103-
width 300ms cubic-bezier(0.2, 0, 0.38, 0.9);
105+
right 240ms cubic-bezier(0.2, 0, 0.38, 0.9),
106+
width 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
104107
}
105108
106109
.sidebar--closing {
@@ -118,9 +121,10 @@ export class DemoApp extends LitElement {
118121
[dir="rtl"] .sidebar {
119122
right: auto;
120123
left: 0;
124+
/* Carbon motion token: motion.$duration-fast-01 (70ms) with motion.motion(standard, productive) */
121125
transition:
122-
left 100ms,
123-
visibility 0s 100ms;
126+
left 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
127+
visibility 0s 70ms;
124128
}
125129
126130
[dir="rtl"] .sidebar--expanded {
@@ -129,17 +133,19 @@ export class DemoApp extends LitElement {
129133
}
130134
131135
[dir="rtl"] .sidebar--expanding {
136+
/* Carbon motion tokens: motion.$duration-fast-01 (70ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
132137
transition:
133-
left 100ms,
134-
width 300ms cubic-bezier(0.2, 0, 0.38, 0.9),
135-
visibility 0s 100ms;
138+
left 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
139+
width 400ms cubic-bezier(0.2, 0, 0.38, 0.9),
140+
visibility 0s 70ms;
136141
}
137142
138143
[dir="rtl"] .sidebar--contracting {
144+
/* Carbon motion tokens: motion.$duration-fast-01 (70ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
139145
transition:
140-
left 100ms,
141-
width 300ms cubic-bezier(0.2, 0, 0.38, 0.9),
142-
visibility 0s 100ms;
146+
left 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
147+
width 400ms cubic-bezier(0.2, 0, 0.38, 0.9),
148+
visibility 0s 70ms;
143149
}
144150
145151
[dir="rtl"] .sidebar--closing {
@@ -151,8 +157,9 @@ export class DemoApp extends LitElement {
151157
right: auto;
152158
left: calc(calc(320px + 1rem) * -1);
153159
width: 320px;
160+
/* Carbon motion token: motion.$duration-fast-01 (70ms) with motion.motion(standard, productive) */
154161
transition:
155-
left 100ms,
162+
left 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
156163
visibility 0s 0s;
157164
}
158165
`;

‎examples/react/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ npm run start --workspace=<workspace-name>
2323
| [History](./history/) | Example showing message history loading with customLoadHistory. | `npm run start --workspace=@carbon/ai-chat-examples-react-history` |
2424
| [Human Agent](./human-agent/) | Demonstrates a human agent service desk via `serviceDeskFactory` with custom send message behavior. | `npm run start --workspace=@carbon/ai-chat-examples-react-human-agent` |
2525
| [Reasoning & Chain of Thought](./reasoning-and-chain-of-thought/) | Mocked reasoning steps and chain-of-thought flows (streamed, controlled, and default behaviors). | `npm run start --workspace=@carbon/ai-chat-examples-react-reasoning-and-chain-of-thought` |
26+
| [Workspace](./workspace/) | Example demonstrating the workspace feature for displaying custom content alongside chat. | `npm run start --workspace=@carbon/ai-chat-examples-react-workspace` |
27+
| [Workspace Sidebar](./workspace-sidebar/) | Example demonstrating the workspace feature with sidebar layout for custom content. | `npm run start --workspace=@carbon/ai-chat-examples-react-workspace-sidebar` |
2628
| [watsonx.ai](./watsonx/) | Example showing sending and receiving a message from watsonx.ai. | `npm run start --workspace=@carbon/ai-chat-examples-react-watsonx` |
2729
| [Watch state](./watch-state/) | Example monitoring chat state changes. | `npm run start --workspace=@carbon/ai-chat-examples-react-watch-state` |
2830
| [Vite](./vite/) | Vite-based React example that mirrors the basic mock backend while also demonstrating the Vitest suite. | `npm run dev --workspace=@carbon/ai-chat-examples-react-vite` / `npm run test --workspace=@carbon/ai-chat-examples-react-vite` |

‎examples/react/workspace-sidebar/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!--
2+
Copyright IBM Corp. 2025
3+
4+
This source code is licensed under the Apache-2.0 license found in the
5+
LICENSE file in the root directory of this source tree.
6+
-->
7+
8+
<!doctype html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="utf-8"/>
12+
<meta name="viewport" content="width=device-width, initial-scale=1">
13+
<title>@carbon/ai-chat - react - workspace-sidebar</title>
14+
<style>
15+
html, body {
16+
margin: 0;
17+
padding: 0;
18+
}
19+
.chat-custom-element {
20+
height: 100vh;
21+
width: 100vw;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div id="root"></div>
27+
</body>
28+
</html>

‎examples/react/workspace-sidebar/package.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@carbon/ai-chat-examples-react-workspace-sidebar",
3+
"private": true,
4+
"version": "1.5.0",
5+
"type": "module",
6+
"description": "An example using @carbon/ai-chat's React workspace feature with sidebar layout",
7+
"scripts": {
8+
"start": "cross-env ENVIRONMENT=development webpack serve --config ./webpack.config.js",
9+
"build": "webpack --config ./webpack.config.js",
10+
"build:profile": "ANALYZE=true webpack --config ./webpack.config.js"
11+
},
12+
"author": "IBM Corp",
13+
"license": "Apache-2.0",
14+
"browserslist": "> 0.5%, last 2 versions, not dead",
15+
"dependencies": {
16+
"@carbon/ai-chat": "^1.6.0",
17+
"@carbon/ai-chat-components": "^0.8.0",
18+
"@carbon/icons-react": "^11.53.0",
19+
"@carbon/react": "^1.68.0",
20+
"@carbon/web-components": "^2.46.0",
21+
"lit": "^3.1.0",
22+
"react": "^19.0.0",
23+
"react-dom": "^19.0.0",
24+
"webpack-bundle-analyzer": "^4.10.2"
25+
},
26+
"devDependencies": {
27+
"@babel/core": "^7.26.0",
28+
"@babel/preset-env": "^7.26.0",
29+
"@babel/preset-react": "^7.25.9",
30+
"@babel/preset-typescript": "^7.26.0",
31+
"@statoscope/webpack-plugin": "^5.29.0",
32+
"babel-loader": "^9.2.1",
33+
"cross-env": "^7.0.3",
34+
"css-loader": "^7.1.2",
35+
"html-webpack-plugin": "^5.6.3",
36+
"style-loader": "^4.0.0",
37+
"ts-loader": "^9.5.1",
38+
"typescript": "^5.6.3",
39+
"webpack": "^5.95.0",
40+
"webpack-cli": "^5.1.4",
41+
"webpack-dev-server": "^5.1.0"
42+
}
43+
}

‎examples/react/workspace-sidebar/src/App.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/*
2+
* Copyright IBM Corp. 2026
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
.app-header {
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
right: 0;
13+
height: 48px;
14+
background-color: #161616;
15+
color: #f4f4f4;
16+
display: flex;
17+
align-items: center;
18+
justify-content: space-between;
19+
padding: 0 1rem;
20+
z-index: 10000;
21+
}
22+
23+
.app-header__title {
24+
font-size: 0.875rem;
25+
font-weight: 600;
26+
margin: 0;
27+
}
28+
29+
.app-header__button {
30+
background: transparent;
31+
border: none;
32+
color: #f4f4f4;
33+
cursor: pointer;
34+
padding: 0.5rem;
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
/* Carbon motion token: motion.$duration-fast-01 (70ms) with motion.motion(standard, productive) */
39+
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
40+
}
41+
42+
.app-header__button:hover {
43+
background-color: #353535;
44+
}
45+
46+
.app-header__button:disabled {
47+
cursor: not-allowed;
48+
opacity: 0.5;
49+
}
50+
51+
.sidebar {
52+
position: fixed;
53+
right: 0;
54+
top: 48px;
55+
height: calc(100vh - 48px);
56+
width: 320px;
57+
z-index: 9999;
58+
/* Carbon motion token: motion.$duration-moderate-01 (240ms) with motion.motion(standard, productive) */
59+
transition: right 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
60+
visibility: visible;
61+
}
62+
63+
.sidebar .chat-custom-element {
64+
height: 100%;
65+
width: 100%;
66+
}
67+
68+
.sidebar--expanded {
69+
width: calc(100vw - 320px - 2rem);
70+
}
71+
72+
.sidebar--expanding {
73+
/* Carbon motion tokens: motion.$duration-moderate-01 (240ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
74+
transition: right 240ms cubic-bezier(0.2, 0, 0.38, 0.9), width 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
75+
}
76+
77+
.sidebar--contracting {
78+
/* Carbon motion tokens: motion.$duration-moderate-01 (240ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
79+
transition: right 240ms cubic-bezier(0.2, 0, 0.38, 0.9), width 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
80+
}
81+
82+
.sidebar--closing {
83+
right: calc(calc(320px + 1rem) * -1);
84+
width: 320px;
85+
}
86+
87+
.sidebar--closed {
88+
right: calc(calc(320px + 1rem) * -1);
89+
width: 320px;
90+
visibility: hidden;
91+
}
92+
93+
/* RTL support */
94+
[dir="rtl"] .sidebar {
95+
right: auto;
96+
left: 0;
97+
/* Carbon motion token: motion.$duration-fast-01 (70ms) with motion.motion(standard, productive) */
98+
transition: left 70ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 70ms;
99+
}
100+
101+
[dir="rtl"] .sidebar--expanded {
102+
width: calc(100vw - 320px - 2rem);
103+
}
104+
105+
[dir="rtl"] .sidebar--expanding {
106+
/* Carbon motion tokens: motion.$duration-fast-01 (70ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
107+
transition: left 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 400ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 70ms;
108+
}
109+
110+
[dir="rtl"] .sidebar--contracting {
111+
/* Carbon motion tokens: motion.$duration-fast-01 (70ms) and motion.$duration-moderate-02 (400ms) with motion.motion(standard, productive) */
112+
transition: left 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 400ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 70ms;
113+
}
114+
115+
[dir="rtl"] .sidebar--closing {
116+
left: calc(calc(320px + 1rem) * -1);
117+
width: 320px;
118+
}
119+
120+
[dir="rtl"] .sidebar--closed {
121+
right: auto;
122+
left: calc(calc(320px + 1rem) * -1);
123+
width: 320px;
124+
/* Carbon motion token: motion.$duration-fast-01 (70ms) with motion.motion(standard, productive) */
125+
transition: left 70ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 0s;
126+
}
127+
128+
/* Made with Bob */

0 commit comments

Comments
 (0)