Skip to content

Commit 3167c48

Browse files
jsourcebotjsourcebot
committed
Move skill field guidance into placeholders
Fold the per-field help text into each input's placeholder and drop the redundant description lines. Instructions guidance now covers both task and knowledge skills.
1 parent 7c80007 commit 3167c48

3 files changed

Lines changed: 18 additions & 48 deletions

File tree

‎packages/web/src/ee/features/chat/skills/components/personalSkillEditorPage.tsx‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,16 @@ import {
1212
AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
1313
} from "@/components/ui/alert-dialog";
1414
import { Button } from "@/components/ui/button";
15-
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
15+
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
1616
import { Input } from "@/components/ui/input";
1717
import { Label } from "@/components/ui/label";
1818
import { Switch } from "@/components/ui/switch";
1919
import { Textarea } from "@/components/ui/textarea";
2020
import { createSharedAgentSkill, createPersonalAgentSkill, updateSharedAgentSkill, updatePersonalAgentSkill } from "@/ee/features/chat/skills/actions";
2121
import {
22-
SKILL_COMMAND_HELP,
2322
SKILL_COMMAND_PLACEHOLDER,
24-
SKILL_DESCRIPTION_HELP,
2523
SKILL_DESCRIPTION_PLACEHOLDER,
26-
SKILL_INSTRUCTIONS_HELP,
2724
SKILL_INSTRUCTIONS_PLACEHOLDER,
28-
SKILL_NAME_HELP,
2925
SKILL_NAME_PLACEHOLDER,
3026
} from "@/ee/features/chat/skills/components/skillEditorCopy";
3127
import { SkillInstructionsEditor } from "@/ee/features/chat/skills/components/skillInstructionsEditor";
@@ -327,11 +323,10 @@ function SkillEditor({ skill }: PersonalSkillEditorPageProps) {
327323
control={form.control}
328324
name="instructions"
329325
render={({ field, fieldState }) => {
330-
const instructionsHelpId = "agent-skill-instructions-help";
331326
const instructionsErrorId = "agent-skill-instructions-error";
332327
const instructionsDescriptionIds = fieldState.error
333-
? `${instructionsHelpId} ${instructionsErrorId}`
334-
: instructionsHelpId;
328+
? instructionsErrorId
329+
: undefined;
335330

336331
return (
337332
<FormItem className="flex min-w-0 flex-1 flex-col space-y-0 px-6 py-4">
@@ -346,9 +341,6 @@ function SkillEditor({ skill }: PersonalSkillEditorPageProps) {
346341
: "Markdown"}
347342
</span>
348343
</div>
349-
<p id={instructionsHelpId} className="text-xs text-muted-foreground">
350-
{SKILL_INSTRUCTIONS_HELP}
351-
</p>
352344
<FormMessage id={instructionsErrorId} className="text-xs" />
353345
</div>
354346
<div className="relative min-h-0 flex-1">
@@ -423,9 +415,6 @@ function SkillEditor({ skill }: PersonalSkillEditorPageProps) {
423415
maxLength={80}
424416
/>
425417
</FormControl>
426-
<FormDescription className="text-xs">
427-
{SKILL_NAME_HELP}
428-
</FormDescription>
429418
<FormMessage className="text-xs" />
430419
</FormItem>
431420
)}
@@ -458,9 +447,6 @@ function SkillEditor({ skill }: PersonalSkillEditorPageProps) {
458447
/>
459448
</FormControl>
460449
</div>
461-
<FormDescription className="text-xs">
462-
{SKILL_COMMAND_HELP}
463-
</FormDescription>
464450
<FormMessage className="text-xs" />
465451
</FormItem>
466452
)}
@@ -480,9 +466,6 @@ function SkillEditor({ skill }: PersonalSkillEditorPageProps) {
480466
maxLength={500}
481467
/>
482468
</FormControl>
483-
<FormDescription className="text-xs">
484-
{SKILL_DESCRIPTION_HELP}
485-
</FormDescription>
486469
<FormMessage className="text-xs" />
487470
</FormItem>
488471
)}

‎packages/web/src/ee/features/chat/skills/components/skillEditForm.tsx‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,17 @@ import {
77
import { zodResolver } from "@hookform/resolvers/zod";
88
import { useForm, useWatch } from "react-hook-form";
99
import { Button } from "@/components/ui/button";
10-
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
10+
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
1111
import { Input } from "@/components/ui/input";
1212
import { Label } from "@/components/ui/label";
1313
import { Textarea } from "@/components/ui/textarea";
1414
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
1515
import { MarkdownRenderer } from "@/ee/features/chat/components/chatThread/markdownRenderer";
1616
import {
17-
SKILL_COMMAND_HELP,
1817
SKILL_COMMAND_PLACEHOLDER,
19-
SKILL_DESCRIPTION_HELP,
2018
SKILL_DESCRIPTION_PLACEHOLDER,
21-
SKILL_INSTRUCTIONS_HELP,
2219
SKILL_INSTRUCTIONS_PLACEHOLDER,
2320
SKILL_INSTRUCTIONS_SYNCED_HELP,
24-
SKILL_NAME_HELP,
2521
SKILL_NAME_PLACEHOLDER,
2622
} from "@/ee/features/chat/skills/components/skillEditorCopy";
2723
import { SkillInstructionsEditor } from "@/ee/features/chat/skills/components/skillInstructionsEditor";
@@ -87,9 +83,10 @@ export function SkillEditForm({
8783
const instructionsError = formState.errors.instructions;
8884
const instructionsHelpId = "skill-instructions-help";
8985
const instructionsErrorId = "skill-instructions-error";
90-
const instructionsDescriptionIds = instructionsError
91-
? `${instructionsHelpId} ${instructionsErrorId}`
92-
: instructionsHelpId;
86+
const instructionsDescriptionIds = [
87+
syncedSource ? instructionsHelpId : null,
88+
instructionsError ? instructionsErrorId : null,
89+
].filter(Boolean).join(" ") || undefined;
9390

9491
useEffect(() => {
9592
const onKeyDown = (event: KeyboardEvent) => {
@@ -205,9 +202,6 @@ export function SkillEditForm({
205202
maxLength={80}
206203
/>
207204
</FormControl>
208-
<FormDescription className="text-xs">
209-
{SKILL_NAME_HELP}
210-
</FormDescription>
211205
<FormMessage className="text-xs" />
212206
</FormItem>
213207
)}
@@ -236,9 +230,6 @@ export function SkillEditForm({
236230
/>
237231
</FormControl>
238232
</div>
239-
<FormDescription className="text-xs">
240-
{SKILL_COMMAND_HELP}
241-
</FormDescription>
242233
<FormMessage className="text-xs" />
243234
</FormItem>
244235
)}
@@ -260,9 +251,6 @@ export function SkillEditForm({
260251
maxLength={500}
261252
/>
262253
</FormControl>
263-
<FormDescription className="text-xs">
264-
{SKILL_DESCRIPTION_HELP}
265-
</FormDescription>
266254
<FormMessage className="text-xs" />
267255
</FormItem>
268256
)}
@@ -305,9 +293,11 @@ export function SkillEditForm({
305293
markdown · {(instructions ?? "").length.toLocaleString()} / {INSTRUCTIONS_MAX_LENGTH.toLocaleString()}
306294
</span>
307295
</div>
308-
<p id={instructionsHelpId} className="text-xs text-muted-foreground">
309-
{syncedSource ? SKILL_INSTRUCTIONS_SYNCED_HELP : SKILL_INSTRUCTIONS_HELP}
310-
</p>
296+
{syncedSource && (
297+
<p id={instructionsHelpId} className="text-xs text-muted-foreground">
298+
{SKILL_INSTRUCTIONS_SYNCED_HELP}
299+
</p>
300+
)}
311301
{instructionsError?.message && (
312302
<p id={instructionsErrorId} className="text-xs font-medium text-destructive">
313303
{instructionsError.message}

‎packages/web/src/ee/features/chat/skills/components/skillEditorCopy.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
export const SKILL_NAME_PLACEHOLDER = "Skill name";
2-
export const SKILL_NAME_HELP = "Give the skill a clear name so people can recognize it in lists and menus.";
32

4-
export const SKILL_COMMAND_PLACEHOLDER = "Command name";
5-
export const SKILL_COMMAND_HELP = "Choose the slash command people type to run this skill. Lowercase letters, numbers, and hyphens work best.";
3+
export const SKILL_COMMAND_PLACEHOLDER = "command-name";
64

7-
export const SKILL_DESCRIPTION_PLACEHOLDER = "When to use this skill";
8-
export const SKILL_DESCRIPTION_HELP = "Summarize the situation this skill handles and the result users should expect.";
5+
export const SKILL_DESCRIPTION_PLACEHOLDER = "When Ask Sourcebot should reach for this skill. This is what it reads to decide whether to apply the skill, so describe the tasks or questions it fits.";
96

10-
export const SKILL_INSTRUCTIONS_HELP = "Tell Ask Sourcebot how to perform the skill, including what context to inspect and how to format the answer.";
117
export const SKILL_INSTRUCTIONS_SYNCED_HELP = "This skill is synced from a repository file. Local edits are kept until you update the skill from its source, which replaces them with the file's content.";
12-
export const SKILL_INSTRUCTIONS_PLACEHOLDER = `Describe the workflow Ask Sourcebot should follow when this skill runs.
8+
export const SKILL_INSTRUCTIONS_PLACEHOLDER = `What Ask Sourcebot should do or know when this skill applies.
139
14-
Include the context to gather, the files or symbols to inspect, and the shape of the final answer.`;
10+
For a task: the steps to follow, files or symbols to inspect, and the shape of the answer.
11+
For knowledge: the facts, context, and conventions to apply.`;

0 commit comments

Comments
 (0)