Badボタンとフィードバックの充実 (#660)

yuukiok · web-flow · commit 12b8a2a5db27 · 2024-09-24T15:57:57.000+09:00
* feat: feedback form UI

* feat: backend api for feedback form

* fix: lint issue of type any

* fix: use understandable word and use Button component
diff --git a/packages/cdk/lambda/repository.ts b/packages/cdk/lambda/repository.ts
@@ -5,6 +5,7 @@ import {
   ShareId,
   UserIdAndChatId,
   SystemContext,
+  UpdateFeedbackRequest,
 } from 'generative-ai-use-cases-jp';
 import * as crypto from 'crypto';
 import { DynamoDBClient } from '@aws-sdk/client-dynamodb';
@@ -267,21 +268,39 @@ export const setChatTitle = async (
 
 export const updateFeedback = async (
   _chatId: string,
-  createdDate: string,
-  feedback: string
+  feedbackData: UpdateFeedbackRequest
 ): Promise<RecordedMessage> => {
   const chatId = `chat#${_chatId}`;
+  const {createdDate, feedback, reasons, detailedFeedback} = feedbackData;
+  let updateExpression = 'set feedback = :feedback';
+  const expressionAttributeValues: {
+    ':feedback': string;
+    ':reasons'?: string[];
+    ':detailedFeedback'?: string;
+  } = {
+    ':feedback': feedback
+  };
+
+  if (reasons && reasons.length > 0) {
+    updateExpression += ', reasons = :reasons';
+    expressionAttributeValues[':reasons'] = reasons;
+  }
+
+  if (detailedFeedback) {
+    updateExpression += ', detailedFeedback = :detailedFeedback';
+    expressionAttributeValues[':detailedFeedback'] = detailedFeedback;
+  }
+
+  
   const res = await dynamoDbDocument.send(
     new UpdateCommand({
       TableName: TABLE_NAME,
       Key: {
         id: chatId,
         createdDate,
       },
-      UpdateExpression: 'set feedback = :feedback',
-      ExpressionAttributeValues: {
-        ':feedback': feedback,
-      },
+      UpdateExpression: updateExpression,
+      ExpressionAttributeValues: expressionAttributeValues,
       ReturnValues: 'ALL_NEW',
     })
   );
diff --git a/packages/cdk/lambda/updateFeedback.ts b/packages/cdk/lambda/updateFeedback.ts
@@ -9,7 +9,7 @@ export const handler = async (
     const chatId = event.pathParameters!.chatId!;
     const req: UpdateFeedbackRequest = JSON.parse(event.body!);
 
-    const message = await updateFeedback(chatId, req.createdDate, req.feedback);
+    const message = await updateFeedback(chatId, req);
 
     return {
       statusCode: 200,
diff --git a/packages/types/src/protocol.d.ts b/packages/types/src/protocol.d.ts
@@ -61,6 +61,8 @@ export type UpdateSystemContextTitleResponse = {
 export type UpdateFeedbackRequest = {
   createdDate: string;
   feedback: string;
+  reasons?: string[];
+  detailedFeedback?: string;
 };
 
 export type UpdateFeedbackResponse = {
diff --git a/packages/web/src/components/ButtonFeedback.tsx b/packages/web/src/components/ButtonFeedback.tsx
@@ -55,4 +55,4 @@ const ButtonFeedback: React.FC<Props> = (props) => {
   );
 };
 
-export default ButtonFeedback;
+export default ButtonFeedback;
diff --git a/packages/web/src/components/ChatMessage.tsx b/packages/web/src/components/ChatMessage.tsx
@@ -6,12 +6,13 @@ import ButtonFeedback from './ButtonFeedback';
 import ZoomUpImage from './ZoomUpImage';
 import { PiUserFill, PiChalkboardTeacher } from 'react-icons/pi';
 import { BaseProps } from '../@types/common';
-import { ShownMessage } from 'generative-ai-use-cases-jp';
+import { ShownMessage, UpdateFeedbackRequest } from 'generative-ai-use-cases-jp';
 import BedrockIcon from '../assets/bedrock.svg?react';
 import useChat from '../hooks/useChat';
 import useTyping from '../hooks/useTyping';
 import useFileApi from '../hooks/useFileApi';
 import FileCard from './FileCard';
+import FeedbackForm from './FeedbackForm';
 
 type Props = BaseProps & {
   idx?: number;
@@ -28,6 +29,8 @@ const ChatMessage: React.FC<Props> = (props) => {
   const { pathname } = useLocation();
   const { sendFeedback } = useChat(pathname);
   const [isSendingFeedback, setIsSendingFeedback] = useState(false);
+  const [showFeedbackForm, setShowFeedbackForm] = useState(false);
+  const [showThankYouMessage, setShowThankYouMessage] = useState(false);
   const { getFileDownloadSignedUrl } = useFileApi();
 
   const { setTypingTextInput, typingTextOutput } = useTyping(
@@ -61,18 +64,54 @@ const ChatMessage: React.FC<Props> = (props) => {
     return isSendingFeedback || !props.chatContent?.id;
   }, [isSendingFeedback, props]);
 
-  const onSendFeedback = async (feedback: string) => {
+  const onSendFeedback = async (feedbackData: UpdateFeedbackRequest) => {
     if (!disabled) {
       setIsSendingFeedback(true);
-      if (feedback !== chatContent?.feedback) {
-        await sendFeedback(props.chatContent!.createdDate!, feedback);
+      if (feedbackData.feedback !== chatContent?.feedback) {
+        if (feedbackData.feedback !== 'bad') {
+          setShowFeedbackForm(false);
+        }
+        await sendFeedback(feedbackData);
       } else {
-        await sendFeedback(props.chatContent!.createdDate!, 'none');
+        await sendFeedback({
+          createdDate: props.chatContent!.createdDate!, 
+          feedback: 'none'
+        });
+        setShowFeedbackForm(false);
       }
       setIsSendingFeedback(false);
     }
   };
 
+  const handleFeedbackClick = (feedback: string) => {
+    // ボタン押した際、ユーザーからの詳細フィードバック前にDBに送る。
+    onSendFeedback({
+      createdDate: props.chatContent!.createdDate!,
+      feedback: feedback
+    });
+    if (feedback === 'bad' && chatContent?.feedback !== 'bad') {
+      setShowFeedbackForm(true);
+    }
+  };
+
+  const handleFeedbackFormSubmit = async (reasons: string[], detailedFeedback: string) => {
+    await sendFeedback({
+      createdDate: props.chatContent!.createdDate!,
+      feedback: 'bad',
+      reasons: reasons,
+      detailedFeedback: detailedFeedback
+    });  
+    setShowFeedbackForm(false);
+    setShowThankYouMessage(true);
+    setTimeout(() => {
+      setShowThankYouMessage(false);
+    }, 3000);  
+  };
+
+  const handleFeedbackFormCancel = () => {
+    setShowFeedbackForm(false);
+  };
+
   return (
     <div
       className={`flex justify-center ${
@@ -83,7 +122,7 @@ const ChatMessage: React.FC<Props> = (props) => {
       <div
         className={`${
           props.className ?? ''
-        } flex w-full flex-col justify-between p-3 md:w-11/12 lg:w-5/6 xl:w-4/6 2xl:flex-row`}>
+        } flex w-full flex-col justify-between p-3 md:w-11/12 lg:w-5/6 xl:w-4/6`}>
         <div className="flex w-full">
           {chatContent?.role === 'user' && (
             <div className="bg-aws-sky h-min rounded p-2 text-xl text-white">
@@ -199,21 +238,34 @@ const ChatMessage: React.FC<Props> = (props) => {
                       message={chatContent}
                       disabled={disabled}
                       onClick={() => {
-                        onSendFeedback('good');
+                        handleFeedbackClick('good');
                       }}
                     />
                     <ButtonFeedback
                       className="ml-0.5"
                       feedback="bad"
                       message={chatContent}
                       disabled={disabled}
-                      onClick={() => onSendFeedback('bad')}
+                      onClick={() => handleFeedbackClick('bad')}
                     />
                   </>
                 )}
               </>
             )}
         </div>
+        <div>
+          {showFeedbackForm && (
+            <FeedbackForm
+              onSubmit={handleFeedbackFormSubmit}
+              onCancel={handleFeedbackFormCancel}
+            />
+          )}
+          {showThankYouMessage && (
+            <div className="mt-2 p-2 bg-green-100 text-center text-green-700 rounded-md">
+              フィードバックを受け付けました。ありがとうございます。
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/web/src/components/FeedbackForm.tsx b/packages/web/src/components/FeedbackForm.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import Button from './Button';
+
+type Props = {
+  onSubmit: (reasons: string[], feedback: string) => void;
+  onCancel: () => void;
+};
+
+const FeedbackForm: React.FC<Props> = ({ onSubmit, onCancel }) => {
+  const [selectedReasons, setSelectedReasons] = useState<string[]>([]);
+  const [feedback, setFeedback] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  const reasons = ['不正確', '情報が古い', '有害または攻撃的', 'その他'];
+
+  const handleReasonChange = (reason: string) => {
+    setSelectedReasons(prev => 
+      prev.includes(reason) 
+        ? prev.filter(r => r !== reason) 
+        : [...prev, reason]
+    );
+    setError('');
+  };
+
+  const handleSubmit = () => {
+    if (selectedReasons.length === 0) {
+      setError('理由を選択してください。');
+      return;
+    }
+    onSubmit(selectedReasons, feedback);
+  };
+
+  return (
+    <div className="mt-2 bg-white p-4 border rounded-lg shadow-sm">
+      <h3 className="text-base font-medium mb-3">この回答を評価した理由をお聞かせください。</h3>
+      <div className="mb-3 flex flex-wrap gap-2">
+        {reasons.map((reason) => (
+          <button
+            key={reason}
+            onClick={() => handleReasonChange(reason)}
+            className={`px-3 py-1 text-sm rounded-full border ${
+              selectedReasons.includes(reason)
+                ? 'bg-blue-100 border-blue-500 text-blue-700'
+                : 'bg-white border-gray-300 text-gray-700'
+            }`}
+          >
+            {reason}
+          </button>
+        ))}
+      </div>
+      {error && <p className="text-red-500 text-sm mb-2">{error}</p>}
+      <textarea
+        className="w-full p-2 text-sm border rounded-md mb-1"
+        placeholder="他にフィードバックがありましたら、入力してください。(optional)"
+        value={feedback}
+        onChange={(e) => setFeedback(e.target.value)}
+        rows={3}
+      />
+      <div className="flex justify-end gap-2">
+        <Button onClick={onCancel} outlined={true}>キャンセル</Button>
+        <Button onClick={handleSubmit} outlined={false}>送信</Button>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackForm;
diff --git a/packages/web/src/hooks/useChat.ts b/packages/web/src/hooks/useChat.ts
@@ -11,6 +11,7 @@ import {
   UploadedFileType,
   ExtraData,
   Model,
+  UpdateFeedbackRequest,
 } from 'generative-ai-use-cases-jp';
 import { useEffect, useMemo } from 'react';
 import { v4 as uuid } from 'uuid';
@@ -69,11 +70,7 @@ const useChatState = create<{
     sessionId: string | undefined,
     extraData: UploadedFileType[] | undefined
   ) => void;
-  sendFeedback: (
-    id: string,
-    createdDate: string,
-    feedback: string
-  ) => Promise<void>;
+  sendFeedback: (id: string, feedbackData: UpdateFeedbackRequest) => Promise<void>;
   getStopReason: (id: string) => string;
 }>((set, get) => {
   const {
@@ -633,14 +630,11 @@ const useChatState = create<{
     },
 
     continueGeneration: generateMessage,
-    sendFeedback: async (id: string, createdDate: string, feedback: string) => {
+    sendFeedback: async (id: string, feedbackData: UpdateFeedbackRequest) => {
       const chat = get().chats[id].chat;
 
       if (chat) {
-        const { message } = await updateFeedback(chat.chatId, {
-          createdDate,
-          feedback,
-        });
+        const { message } = await updateFeedback(chat.chatId, feedbackData);
         replaceMessages(id, [message]);
       }
     },
@@ -783,8 +777,8 @@ const useChat = (id: string, chatId?: string) => {
         extraData
       );
     },
-    sendFeedback: async (createdDate: string, feedback: string) => {
-      await sendFeedback(id, createdDate, feedback);
+    sendFeedback: async (feedbackData: UpdateFeedbackRequest) => {
+      await sendFeedback(id, feedbackData);    
     },
     getStopReason: () => {
       return getStopReason(id);
