@fcg-labs/cx-agent-hook 0.1.0

package/view.js

@@ -0,0 +1,60 @@
+/** 표시 판단과 클래스 이름 — 프레임워크 중립.
+ *
+ * React·Vue·웹 컴포넌트가 **같은 판단**을 쓴다. 여기가 갈리면 프레임워크마다
+ * 다른 제품이 되고, 어느 하나를 고쳐도 나머지는 그대로 남는다.
+ *
+ * 렌더러 없이 검증된다 — 이 패키지는 react-dom 도 vue 도 의존하지 않는다.
+ */
+
+/** 지금 무엇을 그릴지 — React 없이 검증 가능한 순수 함수.
+ *
+ * 화면 계층을 얇게 두는 이유: 이 판단이 곧 제품 행동이고, 렌더러 없이도
+ * 검증돼야 한다. (SDK 는 react-dom 을 의존하지 않는다.)
+ *
+ * 문구는 인자로 받는다 — 이 함수가 언어를 알면 로케일이 두 곳에 생긴다.
+ * 정본은 setup 에서 정해져 `hook.messages` 에 들어 있다.
+ *
+ * @param {"idle"|"loading"|"done"} state
+ * @param {object|null} result  requestAnswer 결과
+ * @param {(reason: string) => string} declineText
+ * @param {Record<string,string>} messages  hook.messages
+ */
+export function aiSuggestView({ state, result, declineText, messages = {} }) {
+  const loading = state === "loading";
+  const done = state === "done" && Boolean(result);
+  const answered = done && Boolean(result.answered);
+
+  let body = { kind: "none" };
+  if (answered) {
+    body = {
+      kind: "answer",
+      text: result.answer || "",
+      // 근거 제목이 없으면 키로 대신한다 — 빈 칩을 그리지 않는다.
+      evidence: (result.evidence || [])
+        .map((e) => e.title || e.unit_key)
+        .filter(Boolean),
+      evidenceLabel: messages.ui_evidence,
+    };
+  } else if (done) {
+    body = { kind: "declined", text: declineText(result.declinedReason) };
+  }
+
+  return {
+    buttonLabel: loading ? messages.ui_requesting : messages.ui_request,
+    buttonDisabled: loading,
+    showAdopt: answered,
+    adoptLabel: messages.ui_adopt,
+    body,
+  };
+}
+
+export const CLS = {
+  root: "fcx-ai",
+  head: "fcx-ai-head",
+  button: "fcx-ai-button",
+  adopt: "fcx-ai-adopt",
+  body: "fcx-ai-body",
+  answer: "fcx-ai-answer",
+  evidence: "fcx-ai-evidence",
+  declined: "fcx-ai-declined",
+};

package/vue.d.ts

@@ -0,0 +1,16 @@
+import type { DefineComponent } from "vue";
+import type { CxHook } from "./index.js";
+
+export { aiSuggestView } from "./view.js";
+export type { AiSuggestView } from "./view.js";
+
+export interface AiSuggestPanelProps {
+  hook: CxHook;
+  inquiry?: string;
+  /** 바깥 배치용 (레이아웃만 — 색·간격은 styles.css 변수로) */
+  className?: string;
+}
+
+/** `@adopt` 로 채택 문구를 emit 한다. hook 이 미설정이면 아무것도 그리지 않는다. */
+export declare const AiSuggestPanel: DefineComponent<AiSuggestPanelProps>;
+export default AiSuggestPanel;

package/vue.js

@@ -0,0 +1,119 @@
+/**
+ * AI 답변 제안 패널 — Vue 3.
+ *
+ * ```vue
+ * <script setup>
+ * import { AiSuggestPanel } from "@fcg-labs/cx-agent-hook/vue";
+ * import "@fcg-labs/cx-agent-hook/styles.css";
+ * import { cxHook } from "./cxAgentHook";
+ * </script>
+ *
+ * <template>
+ *   <AiSuggestPanel :hook="cxHook" :inquiry="selected?.content" @adopt="setAnswerText" />
+ * </template>
+ * ```
+ *
+ * 표시 판단은 `view.js` 가 갖는다 — React·웹 컴포넌트와 **같은 것**을 쓴다.
+ * 여기서 다시 판단하면 프레임워크마다 다른 제품이 된다.
+ *
+ * JSX·SFC 를 쓰지 않는 이유는 react.js 와 같다: 이 패키지에는 빌드 단계가 없다.
+ * Vue 는 optional peer 다 (>=3.0).
+ */
+import { computed, defineComponent, h, ref, watch } from "vue";
+
+import { aiSuggestView, CLS } from "./view.js";
+
+export { aiSuggestView };
+
+export const AiSuggestPanel = defineComponent({
+  name: "AiSuggestPanel",
+  props: {
+    hook: { type: Object, required: true },
+    inquiry: { type: String, default: "" },
+    /** 바깥 배치용 (레이아웃만 — 색·간격은 styles.css 변수로) */
+    className: { type: String, default: "" },
+  },
+  emits: ["adopt"],
+  setup(props, { emit }) {
+    const state = ref("idle");
+    const result = ref(null);
+
+    // 다른 문의로 옮기면 앞 문의의 제안이 남아 있으면 안 된다. 채택 기록도 같이
+    // 지운다 — 안 지우면 다음 문의를 발송할 때 엉뚱한 answer_id 로 후킹된다.
+    watch(
+      () => props.inquiry,
+      () => {
+        state.value = "idle";
+        result.value = null;
+        props.hook.clearAdopted();
+      },
+      { immediate: true },
+    );
+
+    const request = async () => {
+      if (!props.inquiry || state.value === "loading") return;
+      state.value = "loading";
+      result.value = await props.hook.requestAnswer(props.inquiry);
+      state.value = "done";
+    };
+
+    const adopt = () => {
+      const r = result.value;
+      if (!r || !r.answered) return;
+      props.hook.noteAdopted(r.answerId);
+      emit("adopt", r.answer);
+    };
+
+    const view = computed(() =>
+      aiSuggestView({
+        state: state.value,
+        result: result.value,
+        declineText: props.hook.declineText,
+        messages: props.hook.messages,
+      }),
+    );
+
+    return () => {
+      if (!props.hook || !props.hook.enabled) return null;
+      const v = view.value;
+      return h(
+        "div",
+        {
+          class: props.className ? `${CLS.root} ${props.className}` : CLS.root,
+          // 이 패널은 보통 "클릭하면 선택되는" 문의 행 안에 놓인다. 버튼을
+          // 누르려다 행 선택이 토글되면 제안이 초기화된다.
+          onClick: (event) => event.stopPropagation(),
+        },
+        [
+          h("div", { class: CLS.head }, [
+            h(
+              "button",
+              { type: "button", class: CLS.button, disabled: v.buttonDisabled, onClick: request },
+              v.buttonLabel,
+            ),
+            v.showAdopt
+              ? h("button", { type: "button", class: CLS.adopt, onClick: adopt }, v.adoptLabel)
+              : null,
+          ]),
+          v.body.kind === "answer"
+            ? h("div", { class: CLS.body }, [
+                h("div", { class: CLS.answer }, v.body.text),
+                v.body.evidence.length > 0
+                  ? h(
+                      "div",
+                      { class: CLS.evidence },
+                      `${v.body.evidenceLabel}: ${v.body.evidence.join(" · ")}`,
+                    )
+                  : null,
+              ])
+            : null,
+          v.body.kind === "declined"
+            ? h("div", { class: CLS.declined }, v.body.text)
+            : null,
+        ],
+      );
+    };
+  },
+});
+
+export default AiSuggestPanel;