Skip to content

Commit bbba690

Browse files
tylerslatontylerslaton
committed
refactor(dojo): add suggestions, improve styling, simplify code
Signed-off-by: Tyler Slaton <[email protected]>
1 parent 14d051e commit bbba690

File tree

12 files changed

+804
-715
lines changed

12 files changed

+804
-715
lines changed

‎typescript-sdk/apps/dojo/components.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "src/app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"iconLibrary": "lucide",
14+
"aliases": {
15+
"components": "@/components",
16+
"utils": "@/lib/utils",
17+
"ui": "@/components/ui",
18+
"lib": "@/lib",
19+
"hooks": "@/hooks"
20+
},
21+
"registries": {}
22+
}

‎typescript-sdk/apps/dojo/e2e/featurePages/ToolBaseGenUIPage.ts‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Page, Locator, expect } from '@playwright/test';
1+
import { Page, Locator, expect } from "@playwright/test";
22

33
export class ToolBaseGenUIPage {
44
readonly page: Page;
@@ -9,15 +9,17 @@ export class ToolBaseGenUIPage {
99
readonly appliedButton: Locator;
1010
readonly haikuBlock: Locator;
1111
readonly japaneseLines: Locator;
12+
readonly mainHaikuDisplay: Locator;
1213

1314
constructor(page: Page) {
1415
this.page = page;
1516
this.haikuAgentIntro = page.getByText("I'm a haiku generator 👋. How can I help you?");
16-
this.messageBox = page.getByRole('textbox', { name: 'Type a message...' });
17+
this.messageBox = page.getByRole("textbox", { name: "Type a message..." });
1718
this.sendButton = page.locator('[data-test-id="copilot-chat-ready"]');
18-
this.haikuBlock = page.locator('[data-testid="haiku-card"]');
19-
this.applyButton = page.getByRole('button', { name: 'Apply' });
20-
this.japaneseLines = page.locator('[data-testid="haiku-line"]');
19+
this.haikuBlock = page.locator(".bg-palette-surface-container.rounded-2xl");
20+
this.applyButton = page.getByRole("button", { name: "Apply" });
21+
this.japaneseLines = page.locator(".font-bold.text-palette-text-primary");
22+
this.mainHaikuDisplay = page.locator(".bg-palette-surface-main");
2123
}
2224

2325
async generateHaiku(message: string) {
@@ -27,27 +29,33 @@ export class ToolBaseGenUIPage {
2729
}
2830

2931
async checkGeneratedHaiku() {
30-
await this.page.locator('[data-testid="haiku-card"]').last().isVisible();
31-
const mostRecentCard = this.page.locator('[data-testid="haiku-card"]').last();
32-
await mostRecentCard.locator('[data-testid="haiku-line"]').first().waitFor({ state: 'visible', timeout: 10000 });
32+
await this.page.locator(".bg-palette-surface-container.rounded-2xl").last().isVisible();
33+
const mostRecentCard = this.page.locator(".bg-palette-surface-container.rounded-2xl").last();
34+
await mostRecentCard
35+
.locator(".font-bold.text-palette-text-primary")
36+
.first()
37+
.waitFor({ state: "visible", timeout: 10000 });
3338
}
3439

3540
async extractChatHaikuContent(page: Page): Promise<string> {
3641
await page.waitForTimeout(3000);
37-
await page.locator('[data-testid="haiku-card"]').first().waitFor({ state: 'visible' });
38-
const allHaikuCards = page.locator('[data-testid="haiku-card"]');
42+
await page
43+
.locator(".bg-palette-surface-container.rounded-2xl")
44+
.first()
45+
.waitFor({ state: "visible" });
46+
const allHaikuCards = page.locator(".bg-palette-surface-container.rounded-2xl");
3947
const cardCount = await allHaikuCards.count();
4048
let chatHaikuContainer;
4149
let chatHaikuLines;
4250

4351
for (let cardIndex = cardCount - 1; cardIndex >= 0; cardIndex--) {
4452
chatHaikuContainer = allHaikuCards.nth(cardIndex);
45-
chatHaikuLines = chatHaikuContainer.locator('[data-testid="haiku-line"]');
53+
chatHaikuLines = chatHaikuContainer.locator(".font-bold.text-palette-text-primary");
4654
const linesCount = await chatHaikuLines.count();
4755

4856
if (linesCount > 0) {
4957
try {
50-
await chatHaikuLines.first().waitFor({ state: 'visible', timeout: 5000 });
58+
await chatHaikuLines.first().waitFor({ state: "visible", timeout: 5000 });
5159
break;
5260
} catch (error) {
5361
continue;
@@ -56,36 +64,38 @@ export class ToolBaseGenUIPage {
5664
}
5765

5866
if (!chatHaikuLines) {
59-
throw new Error('No haiku cards with visible lines found');
67+
throw new Error("No haiku cards with visible lines found");
6068
}
6169

6270
const count = await chatHaikuLines.count();
6371
const lines: string[] = [];
6472

6573
for (let i = 0; i < count; i++) {
6674
const haikuLine = chatHaikuLines.nth(i);
67-
const japaneseText = await haikuLine.locator('p').first().innerText();
75+
const japaneseText = await haikuLine.innerText();
6876
lines.push(japaneseText);
6977
}
7078

71-
const chatHaikuContent = lines.join('').replace(/\s/g, '');
79+
const chatHaikuContent = lines.join("").replace(/\s/g, "");
7280
return chatHaikuContent;
7381
}
7482

7583
async extractMainDisplayHaikuContent(page: Page): Promise<string> {
76-
const mainDisplayLines = page.locator('[data-testid="main-haiku-line"]');
84+
const carouselItems = page.locator('[class*="embla__slide"]');
85+
const activeSlide = carouselItems.first();
86+
const mainDisplayLines = activeSlide.locator(".font-bold.text-palette-text-primary");
7787
const mainCount = await mainDisplayLines.count();
7888
const lines: string[] = [];
7989

8090
if (mainCount > 0) {
8191
for (let i = 0; i < mainCount; i++) {
8292
const haikuLine = mainDisplayLines.nth(i);
83-
const japaneseText = await haikuLine.locator('p').first().innerText();
93+
const japaneseText = await haikuLine.innerText();
8494
lines.push(japaneseText);
8595
}
8696
}
8797

88-
const mainHaikuContent = lines.join('').replace(/\s/g, '');
98+
const mainHaikuContent = lines.join("").replace(/\s/g, "");
8999
return mainHaikuContent;
90100
}
91101

@@ -96,7 +106,7 @@ export class ToolBaseGenUIPage {
96106

97107
const mainHaikuContent = await this.extractMainDisplayHaikuContent(page);
98108

99-
if (mainHaikuContent === '') {
109+
if (mainHaikuContent === "") {
100110
expect(chatHaikuContent.length).toBeGreaterThan(0);
101111
return;
102112
}
@@ -111,4 +121,4 @@ export class ToolBaseGenUIPage {
111121
expect(updatedMainContent).toBe(chatHaikuContent);
112122
}
113123
}
114-
}
124+
}

‎typescript-sdk/apps/dojo/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@ag-ui/server-starter": "workspace:*",
2424
"@ag-ui/server-starter-all-features": "workspace:*",
2525
"@ag-ui/vercel-ai-sdk": "workspace:*",
26+
"@ai-sdk/openai": "^2.0.42",
2627
"@copilotkit/react-core": "1.10.5",
2728
"@copilotkit/react-ui": "1.10.5",
2829
"@copilotkit/runtime": "1.10.5",
@@ -34,15 +35,14 @@
3435
"@mastra/libsql": "^0.15.0",
3536
"@mastra/loggers": "^0.10.14",
3637
"@mastra/memory": "^0.15.4",
37-
"@ai-sdk/openai": "^2.0.42",
3838
"@mdx-js/loader": "^3.1.0",
3939
"@mdx-js/mdx": "^3.1.0",
4040
"@mdx-js/react": "^3.1.0",
4141
"@monaco-editor/react": "^4.7.0",
4242
"@next/mdx": "^15.2.3",
4343
"@phosphor-icons/react": "^2.1.10",
4444
"@radix-ui/react-dropdown-menu": "^2.1.6",
45-
"@radix-ui/react-slot": "^1.1.2",
45+
"@radix-ui/react-slot": "^1.2.3",
4646
"@radix-ui/react-tabs": "^1.1.3",
4747
"@tiptap/extension-color": "^2.11.5",
4848
"@tiptap/extension-placeholder": "^2.11.5",
@@ -54,6 +54,7 @@
5454
"clsx": "^2.1.1",
5555
"dedent": "^1.7.0",
5656
"diff": "^7.0.0",
57+
"embla-carousel-react": "^8.6.0",
5758
"fast-json-patch": "^3.1.1",
5859
"lucide-react": "^0.477.0",
5960
"markdown-it": "^14.1.0",
@@ -66,7 +67,7 @@
6667
"react-markdown": "^10.1.0",
6768
"react-syntax-highlighter": "^15.6.1",
6869
"rxjs": "7.8.1",
69-
"tailwind-merge": "^3.0.2",
70+
"tailwind-merge": "^3.3.0",
7071
"tailwindcss-animate": "^1.0.7",
7172
"untruncate-json": "^0.0.1",
7273
"uuid": "^11.1.0",

‎typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,25 @@ const Chat = () => {
5050
});
5151

5252
return (
53-
<div className="flex justify-center items-center h-full w-full" data-testid="background-container" style={{ background }}>
53+
<div
54+
className="flex justify-center items-center h-full w-full"
55+
data-testid="background-container"
56+
style={{ background }}
57+
>
5458
<div className="h-full w-full md:w-8/10 md:h-8/10 rounded-lg">
5559
<CopilotChat
5660
className="h-full rounded-2xl"
5761
labels={{ initial: "Hi, I'm an agent. Want to chat?" }}
62+
suggestions={[
63+
{
64+
title: "Change background",
65+
message: "Change the background to something new.",
66+
},
67+
{
68+
title: "Generate sonnet",
69+
message: "Write a short sonnet about AI.",
70+
},
71+
]}
5872
/>
5973
</div>
6074
</div>

0 commit comments

Comments
 (0)