leo-projects/claude-code-cchui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(集成): 集成提示词优化功能到页面

Browse Source 
- 在 layout.tsx 中添加 PromptOptimizerProvider
- 在 AppLayout 和聊天页面添加 PromptOptimizer 浮动按钮
- ChatInput 组件监听并消费优化后的提示词
- 优化结果可自动填入输入框
This commit is contained in:
gaoziman 2025-12-22 00:08:30 +08:00
parent 57bb1ffab7
commit 249362a6eb
4 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/chat/[id]/page.tsx
View File

@ -9,11 +9,13 @@ import { ChatInput } from '@/components/features/ChatInput';
import { MessageBubble } from '@/components/features/MessageBubble'; import { MessageBubble } from '@/components/features/MessageBubble';
import { ChatHeaderInfo } from '@/components/features/ChatHeader'; import { ChatHeaderInfo } from '@/components/features/ChatHeader';
import { SaveToNoteModal } from '@/components/features/SaveToNoteModal'; import { SaveToNoteModal } from '@/components/features/SaveToNoteModal';
import { PromptOptimizer } from '@/components/features/PromptOptimizer';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useConversation, useConversations } from '@/hooks/useConversations'; import { useConversation, useConversations } from '@/hooks/useConversations';
import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat'; import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat';
import { useModels, useTools, useSettings } from '@/hooks/useSettings'; import { useModels, useTools, useSettings } from '@/hooks/useSettings';
import { useAuth } from '@/providers/AuthProvider'; import { useAuth } from '@/providers/AuthProvider';
import { usePromptOptimizer } from '@/providers/PromptOptimizerProvider';
import type { UploadFile } from '@/types/file-upload'; import type { UploadFile } from '@/types/file-upload';
interface PageProps { interface PageProps {
@ -26,6 +28,7 @@ export default function ChatPage({ params }: PageProps) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const initialMessage = searchParams.get('message'); const initialMessage = searchParams.get('message');
const { user } = useAuth(); const { user } = useAuth();
const { setOptimizedPrompt } = usePromptOptimizer();
const [sidebarOpen, setSidebarOpen] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(true);
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
@ -614,6 +617,9 @@ export default function ChatPage({ params }: PageProps) {
initialContent={noteContent} initialContent={noteContent}
conversationId={chatId} conversationId={chatId}
/> />
{/* 提示词优化工具浮动按钮 */}
<PromptOptimizer onUsePrompt={setOptimizedPrompt} />
</div> </div>
); );
} }

7
src/app/layout.tsx
View File

@ -2,6 +2,7 @@ import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import { SettingsProvider } from "@/components/providers/SettingsProvider"; import { SettingsProvider } from "@/components/providers/SettingsProvider";
import { AuthProvider } from "@/providers/AuthProvider"; import { AuthProvider } from "@/providers/AuthProvider";
import { PromptOptimizerProvider } from "@/providers/PromptOptimizerProvider";
import { Toaster } from "@/components/ui/Toast"; import { Toaster } from "@/components/ui/Toast";
export const metadata: Metadata = { export const metadata: Metadata = {
@ -22,8 +23,10 @@ export default function RootLayout({
<body className="antialiased"> <body className="antialiased">
<AuthProvider> <AuthProvider>
<SettingsProvider> <SettingsProvider>
{children} <PromptOptimizerProvider>
<Toaster /> {children}
<Toaster />
</PromptOptimizerProvider>
</SettingsProvider> </SettingsProvider>
</AuthProvider> </AuthProvider>
</body> </body>

14
src/components/features/ChatInput.tsx
View File

@ -1,12 +1,13 @@
'use client'; 'use client';
import { useState, useRef } from 'react'; import { useState, useRef, useEffect } from 'react';
import { Paperclip, ArrowUp, Upload } from 'lucide-react'; import { Paperclip, ArrowUp, Upload } from 'lucide-react';
import { ModelSelector } from './ModelSelector'; import { ModelSelector } from './ModelSelector';
import { ToolsDropdown } from './ToolsDropdown'; import { ToolsDropdown } from './ToolsDropdown';
import { FilePreviewList } from './FilePreviewList'; import { FilePreviewList } from './FilePreviewList';
import { Tooltip } from '@/components/ui/Tooltip'; import { Tooltip } from '@/components/ui/Tooltip';
import { useFileUpload } from '@/hooks/useFileUpload'; import { useFileUpload } from '@/hooks/useFileUpload';
import { usePromptOptimizer } from '@/providers/PromptOptimizerProvider';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import type { Model, Tool } from '@/types'; import type { Model, Tool } from '@/types';
import type { UploadFile } from '@/types/file-upload'; import type { UploadFile } from '@/types/file-upload';
@ -37,6 +38,17 @@ export function ChatInput({
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
// 使用提示词优化 Hook
const { consumeOptimizedPrompt } = usePromptOptimizer();
// 监听优化后的提示词并填入输入框
useEffect(() => {
const prompt = consumeOptimizedPrompt();
if (prompt) {
setMessage(prompt);
}
}, [consumeOptimizedPrompt]);
// 使用文件上传 Hook // 使用文件上传 Hook
const { const {
files, files,

6
src/components/layout/AppLayout.tsx
View File

@ -2,6 +2,8 @@
import { useState, type ReactNode } from 'react'; import { useState, type ReactNode } from 'react';
import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar'; import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar';
import { PromptOptimizer } from '@/components/features/PromptOptimizer';
import { usePromptOptimizer } from '@/providers/PromptOptimizerProvider';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
interface AppLayoutProps { interface AppLayoutProps {
@ -12,6 +14,7 @@ interface AppLayoutProps {
export function AppLayout({ children, showHeader = true, headerContent }: AppLayoutProps) { export function AppLayout({ children, showHeader = true, headerContent }: AppLayoutProps) {
const [sidebarOpen, setSidebarOpen] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(true);
const { setOptimizedPrompt } = usePromptOptimizer();
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen">
@ -41,6 +44,9 @@ export function AppLayout({ children, showHeader = true, headerContent }: AppLay
{children} {children}
</div> </div>
</main> </main>
{/* 提示词优化工具浮动按钮 */}
<PromptOptimizer onUsePrompt={setOptimizedPrompt} />
</div> </div>
); );
} }