Skip to content

Commit b002664

Browse files
dazy-dsdazy-ds
authored
feat: open props and aria-labels (#579)
1 parent cd4f91c commit b002664

18 files changed

+229
-265
lines changed

‎packages/ragbits-chat/CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
## Unreleased
44

5+
- remove HeroUI Pro components (#557)
6+
- refactor UI components to allow modifications (#579)
57
- Add setup method to ChatInterface (#586)
68

79
## 0.19.1 (2025-05-27)

‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/ExamplePluginComponent-zmswEuH7.js renamed to ‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/ExamplePluginComponent-C3yvRu1j.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import{H as e}from"./index-BLu7Pc1v.js";const i=()=>e.jsxs("div",{children:[e.jsx("h1",{children:"Example Plugin"}),e.jsx("p",{children:"This is an example plugin."})]});export{i as default};
1+
import{H as e}from"./index-CuGsJ9Ra.js";const i=()=>e.jsxs("div",{children:[e.jsx("h1",{children:"Example Plugin"}),e.jsx("p",{children:"This is an example plugin."})]});export{i as default};

‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/FeedbackFormPluginComponent-G-_eNSAc.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/FeedbackFormPluginComponent-QF_CE3JX.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-D23L4yB9.css renamed to ‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-B86z3tbJ.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-BLu7Pc1v.js

Lines changed: 0 additions & 100 deletions
This file was deleted.

‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-CJJ48-Sa.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-CuGsJ9Ra.js

Lines changed: 100 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-wXK8Da8V.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/ragbits-chat/src/ragbits/chat/ui-build/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<link rel="icon" type="image/svg+xml" href="/assets/ragbits-9U4hpuUb.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Ragbits</title>
8-
<script type="module" crossorigin src="/assets/index-BLu7Pc1v.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-D23L4yB9.css">
8+
<script type="module" crossorigin src="/assets/index-CuGsJ9Ra.js"></script>
9+
<link rel="stylesheet" crossorigin href="/assets/index-B86z3tbJ.css">
1010
</head>
1111

1212
<body class="h-full">

‎ui/package-lock.json

Lines changed: 0 additions & 97 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
"format:check": "prettier --check ."
1313
},
1414
"dependencies": {
15-
"@headlessui/react": "^2.2.0",
1615
"@heroicons/react": "^2.2.0",
1716
"@heroui/react": "^2.6.14",
1817
"@hookform/resolvers": "^5.0.1",

‎ui/src/contexts/ThemeContext/ThemeContextProvider.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import React, { useCallback, useMemo, useSyncExternalStore } from "react";
1+
import {
2+
FC,
3+
ReactNode,
4+
useCallback,
5+
useMemo,
6+
useSyncExternalStore,
7+
} from "react";
28
import { ThemeContext, Theme } from "./ThemeContext";
39

410
function getPreferredTheme() {
@@ -20,7 +26,7 @@ function subscribe(callback: () => void) {
2026
return () => window.removeEventListener("storage", callback);
2127
}
2228

23-
export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
29+
export const ThemeContextProvider: FC<{ children: ReactNode }> = ({
2430
children,
2531
}) => {
2632
const themeValue = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);

‎ui/src/core/components/ChatMessage.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ import { useThemeContext } from "../../contexts/ThemeContext/useThemeContext.ts"
1010
import { Theme } from "../../contexts/ThemeContext/ThemeContext.ts";
1111

1212
export type ChatMessageProps = {
13-
classNames?: string[];
13+
classNames?: {
14+
wrapper?: string;
15+
innerWrapper?: string;
16+
content?: string;
17+
};
1418
chatMessage: ChatMessage;
1519
onOpenFeedbackForm?: (id: string, name: FormType) => void;
1620
likeForm: ConfigResponse[FormType.LIKE];
@@ -53,7 +57,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
5357
className={cn(
5458
"flex gap-3",
5559
{ "flex-row-reverse": rightAlign },
56-
...(classNames ? classNames : []),
60+
classNames?.wrapper,
5761
)}
5862
>
5963
<div
@@ -69,13 +73,15 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
6973
className={cn(
7074
"relative rounded-medium px-4 py-3 text-default",
7175
rightAlign && "bg-default-100",
76+
classNames?.innerWrapper,
7277
)}
7378
>
7479
{rightAlign ? (
7580
<div
7681
className={cn(
7782
"prose whitespace-pre-line",
7883
theme === Theme.DARK && "dark:prose-invert",
84+
classNames?.content,
7985
)}
8086
>
8187
{content}
@@ -86,6 +92,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
8692
className={cn(
8793
"markdown-container prose max-w-full",
8894
theme === Theme.DARK && "dark:prose-invert",
95+
classNames?.content,
8996
)}
9097
remarkPlugins={[remarkGfm]}
9198
>
@@ -129,7 +136,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
129136
isIconOnly
130137
variant="ghost"
131138
className="p-0"
132-
aria-label="Like message"
139+
aria-label="Rate message as helpful"
133140
onPress={() =>
134141
onOpenFeedbackForm(serverId || "", FormType.LIKE)
135142
}
@@ -144,7 +151,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
144151
isIconOnly
145152
variant="ghost"
146153
className="p-0"
147-
aria-label="Dislike message"
154+
aria-label="Rate message as unhelpful"
148155
onPress={() =>
149156
onOpenFeedbackForm(
150157
serverId || "",

‎ui/src/core/components/Layout.tsx

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
1-
import React from "react";
21
import { Button, cn } from "@heroui/react";
32
import { Icon } from "@iconify/react";
43
import { useHistoryContext } from "../../contexts/HistoryContext/useHistoryContext";
54
import { useThemeContext } from "../../contexts/ThemeContext/useThemeContext";
65
import { Theme } from "../../contexts/ThemeContext/ThemeContext";
76
import DelayedTooltip from "./DelayedTooltip";
7+
import { ReactNode } from "react";
8+
9+
interface LayoutProps {
10+
children: ReactNode;
11+
title: string;
12+
subTitle?: string;
13+
classNames?: {
14+
header?: string;
15+
title?: string;
16+
subTitle?: string;
17+
container?: string;
18+
};
19+
}
820

921
export default function Layout({
1022
children,
11-
header,
1223
title,
1324
subTitle,
14-
classNames = {},
15-
}: {
16-
children?: React.ReactNode;
17-
header?: React.ReactNode;
18-
title?: string;
19-
subTitle?: string;
20-
classNames?: Record<string, string>;
21-
}) {
25+
classNames,
26+
}: LayoutProps) {
2227
const { clearHistory, stopAnswering } = useHistoryContext();
2328
const { setTheme, theme } = useThemeContext();
2429

@@ -42,25 +47,32 @@ export default function Layout({
4247
<header
4348
className={cn(
4449
"flex h-16 min-h-16 items-center justify-between gap-2 rounded-none rounded-t-medium border-small border-divider px-4 py-3",
45-
classNames?.["header"],
50+
classNames?.header,
4651
)}
4752
>
48-
{(title || subTitle) && (
49-
<div className="flex w-full items-center gap-2">
50-
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-foreground">
51-
🐰
53+
<div className="flex w-full items-center gap-2">
54+
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-foreground">
55+
🐰
56+
</div>
57+
<div className="w-full min-w-[120px] sm:w-auto">
58+
<div
59+
className={cn(
60+
"truncate text-small font-semibold leading-5 text-foreground",
61+
classNames?.title,
62+
)}
63+
>
64+
{title}
5265
</div>
53-
<div className="w-full min-w-[120px] sm:w-auto">
54-
<div className="truncate text-small font-semibold leading-5 text-foreground">
55-
{title}
56-
</div>
57-
<div className="truncate text-small font-normal leading-5 text-default-500">
58-
{subTitle}
59-
</div>
66+
<div
67+
className={cn(
68+
"truncate text-small font-normal leading-5 text-default-500",
69+
classNames?.subTitle,
70+
)}
71+
>
72+
{subTitle}
6073
</div>
6174
</div>
62-
)}
63-
{header}
75+
</div>
6476
<div className="flex items-center gap-2">
6577
<DelayedTooltip content="Clear chat" placement="bottom">
6678
<Button
@@ -75,7 +87,7 @@ export default function Layout({
7587
<DelayedTooltip content="Change theme" placement="bottom">
7688
<Button
7789
isIconOnly
78-
aria-label="Clear chat"
90+
aria-label={`Change theme to ${theme === Theme.DARK ? "light" : "dark"}`}
7991
variant="ghost"
8092
onPress={toggleTheme}
8193
>
@@ -89,7 +101,12 @@ export default function Layout({
89101
</div>
90102
</header>
91103
<main className="flex h-full overflow-hidden">
92-
<div className="flex h-full w-full flex-col gap-4 rounded-none rounded-b-medium border-0 border-b border-l border-r border-divider py-3">
104+
<div
105+
className={cn(
106+
"flex h-full w-full flex-col gap-4 rounded-none rounded-b-medium border-0 border-b border-l border-r border-divider py-3",
107+
classNames?.container,
108+
)}
109+
>
93110
{children}
94111
</div>
95112
</main>

0 commit comments

Comments
 (0)