Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

more refactoring

Browse source
This commit is contained in:
Simon Knott 2025-02-14 13:28:57 +01:00
parent 11cd84fdaa
commit 98a2202956
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 22 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/trace-viewer/src/ui/aiConversation.tsx
View file

@ -17,9 +17,10 @@ import { useCallback, useState } from 'react';
import Markdown from 'react-markdown'; import Markdown from 'react-markdown';
import './aiConversation.css'; import './aiConversation.css';
import { clsx } from '@web/uiUtils'; import { clsx } from '@web/uiUtils';
import type { Conversation, LLMMessage } from './llm'; import { useLLMConversation } from './llm';
export function AIConversation({ history, conversation }: { history: LLMMessage[], conversation: Conversation }) { export function AIConversation({ conversationId }: { conversationId: string }) {
const [history, conversation] = useLLMConversation(conversationId);
const [input, setInput] = useState(''); const [input, setInput] = useState('');
const onSubmit = useCallback(() => { const onSubmit = useCallback(() => {

46
packages/trace-viewer/src/ui/errorsTab.tsx
View file

@ -127,28 +127,43 @@ function Error({ message, error, errorId, sdkLanguage, pageSnapshot, revealInSou
</div>} </div>}
<span style={{ position: 'absolute', right: '5px' }}> <span style={{ position: 'absolute', right: '5px' }}>
{llmAvailable {llmAvailable
? <FixWithAIButton conversationId={errorId} onChange={setShowLLM} value={showLLM} /> ? <FixWithAIButton conversationId={errorId} onChange={setShowLLM} value={showLLM} error={message} diff={diff} pageSnapshot={pageSnapshot} />
: <CopyPromptButton error={message} pageSnapshot={pageSnapshot} diff={diff} />} : <CopyPromptButton error={message} pageSnapshot={pageSnapshot} diff={diff} />}
</span> </span>
</div> </div>
<ErrorMessage error={message} /> <ErrorMessage error={message} />
{showLLM && <AIErrorConversation error={message} pageSnapshot={pageSnapshot} conversationId={errorId} diff={diff} />} {showLLM && <AIConversation conversationId={errorId} />}
</div>; </div>;
} }
function FixWithAIButton({ conversationId, value, onChange }: { conversationId: string, value: boolean, onChange: React.Dispatch<React.SetStateAction<boolean>> }) { function FixWithAIButton({ conversationId, value, onChange, error, diff, pageSnapshot }: { conversationId: string, value: boolean, onChange: React.Dispatch<React.SetStateAction<boolean>>, error: string, diff?: string, pageSnapshot?: string }) {
const chat = useLLMChat(); const chat = useLLMChat();
return <ToolbarButton return <ToolbarButton
onClick={() => { onClick={() => {
if (!chat.getConversation(conversationId)) { if (!chat.getConversation(conversationId)) {
chat.startConversation(conversationId, [ const conversation = chat.startConversation(conversationId, [
`My Playwright test failed. What's going wrong?`, `My Playwright test failed. What's going wrong?`,
`Please give me a suggestion how to fix it, and then explain what went wrong. Be very concise and apply Playwright best practices.`, `Please give me a suggestion how to fix it, and then explain what went wrong. Be very concise and apply Playwright best practices.`,
`Don't include many headings in your output. Make sure what you're saying is correct, and take into account whether there might be a bug in the app.` `Don't include many headings in your output. Make sure what you're saying is correct, and take into account whether there might be a bug in the app.`
].join('\n')); ].join('\n'));
let content = `Here's the error: ${error}`;
let displayContent = `Help me with the error above.`;
if (diff)
content += `\n\nCode diff:\n${diff}`;
if (pageSnapshot)
content += `\n\nPage snapshot:\n${pageSnapshot}`;
if (diff)
displayContent += ` Take the code diff${pageSnapshot ? ' and page snapshot' : ''} into account.`;
else if (pageSnapshot)
displayContent += ` Take the page snapshot into account.`;
conversation.send(content, displayContent);
} }
onChange(v => !v); onChange(v => !v);
@ -180,26 +195,3 @@ export const ErrorsTab: React.FunctionComponent<{
})} })}
</div>; </div>;
}; };
export function AIErrorConversation({ conversationId, error, pageSnapshot, diff }: { conversationId: string, error: string, pageSnapshot?: string, diff?: string }) {
const [history, conversation] = useLLMConversation(conversationId);
React.useEffect(() => {
let content = `Here's the error: ${error}`;
let displayContent = `Help me with the error above.`;
if (diff)
content += `\n\nCode diff:\n${diff}`;
if (pageSnapshot)
content += `\n\nPage snapshot:\n${pageSnapshot}`;
if (diff)
displayContent += ` Take the code diff${pageSnapshot ? ' and page snapshot' : ''} into account.`;
else if (pageSnapshot)
displayContent += ` Take the page snapshot into account.`;
conversation.send(content, displayContent);
}, [conversation]); // eslint-disable-line react-hooks/exhaustive-deps
return <AIConversation history={history} conversation={conversation} />;
}