mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-03 21:03:08 +00:00
refactor: streamline AI enhancement logic in feature dialogs
- Simplified the handling of enhanced text in AddFeatureDialog and EditFeatureDialog by storing the enhanced text in a variable before updating the state. - Updated the dropdown menu and button components to ensure consistent styling and behavior across both dialogs. - Enhanced user experience by ensuring the cursor style indicates interactivity in the dropdown menus. This refactor improves code readability and maintains a consistent UI experience.
This commit is contained in:
@@ -165,7 +165,8 @@ export function AddFeatureDialog({
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (result?.success && result.enhancedText) {
|
if (result?.success && result.enhancedText) {
|
||||||
setNewFeature(prev => ({ ...prev, description: result.enhancedText! }));
|
const enhancedText = result.enhancedText;
|
||||||
|
setNewFeature(prev => ({ ...prev, description: enhancedText }));
|
||||||
toast.success("Description enhanced!");
|
toast.success("Description enhanced!");
|
||||||
} else {
|
} else {
|
||||||
toast.error(result?.error || "Failed to enhance description");
|
toast.error(result?.error || "Failed to enhance description");
|
||||||
@@ -242,7 +243,7 @@ export function AddFeatureDialog({
|
|||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
{/* Prompt Tab */}
|
{/* Prompt Tab */}
|
||||||
<TabsContent value="prompt" className="space-y-4 overflow-y-auto">
|
<TabsContent value="prompt" className="space-y-4 overflow-y-auto cursor-default">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="description">Description</Label>
|
<Label htmlFor="description">Description</Label>
|
||||||
<DescriptionImageDropZone
|
<DescriptionImageDropZone
|
||||||
@@ -263,45 +264,45 @@ export function AddFeatureDialog({
|
|||||||
autoFocus
|
autoFocus
|
||||||
error={descriptionError}
|
error={descriptionError}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center gap-3 mt-2">
|
</div>
|
||||||
<DropdownMenu>
|
<div className="flex w-fit items-center gap-3 select-none cursor-default">
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenu>
|
||||||
<Button variant="outline" size="sm" className="w-[180px] justify-between">
|
<DropdownMenuTrigger asChild>
|
||||||
{enhancementMode === 'improve' && 'Improve Clarity'}
|
<Button variant="outline" size="sm" className="w-[180px] justify-between">
|
||||||
{enhancementMode === 'technical' && 'Add Technical Details'}
|
{enhancementMode === 'improve' && 'Improve Clarity'}
|
||||||
{enhancementMode === 'simplify' && 'Simplify'}
|
{enhancementMode === 'technical' && 'Add Technical Details'}
|
||||||
{enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
|
{enhancementMode === 'simplify' && 'Simplify'}
|
||||||
<ChevronDown className="w-4 h-4 ml-2" />
|
{enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
|
||||||
</Button>
|
<ChevronDown className="w-4 h-4 ml-2" />
|
||||||
</DropdownMenuTrigger>
|
</Button>
|
||||||
<DropdownMenuContent align="start">
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
|
<DropdownMenuContent align="start">
|
||||||
Improve Clarity
|
<DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
|
||||||
</DropdownMenuItem>
|
Improve Clarity
|
||||||
<DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
|
</DropdownMenuItem>
|
||||||
Add Technical Details
|
<DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
|
||||||
</DropdownMenuItem>
|
Add Technical Details
|
||||||
<DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
|
</DropdownMenuItem>
|
||||||
Simplify
|
<DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
|
||||||
</DropdownMenuItem>
|
Simplify
|
||||||
<DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
|
</DropdownMenuItem>
|
||||||
Add Acceptance Criteria
|
<DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
|
||||||
</DropdownMenuItem>
|
Add Acceptance Criteria
|
||||||
</DropdownMenuContent>
|
</DropdownMenuItem>
|
||||||
</DropdownMenu>
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={handleEnhanceDescription}
|
onClick={handleEnhanceDescription}
|
||||||
disabled={!newFeature.description.trim() || isEnhancing}
|
disabled={!newFeature.description.trim() || isEnhancing}
|
||||||
loading={isEnhancing}
|
loading={isEnhancing}
|
||||||
>
|
>
|
||||||
<Sparkles className="w-4 h-4 mr-2" />
|
<Sparkles className="w-4 h-4 mr-2" />
|
||||||
Enhance with AI
|
Enhance with AI
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="category">Category (optional)</Label>
|
<Label htmlFor="category">Category (optional)</Label>
|
||||||
@@ -318,7 +319,7 @@ export function AddFeatureDialog({
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{/* Model Tab */}
|
{/* Model Tab */}
|
||||||
<TabsContent value="model" className="space-y-4 overflow-y-auto">
|
<TabsContent value="model" className="space-y-4 overflow-y-auto cursor-default">
|
||||||
{/* Show Advanced Options Toggle */}
|
{/* Show Advanced Options Toggle */}
|
||||||
{showProfilesOnly && (
|
{showProfilesOnly && (
|
||||||
<div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
|
<div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
|
||||||
@@ -381,7 +382,7 @@ export function AddFeatureDialog({
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{/* Testing Tab */}
|
{/* Testing Tab */}
|
||||||
<TabsContent value="testing" className="space-y-4 overflow-y-auto">
|
<TabsContent value="testing" className="space-y-4 overflow-y-auto cursor-default">
|
||||||
<TestingTabContent
|
<TestingTabContent
|
||||||
skipTests={newFeature.skipTests}
|
skipTests={newFeature.skipTests}
|
||||||
onSkipTestsChange={(skipTests) =>
|
onSkipTestsChange={(skipTests) =>
|
||||||
|
|||||||
@@ -154,7 +154,8 @@ export function EditFeatureDialog({
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (result?.success && result.enhancedText) {
|
if (result?.success && result.enhancedText) {
|
||||||
setEditingFeature(prev => prev ? { ...prev, description: result.enhancedText! } : prev);
|
const enhancedText = result.enhancedText;
|
||||||
|
setEditingFeature(prev => prev ? { ...prev, description: enhancedText } : prev);
|
||||||
toast.success("Description enhanced!");
|
toast.success("Description enhanced!");
|
||||||
} else {
|
} else {
|
||||||
toast.error(result?.error || "Failed to enhance description");
|
toast.error(result?.error || "Failed to enhance description");
|
||||||
@@ -215,7 +216,7 @@ export function EditFeatureDialog({
|
|||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
{/* Prompt Tab */}
|
{/* Prompt Tab */}
|
||||||
<TabsContent value="prompt" className="space-y-4 overflow-y-auto">
|
<TabsContent value="prompt" className="space-y-4 overflow-y-auto cursor-default">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="edit-description">Description</Label>
|
<Label htmlFor="edit-description">Description</Label>
|
||||||
<DescriptionImageDropZone
|
<DescriptionImageDropZone
|
||||||
@@ -238,45 +239,45 @@ export function EditFeatureDialog({
|
|||||||
onPreviewMapChange={setEditFeaturePreviewMap}
|
onPreviewMapChange={setEditFeaturePreviewMap}
|
||||||
data-testid="edit-feature-description"
|
data-testid="edit-feature-description"
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center gap-3 mt-2">
|
</div>
|
||||||
<DropdownMenu>
|
<div className="flex w-fit items-center gap-3 select-none cursor-default">
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenu>
|
||||||
<Button variant="outline" size="sm" className="w-[180px] justify-between">
|
<DropdownMenuTrigger asChild>
|
||||||
{enhancementMode === 'improve' && 'Improve Clarity'}
|
<Button variant="outline" size="sm" className="w-[180px] justify-between">
|
||||||
{enhancementMode === 'technical' && 'Add Technical Details'}
|
{enhancementMode === 'improve' && 'Improve Clarity'}
|
||||||
{enhancementMode === 'simplify' && 'Simplify'}
|
{enhancementMode === 'technical' && 'Add Technical Details'}
|
||||||
{enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
|
{enhancementMode === 'simplify' && 'Simplify'}
|
||||||
<ChevronDown className="w-4 h-4 ml-2" />
|
{enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
|
||||||
</Button>
|
<ChevronDown className="w-4 h-4 ml-2" />
|
||||||
</DropdownMenuTrigger>
|
</Button>
|
||||||
<DropdownMenuContent align="start">
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
|
<DropdownMenuContent align="start">
|
||||||
Improve Clarity
|
<DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
|
||||||
</DropdownMenuItem>
|
Improve Clarity
|
||||||
<DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
|
</DropdownMenuItem>
|
||||||
Add Technical Details
|
<DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
|
||||||
</DropdownMenuItem>
|
Add Technical Details
|
||||||
<DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
|
</DropdownMenuItem>
|
||||||
Simplify
|
<DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
|
||||||
</DropdownMenuItem>
|
Simplify
|
||||||
<DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
|
</DropdownMenuItem>
|
||||||
Add Acceptance Criteria
|
<DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
|
||||||
</DropdownMenuItem>
|
Add Acceptance Criteria
|
||||||
</DropdownMenuContent>
|
</DropdownMenuItem>
|
||||||
</DropdownMenu>
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={handleEnhanceDescription}
|
onClick={handleEnhanceDescription}
|
||||||
disabled={!editingFeature.description.trim() || isEnhancing}
|
disabled={!editingFeature.description.trim() || isEnhancing}
|
||||||
loading={isEnhancing}
|
loading={isEnhancing}
|
||||||
>
|
>
|
||||||
{!isEnhancing && <Sparkles className="w-4 h-4 mr-2" />}
|
<Sparkles className="w-4 h-4 mr-2" />
|
||||||
Enhance with AI
|
Enhance with AI
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="edit-category">Category (optional)</Label>
|
<Label htmlFor="edit-category">Category (optional)</Label>
|
||||||
@@ -296,7 +297,7 @@ export function EditFeatureDialog({
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{/* Model Tab */}
|
{/* Model Tab */}
|
||||||
<TabsContent value="model" className="space-y-4 overflow-y-auto">
|
<TabsContent value="model" className="space-y-4 overflow-y-auto cursor-default">
|
||||||
{/* Show Advanced Options Toggle */}
|
{/* Show Advanced Options Toggle */}
|
||||||
{showProfilesOnly && (
|
{showProfilesOnly && (
|
||||||
<div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
|
<div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
|
||||||
@@ -362,7 +363,7 @@ export function EditFeatureDialog({
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{/* Testing Tab */}
|
{/* Testing Tab */}
|
||||||
<TabsContent value="testing" className="space-y-4 overflow-y-auto">
|
<TabsContent value="testing" className="space-y-4 overflow-y-auto cursor-default">
|
||||||
<TestingTabContent
|
<TestingTabContent
|
||||||
skipTests={editingFeature.skipTests ?? false}
|
skipTests={editingFeature.skipTests ?? false}
|
||||||
onSkipTestsChange={(skipTests) =>
|
onSkipTestsChange={(skipTests) =>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
import { Sparkles } from "lucide-react";
|
import { Sparkles } from "lucide-react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { useAppStore, type AgentModel } from "@/store/app-store";
|
import { useAppStore } from "@/store/app-store";
|
||||||
import { CLAUDE_MODELS } from "@/components/views/board-view/shared/model-constants";
|
import { CLAUDE_MODELS } from "@/components/views/board-view/shared/model-constants";
|
||||||
|
|
||||||
export function AIEnhancementSection() {
|
export function AIEnhancementSection() {
|
||||||
@@ -38,7 +38,7 @@ export function AIEnhancementSection() {
|
|||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={id}
|
key={id}
|
||||||
onClick={() => setEnhancementModel(id as AgentModel)}
|
onClick={() => setEnhancementModel(id)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"group flex flex-col items-start gap-2 px-4 py-4 rounded-xl text-left",
|
"group flex flex-col items-start gap-2 px-4 py-4 rounded-xl text-left",
|
||||||
"transition-all duration-200 ease-out",
|
"transition-all duration-200 ease-out",
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ import {
|
|||||||
isValidEnhancementMode,
|
isValidEnhancementMode,
|
||||||
type EnhancementMode,
|
type EnhancementMode,
|
||||||
} from "../../../lib/enhancement-prompts.js";
|
} from "../../../lib/enhancement-prompts.js";
|
||||||
import { resolveModelString } from "../../../lib/model-resolver.js";
|
import { resolveModelString, CLAUDE_MODEL_MAP } from "../../../lib/model-resolver.js";
|
||||||
|
|
||||||
const logger = createLogger("EnhancePrompt");
|
const logger = createLogger("EnhancePrompt");
|
||||||
|
|
||||||
@@ -68,7 +68,7 @@ async function extractTextFromStream(
|
|||||||
if (msg.type === "assistant" && msg.message?.content) {
|
if (msg.type === "assistant" && msg.message?.content) {
|
||||||
for (const block of msg.message.content) {
|
for (const block of msg.message.content) {
|
||||||
if (block.type === "text" && block.text) {
|
if (block.type === "text" && block.text) {
|
||||||
responseText = block.text;
|
responseText += block.text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (msg.type === "result" && msg.subtype === "success") {
|
} else if (msg.type === "result" && msg.subtype === "success") {
|
||||||
@@ -141,7 +141,7 @@ export function createEnhanceHandler(): (
|
|||||||
const userPrompt = buildUserPrompt(validMode, trimmedText, true);
|
const userPrompt = buildUserPrompt(validMode, trimmedText, true);
|
||||||
|
|
||||||
// Resolve the model - use the passed model, default to sonnet for quality
|
// Resolve the model - use the passed model, default to sonnet for quality
|
||||||
const resolvedModel = resolveModelString(model, "claude-sonnet-4-20250514");
|
const resolvedModel = resolveModelString(model, CLAUDE_MODEL_MAP.sonnet);
|
||||||
|
|
||||||
logger.debug(`Using model: ${resolvedModel}`);
|
logger.debug(`Using model: ${resolvedModel}`);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user