@zenify-omni/chat-ui-react-js 0.1.0

package/components/chat-route/chat-box/chat-feedback/index.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter
+} from "../../../ui/dialog.js";
+import { Button } from "../../../ui/button.js";
+import { Textarea } from "../../../ui/textarea.js";
+import { Input } from "../../../ui/input.js";
+import { Label } from "../../../ui/label.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const ChatFeedback = ({ open, onOpenChange, message }) => {
+  const { t } = useTranslation();
+  const [feedback, setFeedback] = useState("");
+  const [expectedResponse, setExpectedResponse] = useState("");
+  const [rating, setRating] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const handleSubmit = async () => {
+    if (!feedback.trim()) {
+      toast.error(
+        i18n.t("chat:toast.enterFeedback", {
+          defaultValue: "Vui l\xF2ng nh\u1EADp ph\u1EA3n h\u1ED3i"
+        })
+      );
+      return;
+    }
+    setIsSubmitting(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    console.log("Feedback submitted:", {
+      message_id: message?._id,
+      feedback,
+      expectedResponse,
+      rating: rating ? parseFloat(rating) : null
+    });
+    toast.success(
+      i18n.t("chat:toast.sendFeedbackSuccess", {
+        defaultValue: "G\u1EEDi g\xF3p \xFD th\xE0nh c\xF4ng!"
+      })
+    );
+    setFeedback("");
+    setExpectedResponse("");
+    setRating("");
+    setIsSubmitting(false);
+    onOpenChange(false);
+  };
+  const handleCancel = () => {
+    setFeedback("");
+    setExpectedResponse("");
+    setRating("");
+    onOpenChange(false);
+    setIsSubmitting(false);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.giveFeedbackOnAnswer", {
+      defaultValue: "G\xF3p \xFD c\xE2u tr\u1EA3 l\u1EDDi"
+    }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: "feedback", children: [
+          "Feedback ",
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: "feedback",
+            placeholder: t("chat:title.feedbackOnBotAnswer", {
+              defaultValue: "Ph\u1EA3n h\u1ED3i v\u1EC1 c\xE2u tr\u1EA3 l\u1EDDi c\u1EE7a bot"
+            }),
+            value: feedback,
+            onChange: (e) => setFeedback(e.target.value),
+            className: "min-h-[80px]"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "expectedResponse", children: t("chat:field.desiredResponse", {
+          defaultValue: "Ph\u1EA3n h\u1ED3i mong mu\u1ED1n"
+        }) }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: "expectedResponse",
+            placeholder: t("chat:placeholder.desiredBotResponse", {
+              defaultValue: "Nh\u1EADp ph\u1EA3n h\u1ED3i mong mu\u1ED1n m\xE0 b\u1EA1n mu\u1ED1n bot tr\u1EA3 l\u1EDDi"
+            }),
+            value: expectedResponse,
+            onChange: (e) => setExpectedResponse(e.target.value),
+            className: "min-h-[80px]"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "rating", children: t("chat:field.ratingScore", {
+          defaultValue: "\u0110i\u1EC3m \u0111\xE1nh gi\xE1 (0-5)"
+        }) }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "rating",
+            type: "number",
+            min: "0",
+            max: "5",
+            step: "0.5",
+            placeholder: t("chat:field.ratingExample", {
+              defaultValue: "V\xED d\u1EE5: 4.5"
+            }),
+            value: rating,
+            onChange: (e) => setRating(e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleCancel, children: t("common:action.cancelAlt", { defaultValue: "Hu\u1EF7" }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, disabled: isSubmitting, children: isSubmitting ? t("chat:status.sending", { defaultValue: "\u0110ang g\u1EEDi..." }) : t("common:action.confirm", { defaultValue: "X\xE1c nh\u1EADn" }) })
+    ] })
+  ] }) });
+};
+export {
+  ChatFeedback
+};