Skip to content

Commit dffae07

Browse files
matthewlipskimatthewlipski
authored
fix: ShadCN/Ariakit AI menu & translations (#1688)
* Added right section to input and fixed AI UI * Implemented PR feedback * Fixed translations
1 parent 5e325df commit dffae07

File tree

25 files changed

+720
-503
lines changed

25 files changed

+720
-503
lines changed

‎packages/ariakit/src/input/TextInput.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const TextInput = forwardRef<
2525
onChange,
2626
onSubmit,
2727
autoComplete,
28-
rightSection, // TODO: add rightSection
28+
rightSection,
2929
...rest
3030
} = props;
3131

@@ -40,7 +40,7 @@ export const TextInput = forwardRef<
4040
className={mergeCSSClasses(
4141
"bn-ak-input",
4242
className || "",
43-
variant === "large" ? "bn-ak-input-large" : ""
43+
variant === "large" ? "bn-ak-input-large" : "",
4444
)}
4545
ref={ref}
4646
name={name}
@@ -53,6 +53,7 @@ export const TextInput = forwardRef<
5353
onSubmit={onSubmit}
5454
autoComplete={autoComplete}
5555
/>
56+
{rightSection}
5657
</div>
5758
</>
5859
);

‎packages/ariakit/src/style.css‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
gap: 0.5rem;
1212
}
1313

14+
.bn-ak-input-wrapper svg {
15+
width: 24px;
16+
}
17+
1418
.bn-ak-toolbar {
1519
height: fit-content;
1620
overflow: scroll;
@@ -68,9 +72,11 @@
6872
overflow: visible;
6973
}
7074

71-
.bn-ariakit .bn-suggestion-menu {
75+
.bn-ariakit .bn-suggestion-menu,
76+
.bn-ariakit .ai-suggestion-menu {
7277
height: fit-content;
7378
max-height: inherit;
79+
overflow: auto;
7480
}
7581

7682
.bn-ariakit .bn-color-picker-dropdown {
@@ -120,6 +126,24 @@
120126
padding-inline: 4px;
121127
}
122128

129+
@keyframes spin {
130+
0% {
131+
transform: rotate(0deg);
132+
}
133+
100% {
134+
transform: rotate(360deg);
135+
}
136+
}
137+
138+
.bn-ariakit .bn-suggestion-menu-loader {
139+
align-items: center;
140+
animation: spin 1s linear infinite;
141+
display: flex;
142+
height: 16px;
143+
justify-content: center;
144+
width: 16px;
145+
}
146+
123147
.bn-ariakit .bn-grid-suggestion-menu {
124148
background: var(--bn-colors-menu-background);
125149
border-radius: var(--bn-border-radius-large);
@@ -326,6 +350,48 @@
326350
padding: 0;
327351
}
328352

353+
.bn-ariakit .bn-combobox .bn-ak-input-wrapper {
354+
display: flex;
355+
border-radius: 0.5rem;
356+
border-width: 1px;
357+
border-style: solid;
358+
border-color: hsl(204 20% 88%);
359+
background-color: hsl(204 20% 100%);
360+
padding: 0.5rem;
361+
color: hsl(204 4% 0%);
362+
box-shadow:
363+
0 10px 15px -3px rgb(0 0 0 / 0.1),
364+
0 4px 6px -4px rgb(0 0 0 / 0.1);
365+
}
366+
367+
.bn-ariakit .bn-combobox .bn-ak-input-wrapper:where(.dark, .dark *) {
368+
border-color: hsl(204 4% 24%);
369+
background-color: hsl(204 4% 16%);
370+
color: hsl(204 20% 100%);
371+
box-shadow:
372+
0 10px 15px -3px rgb(0 0 0 / 0.25),
373+
0 4px 6px -4px rgb(0 0 0 / 0.1);
374+
}
375+
376+
.bn-ariakit .bn-combobox .bn-ak-input {
377+
background: transparent;
378+
border: none;
379+
box-shadow: none;
380+
outline: none;
381+
}
382+
383+
.bn-ariakit .bn-combobox .bn-combobox-icon,
384+
.bn-ariakit .bn-combobox .bn-combobox-right-section {
385+
align-items: start;
386+
display: flex;
387+
justify-content: center;
388+
width: 24px;
389+
}
390+
391+
.bn-ariakit .bn-combobox .bn-combobox-error {
392+
color: var(--bn-colors-highlights-red-background);
393+
}
394+
329395
.bn-ariakit .bn-comment-actions-wrapper {
330396
align-items: start;
331397
display: flex;

‎packages/ariakit/src/suggestionMenu/SuggestionMenuLoader.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,22 @@ export const SuggestionMenuLoader = forwardRef<
66
HTMLDivElement,
77
ComponentProps["SuggestionMenu"]["Loader"]
88
>((props, ref) => {
9-
const { className, children, ...rest } = props;
9+
const { className, ...rest } = props;
1010

1111
assertEmpty(rest);
1212

1313
return (
1414
<div className={className} ref={ref}>
15-
{children}
15+
{/* Taken from Google Material Icons */}
16+
{/* https://fonts.google.com/icons?selected=Material+Symbols+Rounded:progress_activity:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=load&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols&icon.style=Rounded&icon.platform=web */}
17+
<svg
18+
xmlns="http://www.w3.org/2000/svg"
19+
height="1em"
20+
viewBox="0 -960 960 960"
21+
width="1em"
22+
fill="#e8eaed">
23+
<path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z" />
24+
</svg>
1625
</div>
1726
);
1827
});

‎packages/mantine/src/style.css‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -351,12 +351,15 @@
351351
padding: 8px;
352352
}
353353

354-
.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-section[data-position="left"] {
354+
.bn-suggestion-menu-item-small
355+
.bn-mt-suggestion-menu-item-section[data-position="left"] {
355356
background-color: transparent;
356357
padding: 0;
357358
}
358359

359-
.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-section[data-position="left"] svg {
360+
.bn-suggestion-menu-item-small
361+
.bn-mt-suggestion-menu-item-section[data-position="left"]
362+
svg {
360363
height: 14px;
361364
width: 14px;
362365
}
@@ -763,6 +766,30 @@
763766
justify-content: center;
764767
}
765768

769+
/* Combobox styling */
770+
.bn-mantine .bn-combobox-input,
771+
.bn-mantine .bn-combobox-items:not(:empty) {
772+
background-color: var(--bn-colors-menu-background);
773+
border: var(--bn-border);
774+
border-radius: var(--bn-border-radius-medium);
775+
box-shadow: var(--bn-shadow-medium);
776+
color: var(--bn-colors-menu-text);
777+
gap: 4px;
778+
min-width: 145px;
779+
padding: 2px;
780+
}
781+
782+
.bn-mantine .bn-combobox-input .bn-combobox-icon,
783+
.bn-mantine .bn-combobox-input .bn-combobox-right-section {
784+
align-items: center;
785+
display: flex;
786+
justify-content: center;
787+
}
788+
789+
.bn-mantine .bn-combobox-input .bn-combobox-error {
790+
color: var(--bn-colors-highlights-red-background);
791+
}
792+
766793
/* We need to get rid of the checked icon - you can set the icon prop to an
767794
empty element (<></>), but even so Mantine leaves extra space for the icon, so
768795
we just don't display it in CSS instead. */

‎packages/mantine/src/suggestionMenu/SuggestionMenuLoader.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ export const SuggestionMenuLoader = forwardRef<
88
HTMLDivElement,
99
ComponentProps["SuggestionMenu"]["Loader"]
1010
>((props, ref) => {
11-
const {
12-
className,
13-
children, // unused, using "dots" instead
14-
...rest
15-
} = props;
11+
const { className, ...rest } = props;
1612

1713
assertEmpty(rest);
1814

19-
return <MantineLoader className={className} type="dots" ref={ref} />;
15+
return (
16+
<MantineLoader className={className} type="dots" size={16} ref={ref} />
17+
);
2018
});

‎packages/react/src/editor/ComponentsContext.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,6 @@ export type ComponentProps = {
150150
};
151151
Loader: {
152152
className?: string;
153-
children?: ReactNode;
154153
};
155154
};
156155
GridSuggestionMenu: {

‎packages/shadcn/src/form/TextInput.tsx‎

Lines changed: 28 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ComponentProps } from "@blocknote/react";
33
import { forwardRef } from "react";
44

55
import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
6+
import { cn } from "../lib/utils.js";
67

78
export const TextInput = forwardRef<
89
HTMLInputElement,
@@ -30,41 +31,34 @@ export const TextInput = forwardRef<
3031

3132
const ShadCNComponents = useShadCNComponentsContext()!;
3233

33-
if (!label) {
34-
return (
35-
<ShadCNComponents.Input.Input
36-
aria-label={name}
37-
name={name}
38-
autoFocus={autoFocus}
39-
placeholder={placeholder}
40-
disabled={disabled}
41-
value={value}
42-
onKeyDown={onKeyDown}
43-
onChange={onChange}
44-
onSubmit={onSubmit}
45-
autoComplete={autoComplete}
46-
ref={ref}
47-
/>
48-
);
49-
}
50-
5134
return (
52-
<div>
53-
<ShadCNComponents.Label.Label htmlFor={label}>
54-
{label}
55-
</ShadCNComponents.Label.Label>
56-
<ShadCNComponents.Input.Input
57-
className={className}
58-
id={label}
59-
name={name}
60-
autoFocus={autoFocus}
61-
placeholder={placeholder}
62-
disabled={disabled}
63-
value={value}
64-
onKeyDown={onKeyDown}
65-
onChange={onChange}
66-
onSubmit={onSubmit}
67-
/>
35+
<div
36+
className={cn(
37+
className,
38+
"bn-flex bn-h-10 bn-w-full bn-rounded-md bn-border bn-border-input bn-bg-background bn-px-3 bn-py-2 bn-text-sm bn-ring-offset-background file:bn-border-0 file:bn-bg-transparent file:bn-text-sm file:bn-font-medium placeholder:bn-text-muted-foreground focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-cursor-not-allowed disabled:bn-opacity-50",
39+
"bn-items-center bn-gap-2 bn-text-foreground",
40+
)}>
41+
{icon}
42+
<div className="bn-flex-1">
43+
{label && (
44+
<ShadCNComponents.Label.Label htmlFor={label}>
45+
{label}
46+
</ShadCNComponents.Label.Label>
47+
)}
48+
<ShadCNComponents.Input.Input
49+
className={cn(className, "bn-border-none bn-p-0 bn-h-auto")}
50+
id={label}
51+
name={name}
52+
autoFocus={autoFocus}
53+
placeholder={placeholder}
54+
disabled={disabled}
55+
value={value}
56+
onKeyDown={onKeyDown}
57+
onChange={onChange}
58+
onSubmit={onSubmit}
59+
/>
60+
</div>
61+
{rightSection}
6862
</div>
6963
);
7064
});

‎packages/shadcn/src/style.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,3 +189,8 @@
189189
font-size: 14px;
190190
font-style: italic;
191191
}
192+
193+
.bn-shadcn .bn-combobox-error {
194+
color: var(--bn-colors-highlights-red-background);
195+
font-weight: bold;
196+
}

‎packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,28 @@ import { assertEmpty } from "@blocknote/core";
22
import { ComponentProps } from "@blocknote/react";
33
import { forwardRef } from "react";
44

5+
import { cn } from "../lib/utils.js";
6+
57
export const SuggestionMenuLoader = forwardRef<
68
HTMLDivElement,
79
ComponentProps["SuggestionMenu"]["Loader"]
810
>((props, ref) => {
9-
const { className, children, ...rest } = props;
11+
const { className, ...rest } = props;
1012

1113
assertEmpty(rest);
1214

1315
return (
14-
<div className={className} ref={ref}>
15-
{children}
16+
<div className={cn(className, "bn-animate-spin")} ref={ref}>
17+
{/* Taken from Google Material Icons */}
18+
{/* https://fonts.google.com/icons?selected=Material+Symbols+Rounded:progress_activity:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=load&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols&icon.style=Rounded&icon.platform=web */}
19+
<svg
20+
xmlns="http://www.w3.org/2000/svg"
21+
height="1em"
22+
viewBox="0 -960 960 960"
23+
width="1em"
24+
fill="#e8eaed">
25+
<path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z" />
26+
</svg>
1627
</div>
1728
);
1829
});

‎packages/xl-ai-server/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Configure your environment variables according to `.env.example`.
1717
## Running (dev mode):
1818

1919
mkcert localhost
20-
npm run dev
20+
pnpm run dev
2121

2222
## Client Usage
2323

0 commit comments

Comments
 (0)