fix(workspace): 优化欢迎建议布局并完善输入框提交判断

This commit is contained in:
肖应宇 2026-06-01 17:55:03 +08:00
parent f0f7b8df4d
commit 0fdeb27e06
5 changed files with 116 additions and 25 deletions

View File

@ -17,8 +17,13 @@ export const Suggestions = ({
children,
...props
}: SuggestionsProps) => (
<ScrollArea className="overflow-x-auto whitespace-nowrap" {...props}>
<div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
<ScrollArea className="overflow-x-auto" {...props}>
<div
className={cn(
"flex w-max flex-nowrap items-center gap-2 whitespace-nowrap",
className,
)}
>
{Children.map(children, (child, index) =>
child != null ? (
<span
@ -61,7 +66,7 @@ export const Suggestion = ({
return (
<Button
className={cn(
"cursor-pointer rounded-full px-[20px] py-[15px] text-sm font-normal",
"cursor-pointer w-[216px] rounded-full px-[20px] py-[15px] text-sm font-normal",
"border-none bg-ws-surface-subtle text-ws-text-muted",
"hover:bg-ws-surface-elevated hover:text-ws-base-1",
className,

View File

@ -0,0 +1,39 @@
import assert from "node:assert/strict";
import test from "node:test";
const { canSubmitInputBoxMessage } = await import(
new URL("./input-box-submit.ts", import.meta.url).href
);
void test("rejects empty submits without new or existing attachments", () => {
assert.equal(
canSubmitInputBoxMessage({
text: " ",
attachmentCount: 0,
referenceCount: 0,
}),
false,
);
});
void test("allows empty-text submits when new attachments are present", () => {
assert.equal(
canSubmitInputBoxMessage({
text: " ",
attachmentCount: 1,
referenceCount: 0,
}),
true,
);
});
void test("allows empty-text submits when existing references are present", () => {
assert.equal(
canSubmitInputBoxMessage({
text: " ",
attachmentCount: 0,
referenceCount: 1,
}),
true,
);
});

View File

@ -0,0 +1,15 @@
type CanSubmitInputBoxMessageOptions = {
text: string;
attachmentCount: number;
referenceCount: number;
};
export function canSubmitInputBoxMessage({
text,
attachmentCount,
referenceCount,
}: CanSubmitInputBoxMessageOptions) {
return (
text.trim().length > 0 || attachmentCount > 0 || referenceCount > 0
);
}

View File

@ -100,6 +100,7 @@ import { ScrollArea } from "../ui/scroll-area";
import { ModeHoverGuide } from "./mode-hover-guide";
import { ThreadMemoryPanel } from "./thread-memory-panel";
import { Tooltip } from "./tooltip";
import { canSubmitInputBoxMessage } from "./input-box-submit";
const MAX_REFERENCES_PER_MESSAGE = 10;
@ -511,7 +512,13 @@ export function InputBox({
onStop?.();
return;
}
if (!message.text && references.length === 0) {
if (
!canSubmitInputBoxMessage({
text: message.text,
attachmentCount: message.files?.length ?? 0,
referenceCount: references.length,
})
) {
return;
}
setIsFocused(false);
@ -1227,7 +1234,7 @@ function SuggestionList({
);
return (
<Suggestions
className="w-fit items-start"
className="mx-auto grid w-fit grid-cols-2 justify-center gap-[16px] whitespace-normal md:grid-cols-3"
data-testid="welcome-suggestions"
>
{promptSuggestions.map((suggestion) => (

View File

@ -130,44 +130,69 @@ export const zhCN: Translations = {
prompt:
"为[主题/产品]撰写吸引人的自媒体文案,包括标题、正文和话题标签。",
icon: PenLineIcon,
children: [{ id: "6057", name: "生辰解语" }],
children: [{ id: "6057", name: "八字命理" }],
},
{
suggestion: "张雪峰・升学就业心智",
prompt: "编写[项目/功能]的需求文档,包含功能描述、用户故事和验收标准。",
icon: CompassIcon,
children: [{ id: "6094", name: "张雪峰・升学就业心智" }],
},
{
suggestion: "塔罗牌",
prompt: "编写[产品/功能]的使用指南,包含操作步骤、注意事项和常见问题。",
icon: GraduationCapIcon,
children: [{ id: "6133", name: "塔罗牌" }],
},
{
suggestion: "GPT-Image-2",
prompt: "编写[项目/功能]的需求文档,包含功能描述、用户故事和验收标准。",
icon: CompassIcon,
prompt: "对[Excel文件/数据]进行分析,生成数据洞察和可视化建议。",
icon: MicroscopeIcon,
children: [{ id: "6130", name: "GPT-Image-2" }],
},
{
suggestion: "音乐生成",
prompt: "编写[产品/功能]的使用指南,包含操作步骤、注意事项和常见问题。",
icon: GraduationCapIcon,
children: [{ id: "6133", name: "音乐生成器" }],
prompt: "对[word文件/数据]进行分析",
icon: MicroscopeIcon,
children: [{ id: "6133", name: "音乐生成" }],
},
{
suggestion: "excel填表神器",
prompt: "对[Excel文件/数据]进行分析,生成数据洞察和可视化建议。",
icon: MicroscopeIcon,
children: [{ id: "17", name: "Excel处理" }],
suggestion: "微信公众号攥写",
prompt: "针对[行业/产品]进行市场调研,分析市场规模、竞品和趋势。",
icon: ShapesIcon,
children: [{ id: "6134", name: "微信公众号攥写" }],
},
{
suggestion: "word填表神器",
prompt: "对[word文件/数据]进行分析",
icon: MicroscopeIcon,
children: [{ id: "6195", name: "docx表格填充器" }],
},
{
suggestion: "微信文章撰写",
prompt: "针对[行业/产品]进行市场调研,分析市场规模、竞品和趋势。",
icon: ShapesIcon,
children: [{ id: "6134", name: "微信文章撰写" }],
children: [{ id: "6195", name: "word填表神器" }],
},
{
suggestion: "精美ppt制作",
{
suggestion: "excel填表神器",
prompt: "针对[行业/产品]进行市场调研,分析市场规模、竞品和趋势。",
icon: ShapesIcon,
children: [{ id: "6192", name: "精美ppt制作" }],
children: [{ id: "17", name: "excel填表神器" }],
},
{
suggestion: "精美ppt生成",
prompt: "针对[行业/产品]进行市场调研,分析市场规模、竞品和趋势。",
icon: ShapesIcon,
children: [{ id: "6129 ", name: "精美ppt生成" }],
},
{
suggestion: "论文撰写",
prompt: "针对[行业/产品]进行市场调研,分析市场规模、竞品和趋势。",
icon: ShapesIcon,
children: [{ id: "6250", name: "论文撰写" }],
},
{
suggestion: "专利交底书编写",
prompt: "针对[行业/产品]进行市场调研,分析市场规模、竞品和趋势。",
icon: ShapesIcon,
children: [{ id: "6000", name: "专利交底书编写" }],
},
],
suggestionsCreate: [
{