Skip to content

Commit 5489736

Browse files
yeonuk-limyeonuk-lim
authored
Merge pull request #55 from aws-samples/refactor/comment-form
refactor: CommentForm 리팩토링 - 댓글 요약 기능 분리
2 parents 23b0e06 + 5bad6f9 commit 5489736

File tree

2 files changed

+150
-79
lines changed

2 files changed

+150
-79
lines changed

‎src/components/CommentForm.tsx‎

Lines changed: 14 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
1+
// src/components/CommentForm.tsx
12
import { useState } from 'react';
23
import {
34
Box,
45
Button,
5-
Container,
66
Form,
77
Modal,
88
SpaceBetween,
99
Textarea,
1010
Header,
1111
} from "@cloudscape-design/components";
1212
import LoadingBar from "@cloudscape-design/chat-components/loading-bar";
13-
import { generateClient } from 'aws-amplify/data';
14-
import { Schema } from '../../amplify/data/resource';
1513
import { NewLineToBr } from './utils/NewLineToBr';
16-
17-
const client = generateClient<Schema>();
14+
import { useCommentSummary } from './utils/commentSummary';
1815

1916
interface CommentFormProps {
2017
classId: string;
@@ -27,8 +24,9 @@ export const CommentForm = ({
2724
}: CommentFormProps) => {
2825
const [post, setPost] = useState('');
2926
const [alertVisible, setAlertVisible] = useState(false);
30-
const [summary, setSummary] = useState('');
31-
const [isGenerating, setIsGenerating] = useState(false);
27+
28+
// Use comment summary hook
29+
const { summary, isGenerating, generateSummarization } = useCommentSummary(classId);
3230

3331
const submitHandler = async (event: any) => {
3432
event.preventDefault();
@@ -40,79 +38,11 @@ export const CommentForm = ({
4038
}
4139
};
4240

43-
const cancelHandler = () => {
44-
setPost("");
45-
}
46-
47-
const askBedrock = async (prompt: string) => {
48-
const response = await client.queries.askBedrock({ prompt: prompt });
49-
const res = JSON.parse(response.data?.body!);
50-
const content = res.content[0].text;
51-
return content || null;
52-
};
53-
54-
const generateSummarization = async () => {
55-
setIsGenerating(true);
56-
console.log("Generating summarization...");
57-
58-
try {
59-
const { data: comments, errors } = await client.models.Comment.list({
60-
filter: { classId: { eq: classId } },
61-
limit: 1000
62-
});
63-
64-
if (errors) {
65-
console.error('Error fetching comments:', errors);
66-
return;
67-
}
68-
69-
if (!comments || comments.length === 0) {
70-
console.log("No comments to summarize");
71-
setSummary("No comments available to summarize.");
72-
return;
73-
}
74-
75-
console.log(`Total comments found: ${comments.length}`);
76-
console.log('All comments:', comments);
77-
78-
const commentsText = comments
79-
.map(comment => comment.content)
80-
.join("\n");
81-
82-
console.log('Full comments text being sent to Bedrock:', commentsText);
83-
console.log('Number of characters in prompt:', commentsText.length);
84-
85-
const prompt = `📊 Summarize the following comments in a structured format:
86-
87-
${commentsText}
88-
89-
Format your response as follows:
90-
91-
📚 Summary:
92-
[Provide a concise summary of the positive and negative sentiment]
93-
94-
⭐️ Number of positive comment :
95-
⭐️ Number of Negative comment :
96-
97-
💫 Key Reason:
98-
[Main reason for the score]`;
99-
100-
const response = await askBedrock(prompt);
101-
console.log("Bedrock response:", response);
102-
setSummary(response);
103-
104-
} catch (error) {
105-
console.error("Error in generateSummarization:", error);
106-
setSummary("An error occurred while generating the summary.");
107-
} finally {
108-
setIsGenerating(false);
109-
}
110-
};
111-
11241
return (
11342
<form onSubmit={submitHandler}>
11443
<Form>
11544
<SpaceBetween size="l">
45+
{/* Summary section */}
11646
<SpaceBetween size="s">
11747
<Box>
11848
<Button
@@ -142,7 +72,9 @@ export const CommentForm = ({
14272

14373
<Box
14474
padding="m"
145-
color={summary && summary !== "Generated summary will appear here." ? "text-body-default" : "text-body-secondary"}
75+
color={summary && summary !== "Generated summary will appear here."
76+
? "text-body-default"
77+
: "text-body-secondary"}
14678
fontSize="body-m"
14779
>
14880
<div
@@ -156,11 +88,14 @@ export const CommentForm = ({
15688
backgroundColor: '#fafbfc'
15789
}}
15890
>
159-
<NewLineToBr>{summary || "Generated summary will appear here."}</NewLineToBr>
91+
<NewLineToBr>
92+
{summary || "Generated summary will appear here."}
93+
</NewLineToBr>
16094
</div>
16195
</Box>
16296
</SpaceBetween>
16397

98+
{/* Comment input section */}
16499
<SpaceBetween size="s">
165100
<Header variant="h4">Add Comment</Header>
166101
<Textarea
@@ -193,4 +128,4 @@ export const CommentForm = ({
193128
</Form>
194129
</form>
195130
);
196-
};
131+
};

‎src/components/utils/commentSummary.ts‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
// src/components/utils/commentSummary.ts
2+
import { useState } from 'react';
3+
import { generateClient } from 'aws-amplify/data';
4+
import { Schema } from '../../../amplify/data/resource';
5+
6+
const client = generateClient<Schema>();
7+
8+
/**
9+
* Creates a prompt template for comment summarization
10+
*/
11+
const createSummaryPrompt = (commentsText: string): string => {
12+
return `📊 Summarize the following comments in a structured format:
13+
14+
${commentsText}
15+
16+
Format your response as follows:
17+
18+
📚 Summary:
19+
[Provide a concise summary of the overall sentiment and main points]
20+
21+
⭐️ Overall Score : [_/5]
22+
23+
💫 Key Reason:
24+
[Main reason for the score]`;
25+
26+
};
27+
28+
/**
29+
* Sends a prompt to Bedrock and receives a response
30+
*/
31+
const askBedrock = async (prompt: string): Promise<string | null> => {
32+
try {
33+
const messages = JSON.stringify([
34+
{
35+
role: "user",
36+
content: [{ text: prompt }]
37+
}
38+
]);
39+
40+
const system = JSON.stringify([
41+
{ text: "You are a helpful AI assistant that summarizes comments." }
42+
]);
43+
44+
const response = await client.queries.askBedrock({
45+
messages: messages,
46+
system: system
47+
});
48+
49+
console.log("Bedrock raw response:", response);
50+
51+
if (!response.data?.body) {
52+
console.error("No body in Bedrock response");
53+
return null;
54+
}
55+
56+
const res = JSON.parse(response.data.body);
57+
console.log("Parsed Bedrock response:", res);
58+
59+
const content = res.output?.message?.content?.[0]?.text || null;
60+
return content;
61+
62+
} catch (error) {
63+
console.error("Error in askBedrock:", error);
64+
throw error;
65+
}
66+
};
67+
68+
/**
69+
* Custom hook that provides comment summarization functionality
70+
*/
71+
export const useCommentSummary = (classId: string) => {
72+
const [summary, setSummary] = useState('');
73+
const [isGenerating, setIsGenerating] = useState(false);
74+
75+
/**
76+
* Generates a summary of comments
77+
*/
78+
const generateSummarization = async () => {
79+
setIsGenerating(true);
80+
console.log("Generating summarization...");
81+
82+
try {
83+
// 1. Fetch comments
84+
const { data: comments, errors } = await client.models.Comment.list({
85+
filter: { classId: { eq: classId } },
86+
limit: 1000
87+
});
88+
89+
if (errors) {
90+
console.error('Error fetching comments:', errors);
91+
setSummary("Failed to fetch comments.");
92+
return;
93+
}
94+
95+
// 2. Check if no comments exist
96+
if (!comments || comments.length === 0) {
97+
console.log("No comments to summarize");
98+
setSummary("No comments available to summarize.");
99+
return;
100+
}
101+
102+
console.log(`Total comments found: ${comments.length}`);
103+
104+
// 3. Combine comment texts
105+
const commentsText = comments
106+
.map(comment => comment.content)
107+
.filter(content => content) // Remove null/undefined
108+
.join("\n");
109+
110+
console.log('Comments text length:', commentsText.length);
111+
112+
// 4. Create prompt and call Bedrock
113+
const prompt = createSummaryPrompt(commentsText);
114+
const response = await askBedrock(prompt);
115+
116+
if (response) {
117+
console.log("Summary generated successfully");
118+
setSummary(response);
119+
} else {
120+
setSummary("Failed to generate summary.");
121+
}
122+
123+
} catch (error) {
124+
console.error("Error in generateSummarization:", error);
125+
setSummary("An error occurred while generating the summary.");
126+
} finally {
127+
setIsGenerating(false);
128+
}
129+
};
130+
131+
return {
132+
summary,
133+
isGenerating,
134+
generateSummarization,
135+
};
136+
};

0 commit comments

Comments
 (0)