add feedback block

giselles-ai · Dec 11, 2024 · 725b6aa · 725b6aa
1 parent 53ed3f5
commit 725b6aa
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 4 deletions.
diff --git a/app/(playground)/p/[agentId]/beta-proto/artifact/server-actions.ts b/app/(playground)/p/[agentId]/beta-proto/artifact/server-actions.ts
@@ -117,5 +117,5 @@ ${sourcesToText(sources)}
 		stream.done();
 	})();
 
-	return { object: stream.value };
+	return { object: stream.value, traceId: trace.id };
 }
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
@@ -0,0 +1,69 @@
+import { Langfuse } from "langfuse";
+import {
+	type FC,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+
+export const FeedbackBlock = (props: { traceId: string }) => {
+	const [selectedOption, setSelectedOption] = useState<string>("");
+	const [feedbackComment, setFeedbackComment] = useState<string>("");
+
+	const handleFeedbackCommentChange = (event) => {
+		setFeedbackComment(event.target.value);
+	};
+
+	const submit = (e) => {
+		e.preventDefault();
+		const lf = new Langfuse();
+		lf.score({
+			traceId: props.traceId,
+			name: "user_feedback",
+			value: selectedOption || "",
+			comment: feedbackComment,
+		});
+		setFeedbackComment("");
+	};
+
+	return (
+		<div>
+			<label>
+				<input
+					type="radio"
+					value="5"
+					checked={selectedOption === "5"}
+					onChange={(event) => {
+						setSelectedOption(event.target.value);
+					}}
+				/>
+				😊
+			</label>
+			<label>
+				<input
+					type="radio"
+					value="4"
+					checked={selectedOption === "4"}
+					onChange={(event) => {
+						setSelectedOption(event.target.value);
+					}}
+				/>
+				😢
+			</label>
+			<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"
+				/>
+			</div>
+			<br />
+			<button type="button" onClick={submit}>
+				Submit
+			</button>
+		</div>
+	);
+};
diff --git a/app/(playground)/p/[agentId]/beta-proto/giselle-node/components/panel/text-generator.tsx b/app/(playground)/p/[agentId]/beta-proto/giselle-node/components/panel/text-generator.tsx
@@ -36,6 +36,7 @@ import {
 import { ArchetypeIcon } from "../archetype-icon";
 import { TabTrigger } from "../tabs";
 import { ArtifactBlock } from "./artifact-block";
+import { FeedbackBlock } from "./feedback-block";
 import { MarkdownRender } from "./markdown-render";
 import { TemperatureSlider } from "./temperature-slider";
 import { TopPSlider } from "./top-p-slider";
@@ -395,6 +396,9 @@ export const TextGeneratorPropertyPanel: FC<
 							</div>
 						)}
 						<div>{(node.output as PartialGeneratedObject).description}</div>
+						<div>
+							<FeedbackBlock traceId={node.traceId} />
+						</div>
 					</div>
 				</div>
 			)}

diff --git a/app/(playground)/p/[agentId]/beta-proto/giselle-node/types.ts b/app/(playground)/p/[agentId]/beta-proto/giselle-node/types.ts
@@ -66,6 +66,7 @@ export type GiselleNode = {
 	properties: Record<string, unknown>;
 	output: unknown;
 	isFinal: boolean;
+	traceId: string;
 };
 
 export type GiselleNodeArtifactElement = {

diff --git a/app/(playground)/p/[agentId]/beta-proto/graph/actions.ts b/app/(playground)/p/[agentId]/beta-proto/graph/actions.ts
@@ -334,6 +334,7 @@ type SetTextGenerationNodeOutputAction = {
 		node: {
 			id: GiselleNodeId;
 			output: PartialGeneratedObject;
+			traceId: string;
 		};
 	};
 };
@@ -342,6 +343,7 @@ type SetTextGenerationNodeOutputArgs = {
 	node: {
 		id: GiselleNodeId;
 		output: PartialGeneratedObject;
+		traceId: string;
 	};
 };
 const setTextGenerationNodeOutput = (
@@ -359,13 +361,15 @@ type UpdateNodeStateAction = {
 		node: {
 			id: GiselleNodeId;
 			state: GiselleNodeState;
+			traceId: string;
 		};
 	};
 };
 type UpdateNodeStateArgs = {
 	node: {
 		id: GiselleNodeId;
 		state: GiselleNodeState;
+		traceId: string;
 	};
 };
 export const updateNodeState = (
@@ -439,6 +443,7 @@ export const generateText =
 				node: {
 					id: args.textGeneratorNode.id,
 					state: giselleNodeState.inProgress,
+					traceId: "",
 				},
 			}),
 		);
@@ -475,7 +480,7 @@ export const generateText =
 		const sourceIndexes = extractSourceIndexesFromNode(instructionNode);
 		switch (instructionConnector.targetNodeArcheType) {
 			case giselleNodeArchetypes.textGenerator: {
-				const { object } = await generateArtifactStream({
+				const { object, traceId } = await generateArtifactStream({
 					agentId: getState().graph.agentId,
 					userPrompt: instructionNode.output as string,
 					sourceIndexes,
@@ -493,6 +498,7 @@ export const generateText =
 								node: {
 									id: args.textGeneratorNode.id,
 									state: giselleNodeState.streaming,
+									traceId: traceId,
 								},
 							}),
 						);
@@ -502,6 +508,7 @@ export const generateText =
 									id: args.textGeneratorNode.id,
 									output:
 										streamContent as PartialGeneratedObject /** @todo type assertion */,
+									traceId: traceId,
 								},
 							}),
 						);
@@ -514,6 +521,7 @@ export const generateText =
 										thinking:
 											"Sorry, a temporary issue has occurred.\nPlease try again after a while.",
 									},
+									traceId: traceId,
 								},
 							}),
 						);
@@ -526,6 +534,7 @@ export const generateText =
 							node: {
 								id: args.textGeneratorNode.id,
 								state: giselleNodeState.completed,
+								traceId: traceId,
 							},
 						}),
 					);
@@ -544,6 +553,7 @@ export const generateText =
 									completed: true,
 								},
 							},
+							traceId: traceId,
 						},
 					}),
 				);
@@ -573,13 +583,14 @@ export const generateText =
 						node: {
 							id: args.textGeneratorNode.id,
 							state: giselleNodeState.completed,
+							traceId: traceId,
 						},
 					}),
 				);
 				break;
 			}
 			case giselleNodeArchetypes.webSearch: {
-				const { object } = await generateWebSearchStream({
+				const { object, traceId } = await generateWebSearchStream({
 					agentId: getState().graph.agentId,
 					userPrompt: instructionNode.output as string,
 					sourceIndexes,
@@ -596,6 +607,7 @@ export const generateText =
 								node: {
 									id: args.textGeneratorNode.id,
 									state: giselleNodeState.streaming,
+									traceId: traceId,
 								},
 							}),
 						);
@@ -606,6 +618,7 @@ export const generateText =
 								id: args.textGeneratorNode.id,
 								output:
 									streamContent as PartialGeneratedObject /** @todo type assertion */,
+								traceId: traceId,
 							},
 						}),
 					);
@@ -624,6 +637,7 @@ export const generateText =
 									completed: true,
 								},
 							},
+							traceId: traceId,
 						},
 					}),
 				);
@@ -633,6 +647,7 @@ export const generateText =
 						node: {
 							id: args.textGeneratorNode.id,
 							state: giselleNodeState.completed,
+							traceId: traceId,
 						},
 					}),
 				);

diff --git a/app/(playground)/p/[agentId]/beta-proto/web-search/server-action.ts b/app/(playground)/p/[agentId]/beta-proto/web-search/server-action.ts
@@ -276,5 +276,5 @@ ${sourcesToText(sources)}
 			),
 		),
 	); // wait until telemetry sent
-	return { object: stream.value };
+	return { object: stream.value, traceId: trace.id };
 }