From 0be69f5485d35f28629e8ff65b5194a77f9d2217 Mon Sep 17 00:00:00 2001
From: Koji Matsumoto <otomustam.ijok@gmail.com>
Date: Thu, 12 Dec 2024 12:44:32 +0900
Subject: [PATCH] fix reducer

---
 .../components/panel/feedback-block.tsx       | 50 ++++++++++++++++---
 .../p/[agentId]/beta-proto/graph/reducer.ts   |  2 +
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/app/(playground)/p/[agentId]/beta-proto/giselle-node/components/panel/feedback-block.tsx b/app/(playground)/p/[agentId]/beta-proto/giselle-node/components/panel/feedback-block.tsx
index 0b625a47..705d3be4 100644
--- a/app/(playground)/p/[agentId]/beta-proto/giselle-node/components/panel/feedback-block.tsx
+++ b/app/(playground)/p/[agentId]/beta-proto/giselle-node/components/panel/feedback-block.tsx
@@ -18,7 +18,11 @@ export const FeedbackBlock = (props: { traceId: string }) => {
 
 	const submit = (e) => {
 		e.preventDefault();
-		const lf = new Langfuse();
+		const lf = new Langfuse({
+			publicKey: process.env.NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY,
+			secretKey: process.env.NEXT_PUBLIC_LANGFUSE_SECRET_KEY,
+			baseUrl: process.env.NEXT_PUBLIC_LANGFUSE_BASEURL,
+		});
 		lf.score({
 			traceId: props.traceId,
 			name: "user_feedback",
@@ -30,11 +34,12 @@ export const FeedbackBlock = (props: { traceId: string }) => {
 
 	return (
 		<div>
+			<form>
 			<label>
 				<input
 					type="radio"
-					value="5"
-					checked={selectedOption === "5"}
+					value="4"
+					checked={selectedOption === "4"}
 					onChange={(event) => {
 						setSelectedOption(event.target.value);
 					}}
@@ -44,8 +49,30 @@ export const FeedbackBlock = (props: { traceId: string }) => {
 			<label>
 				<input
 					type="radio"
-					value="4"
-					checked={selectedOption === "4"}
+					value="3"
+					checked={selectedOption === "3"}
+					onChange={(event) => {
+						setSelectedOption(event.target.value);
+					}}
+				/>
+				😐️
+			</label>
+			<label>
+				<input
+					type="radio"
+					value="2"
+					checked={selectedOption === "2"}
+					onChange={(event) => {
+						setSelectedOption(event.target.value);
+					}}
+				/>
+				😑
+			</label>
+			<label>
+				<input
+					type="radio"
+					value="1"
+					checked={selectedOption === "1"}
 					onChange={(event) => {
 						setSelectedOption(event.target.value);
 					}}
@@ -55,15 +82,22 @@ export const FeedbackBlock = (props: { traceId: string }) => {
 			<br />
 			<div className="grid gap-[8px] pb-[14px]">
 				<textarea
-					value={feedbackComment}
-					onChange={handleFeedbackCommentChange}
 					className="w-full text-[14px] h-[200px] bg-[hsla(222,21%,40%,0.3)] rounded-[8px] text-white p-[14px] font-rosart outline-none resize-none"
+					value={feedbackComment}
+					onChange={(event) => {
+						setFeedbackComment(event.target.value);
+					}}
 				/>
 			</div>
 			<br />
-			<button type="button" onClick={submit}>
+			<button
+				type="button"
+				className="relative z-10 rounded-[8px] shadow-[0px_0px_3px_0px_#FFFFFF40_inset] py-[4px] px-[8px] bg-black-80 text-black-30 font-rosart text-[14px] disabled:bg-black-40"
+				onClick={submit}
+			>
 				Submit
 			</button>
+			</form>
 		</div>
 	);
 };
diff --git a/app/(playground)/p/[agentId]/beta-proto/graph/reducer.ts b/app/(playground)/p/[agentId]/beta-proto/graph/reducer.ts
index 2eacfb34..3c0ac8e2 100644
--- a/app/(playground)/p/[agentId]/beta-proto/graph/reducer.ts
+++ b/app/(playground)/p/[agentId]/beta-proto/graph/reducer.ts
@@ -132,6 +132,7 @@ export const graphReducer = (
 							node.id === action.payload.node.id
 								? action.payload.node.state
 								: node.state,
+						traceId: action.payload.node.traceId,
 					})),
 				},
 			};
@@ -148,6 +149,7 @@ export const graphReducer = (
 							: {
 									...node,
 									output: action.payload.node.output,
+									traceId: action.payload.node.traceId,
 								},
 					),
 				},