App
"use client";
import React from "react";
import { useHandleStreamResponse } from "../utilities/runtime-helpers";
function MainComponent() {
const [keyword, setKeyword] = useState("");
const [results, setResults] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [isChatOpen, setIsChatOpen] = useState(false);
const [chatInput, setChatInput] = useState("");
const [messages, setMessages] = useState([]);
const [chatLoading, setChatLoading] = useState(false);
const [streamingMessage, setStreamingMessage] = useState("");
const handleStreamResponse = useHandleStreamResponse({
onChunk: setStreamingMessage,
onFinish: (message) => {
setMessages((prev) => [...prev, { role: "assistant", content: message }]);
setStreamingMessage("");
},
});
const handleChatSubmit = async (e) => {
e.preventDefault();
if (!chatInput.trim() || chatLoading) return;
const userMessage = { role: "user", content: chatInput };
setMessages((prev) => [...prev, userMessage]);
setChatInput("");
setChatLoading(true);
try {
const systemMessage = {
role: "system",
content: `You are a helpful keyword research assistant. The user is working with a tool that provides:
${
results
? `
- Search Volume: ${results.searchVolume.estimate}
- Confidence: ${results.searchVolume.confidence}
- Difficulty Score: ${results.keywordDifficulty.score}
- Assessment: ${results.keywordDifficulty.assessment}
For the keyword: "${keyword}"
`
: "No keyword research results available yet."
}
Provide concise, helpful answers about keyword research, SEO, and using the tool.`,
};
const response = await fetch("/integrations/chat-gpt/conversationgpt4", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
messages: [systemMessage, ...messages, userMessage],
stream: true,
}),
});
if (!response.ok) {
throw new Error("Failed to get response");
}
handleStreamResponse(response);
} catch (err) {
console.error("Chat error:", err);
setMessages((prev) => [
...prev,
{
role: "assistant",
content: "Sorry, I encountered an error. Please try again.",
},
]);
} finally {
setChatLoading(false);
}
};
const handleSearch = async (e) => {
if (e) e.preventDefault();
if (!keyword.trim()) {
setError("Please enter a keyword to research");
return;
}
setLoading(true);
setError(null);
try {
const response = await fetch("/api/get-keywords", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ keyword: keyword.trim() }),
});
if (!response.ok) {
throw new Error(
`Network error (${response.status}). Please check your connection and try again.`
);
}
const data = await response.json();
if (data.error) {
throw new Error(data.error);
}
setResults(data);
} catch (err) {
setError(err.message);
console.error("Search error:", err);
} finally {
setLoading(false);
}
};
return (
);
}
export default MainComponent;
{error && (
)}
{loading && (
{[...Array.from({ length: 3 })].map((_, i) => (
))}
)}
{results && !loading && (
))}
)}
{!loading && !results && !error && (
)}
Oops! Something went wrong
{error === "Failed to fetch keyword data" ? "We couldn't connect to our research tools. Please try again." : error}
Researching "{keyword}"...
Keyword Metrics
Search Volume: {results.searchVolume.estimate}
Confidence: {results.searchVolume.confidence}
Difficulty Score: {results.keywordDifficulty.score}
Assessment: {results.keywordDifficulty.assessment}
Google Suggestions
{results.autocompleteSuggestions.map((suggestion, index) => ({suggestion}
Related Keywords
{results.relatedKeywords.map((keyword, index) => (
{keyword}
))}
Common Questions
-
{results.commonQuestions.map((question, index) => (
- {question} ))}
Enter a keyword above to see detailed research results
{!isChatOpen ? (
) : (
)}
Keyword Research Assistant
{messages.map((msg, index) => (
))}
{streamingMessage && (
)}
{msg.content}
{streamingMessage}
Comments
Post a Comment