From 3670e452631830dd75ce709c66b95217dda23944 Mon Sep 17 00:00:00 2001 From: blackstar <164309670+raven-book@users.noreply.github.com> Date: Thu, 26 Jun 2025 17:43:02 +0800 Subject: [PATCH 1/5] feat(prompt): cascade size properties to child components --- playground/src/Chat.tsx | 18 +++---- src/prompt.tsx | 115 +++++++++++++++++++++++++++++++--------- 2 files changed, 97 insertions(+), 36 deletions(-) diff --git a/playground/src/Chat.tsx b/playground/src/Chat.tsx index 85d0ab1..1a8d2cb 100644 --- a/playground/src/Chat.tsx +++ b/playground/src/Chat.tsx @@ -1,4 +1,4 @@ -import { MessageSquarePlus, MessageSquareWarning } from "lucide-react"; +import { MessageSquarePlus } from "lucide-react"; import { useState } from "react"; import { BubbleList } from "../../dist/bubble"; import { Button } from "../../dist/button"; @@ -73,21 +73,15 @@ export function Chat() { } /> {messages.length === 0 && ( - - - - - Understanding the Transformer Model - + + + Understanding the Transformer Model Give a detailed analysis of the Transformer model. - - - - Understanding the Attention Mechanism - + + Understanding the Attention Mechanism Explain the attention mechanism in neural networks. diff --git a/src/prompt.tsx b/src/prompt.tsx index 6176b34..e3d2d0e 100644 --- a/src/prompt.tsx +++ b/src/prompt.tsx @@ -3,18 +3,38 @@ import "./tailwind.css"; import { cva, type VariantProps } from "class-variance-authority"; import clsx from "clsx"; import type * as React from "react"; +import { createContext, useContext } from "react"; import { twMerge } from "tailwind-merge"; +const PromptContext = createContext<{ + size?: "default" | "lg" | "md" | "sm" | "xs"; +}>({}); + +const promptsVariants = cva("flex flex-wrap", { + variants: { + size: { + xs: "gap-2", + sm: "gap-3", + default: "gap-4", + md: "gap-4", + lg: "gap-5", + }, + }, + defaultVariants: { + size: "default", + }, +}); + const promptVariants = cva( - "flex flex-col gap-1 justify-center rounded-md border border-gray-300 shadow-sm", + "flex flex-col justify-center bg-white border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-150 cursor-pointer", { variants: { size: { - default: "px-4 py-2", - lg: "px-6 py-4 text-lg", - md: "px-4 py-2 text-base", - sm: "px-2 py-1 text-sm", - xs: "px-1 py-0.5 text-xs", + xs: "px-3 py-2 gap-1", + sm: "px-4 py-2.5 gap-1.5", + default: "px-4 py-3 gap-2", + md: "px-5 py-3.5 gap-2", + lg: "px-6 py-4 gap-2.5", }, }, defaultVariants: { @@ -23,40 +43,83 @@ const promptVariants = cva( }, ); -export function Prompts({ className, ...props }: React.ComponentProps<"div">) { +const promptTitleVariants = cva("font-medium text-gray-900", { + variants: { + size: { + xs: "text-sm", + sm: "text-base", + default: "text-base", + md: "text-lg", + lg: "text-xl", + }, + }, + defaultVariants: { + size: "default", + }, +}); + +const promptDescriptionVariants = cva("text-gray-600", { + variants: { + size: { + xs: "text-xs", + sm: "text-sm", + default: "text-sm", + md: "text-base", + lg: "text-base", + }, + }, + defaultVariants: { + size: "default", + }, +}); + +export function Prompts({ + className, + size, + ...props +}: React.ComponentProps<"div"> & VariantProps) { return ( -
+ +
+ ); } export function Prompt({ className, - size, + size: sizeProp, ...props }: React.ComponentProps<"div"> & VariantProps) { + const { size: contextSize } = useContext(PromptContext); + const size = sizeProp ?? contextSize; + return ( -
+ +
+ ); } export function PromptTitle({ className, + size: sizeProp, ...props -}: React.ComponentProps<"h3">) { +}: React.ComponentProps<"h3"> & VariantProps) { + const { size: contextSize } = useContext(PromptContext); + const size = sizeProp ?? contextSize; + return (

); @@ -64,12 +127,16 @@ export function PromptTitle({ export function PromptDescription({ className, + size: sizeProp, ...props -}: React.ComponentProps<"p">) { +}: React.ComponentProps<"p"> & VariantProps) { + const { size: contextSize } = useContext(PromptContext); + const size = sizeProp ?? contextSize; + return (

); From 03c9ce8d85d8f65fec8f4227ea3843e35b8a9ff5 Mon Sep 17 00:00:00 2001 From: blackstar <164309670+raven-book@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:44:51 +0800 Subject: [PATCH 2/5] feat(prompt): remove createContext --- playground/src/Chat.tsx | 4 +-- src/prompt.tsx | 71 ++++++++++++++++++++++------------------- 2 files changed, 41 insertions(+), 34 deletions(-) diff --git a/playground/src/Chat.tsx b/playground/src/Chat.tsx index 1a8d2cb..67fa6c9 100644 --- a/playground/src/Chat.tsx +++ b/playground/src/Chat.tsx @@ -73,14 +73,14 @@ export function Chat() { } /> {messages.length === 0 && ( - + Understanding the Transformer Model Give a detailed analysis of the Transformer model. - + Understanding the Attention Mechanism Explain the attention mechanism in neural networks. diff --git a/src/prompt.tsx b/src/prompt.tsx index e3d2d0e..c73f4a8 100644 --- a/src/prompt.tsx +++ b/src/prompt.tsx @@ -3,14 +3,9 @@ import "./tailwind.css"; import { cva, type VariantProps } from "class-variance-authority"; import clsx from "clsx"; import type * as React from "react"; -import { createContext, useContext } from "react"; import { twMerge } from "tailwind-merge"; -const PromptContext = createContext<{ - size?: "default" | "lg" | "md" | "sm" | "xs"; -}>({}); - -const promptsVariants = cva("flex flex-wrap", { +const promptsVariants = cva("flex", { variants: { size: { xs: "gap-2", @@ -79,47 +74,50 @@ export function Prompts({ ...props }: React.ComponentProps<"div"> & VariantProps) { return ( - -

- +
); } export function Prompt({ className, - size: sizeProp, + size = "default", ...props }: React.ComponentProps<"div"> & VariantProps) { - const { size: contextSize } = useContext(PromptContext); - const size = sizeProp ?? contextSize; - return ( - -
- +
); } export function PromptTitle({ className, - size: sizeProp, + size, ...props }: React.ComponentProps<"h3"> & VariantProps) { - const { size: contextSize } = useContext(PromptContext); - const size = sizeProp ?? contextSize; + const computedClassName = size + ? twMerge(clsx(promptTitleVariants({ size, className }))) + : twMerge(clsx( + "font-medium text-gray-900", + "[div[data-size='xs']_&]:text-sm", + "[div[data-size='sm']_&]:text-base", + "[div[data-size='default']_&]:text-base", + "[div[data-size='md']_&]:text-lg", + "[div[data-size='lg']_&]:text-xl", + className + )); return (

); @@ -127,16 +125,25 @@ export function PromptTitle({ export function PromptDescription({ className, - size: sizeProp, + size, ...props }: React.ComponentProps<"p"> & VariantProps) { - const { size: contextSize } = useContext(PromptContext); - const size = sizeProp ?? contextSize; + const computedClassName = size + ? twMerge(clsx(promptDescriptionVariants({ size, className }))) + : twMerge(clsx( + "text-gray-600", + "[div[data-size='xs']_&]:text-xs", + "[div[data-size='sm']_&]:text-sm", + "[div[data-size='default']_&]:text-sm", + "[div[data-size='md']_&]:text-base", + "[div[data-size='lg']_&]:text-base", + className + )); return (

); From e331c7035e8a2e9c371c608bfd1458fc1d2a6fa7 Mon Sep 17 00:00:00 2001 From: blackstar <164309670+raven-book@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:49:02 +0800 Subject: [PATCH 3/5] ci: fix test errors --- src/prompt.tsx | 48 ++++++++++++++++++++++---------------------- tests/index.test.tsx | 3 ++- 2 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/prompt.tsx b/src/prompt.tsx index c73f4a8..a24b53f 100644 --- a/src/prompt.tsx +++ b/src/prompt.tsx @@ -102,24 +102,22 @@ export function PromptTitle({ size, ...props }: React.ComponentProps<"h3"> & VariantProps) { - const computedClassName = size + const computedClassName = size ? twMerge(clsx(promptTitleVariants({ size, className }))) - : twMerge(clsx( - "font-medium text-gray-900", - "[div[data-size='xs']_&]:text-sm", - "[div[data-size='sm']_&]:text-base", - "[div[data-size='default']_&]:text-base", - "[div[data-size='md']_&]:text-lg", - "[div[data-size='lg']_&]:text-xl", - className - )); + : twMerge( + clsx( + "font-medium text-gray-900", + "[div[data-size='xs']_&]:text-sm", + "[div[data-size='sm']_&]:text-base", + "[div[data-size='default']_&]:text-base", + "[div[data-size='md']_&]:text-lg", + "[div[data-size='lg']_&]:text-xl", + className, + ), + ); return ( -

+

); } @@ -130,15 +128,17 @@ export function PromptDescription({ }: React.ComponentProps<"p"> & VariantProps) { const computedClassName = size ? twMerge(clsx(promptDescriptionVariants({ size, className }))) - : twMerge(clsx( - "text-gray-600", - "[div[data-size='xs']_&]:text-xs", - "[div[data-size='sm']_&]:text-sm", - "[div[data-size='default']_&]:text-sm", - "[div[data-size='md']_&]:text-base", - "[div[data-size='lg']_&]:text-base", - className - )); + : twMerge( + clsx( + "text-gray-600", + "[div[data-size='xs']_&]:text-xs", + "[div[data-size='sm']_&]:text-sm", + "[div[data-size='default']_&]:text-sm", + "[div[data-size='md']_&]:text-base", + "[div[data-size='lg']_&]:text-base", + className, + ), + ); return (

{ ); expect(titleElement).toBeInTheDocument(); expect(descriptionElement).toBeInTheDocument(); - expect(titleElement).toHaveClass("inline-flex font-semibold"); + expect(titleElement).toHaveClass("font-medium", "text-gray-900"); expect(titleElement.tagName).toBe("H3"); + expect(descriptionElement).toHaveClass("text-gray-600"); }); From 6358f1b2f285dba029d3be700401809c7d09a06c Mon Sep 17 00:00:00 2001 From: blackstar <164309670+raven-book@users.noreply.github.com> Date: Wed, 2 Jul 2025 01:25:51 +0800 Subject: [PATCH 4/5] docs(prompt): add .changes file --- .changes/fix-prompt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changes/fix-prompt.md diff --git a/.changes/fix-prompt.md b/.changes/fix-prompt.md new file mode 100644 index 0000000..1a09dae --- /dev/null +++ b/.changes/fix-prompt.md @@ -0,0 +1,5 @@ +--- +"@matechat/react": patch:fix +--- + +adjust title/description font-size to match the prompt component From 293c2ac62fe4d16e1cb4fe24c1abf3076cc90441 Mon Sep 17 00:00:00 2001 From: fu050409 <46275354+fu050409@users.noreply.github.com> Date: Wed, 2 Jul 2025 03:09:54 +0000 Subject: [PATCH 5/5] release: release new versions --- .changes/pre.json | 1 + CHANGELOG.md | 6 ++++++ package.json | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.changes/pre.json b/.changes/pre.json index d1275a8..30583f9 100644 --- a/.changes/pre.json +++ b/.changes/pre.json @@ -6,6 +6,7 @@ ".changes/bubble-patch.md", ".changes/chore-deps.md", ".changes/file-upload.md", + ".changes/fix-prompt.md", ".changes/fix-sender-lint.md", ".changes/fix-utils-build.md", ".changes/optimize-callback.md", diff --git a/CHANGELOG.md b/CHANGELOG.md index 5726830..380dca3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## \[0.1.0-alpha.6] + +### Bug Fixes + +- [`6358f1b`](https://github.com/DevCloudFE/matechat-react/commit/6358f1b2f285dba029d3be700401809c7d09a06c) adjust title/description font-size to match the prompt component + ## \[0.1.0-alpha.5] ### New Features diff --git a/package.json b/package.json index 9c3a50d..0bc42fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@matechat/react", - "version": "0.1.0-alpha.5", + "version": "0.1.0-alpha.6", "packageManager": "pnpm@10.11.0", "description": "Front-end AI scenario solution UI library based on Huawei DevUI Design.", "type": "module",