契約書の要約ボタンをとりあえず設置

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env

package.json

@@ -20,6 +20,7 @@
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
     "next": "13.3.1",
+    "openai": "^3.2.1",
     "pdfjs-dist": "^3.5.141",
     "postcss": "8.4.23",
     "react": "18.2.0",

src/components/elements/Button/Button.tsx

@@ -0,0 +1,38 @@
+import React, { FC, MouseEvent, CSSProperties } from "react";
+
+import { ButtonColorType, ButtonVariantType, ButtonColor } from "./constants";
+
+type PropsType = {
+  style?: CSSProperties;
+  text: string;
+  outline?: boolean;
+  disabled?: boolean;
+  className?: string;
+  color: ButtonColorType;
+  variant: ButtonVariantType;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+};
+
+export const Button: FC<PropsType> = ({
+  style,
+  text,
+  className = "",
+  disabled = false,
+  color,
+  variant,
+  onClick,
+}: PropsType) => {
+  return (
+    <button
+      style={style}
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={`${ButtonColor[variant][color]} ${
+        disabled ? "cursor-not-allowed opacity-80" : "cursor-pointer"
+      }  px-4 py-2 rounded ${className}`}
+    >
+      {text}
+    </button>
+  );
+};

src/components/elements/Button/constants.ts

@@ -0,0 +1,18 @@
+export type ButtonColorType = "primary" | "gray";
+export type ButtonVariantType = "outlined" | "contained";
+
+export const ButtonColor: Record<
+  ButtonVariantType,
+  Record<ButtonColorType, string>
+> = {
+  contained: {
+    primary:
+      "text-white border border-solid bg-primary-500 hover:bg-primary-600",
+    gray: "text-white border border-solid bg-gray-500 hover:bg-gray-600",
+  },
+  outlined: {
+    primary:
+      "border border-solid bg-white border-primary-500 hover:bg-primary-100 text-primary-500",
+    gray: "border border-solid bg-white border-gray-500 hover:bg-gray-100 text-gray-600",
+  },
+};

src/components/index.ts

@@ -1,2 +1,3 @@
 export { DropzoneFileField } from "./elements/DropzoneFileField/DropzoneFileField";
 export { Icon } from "./elements/Icon/Icon";
+export { Button } from "./elements/Button/Button";

src/features/home/components/HomeLayout.tsx

@@ -1,17 +1,28 @@
 import { useEffect } from "react";
 
-import { DropzoneFileField, Icon } from "@keiyomi/components";
-import { useFile, usePdfLoad } from "@keiyomi/hooks";
+import { Button, DropzoneFileField, Icon } from "@keiyomi/components";
+import { useContractSummaryRequest } from "@keiyomi/features/home";
+import { useFile, usePdfLoad, useInput } from "@keiyomi/hooks";
 
 export const HomeLayout = () => {
   const { file, handleDropFile, fileUrl } = useFile();
   const { pdfText, loadPdfUrl } = usePdfLoad();
+  const [{ value: summaryText }, setSummaryText] = useInput("");
+  const { doSummaryRequest, isChatRequesting } = useContractSummaryRequest("");
 
   useEffect(() => {
     if (fileUrl) loadPdfUrl(fileUrl);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [file]);
 
+  const handleAiRequest = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    doSummaryRequest({
+      message: "This is a contract between John and Acme.",
+      onSuccess: (data) => setSummaryText(data.chatMessage.content),
+    });
+  };
+
   return (
     <main
       className={
@@ -37,14 +48,30 @@ export const HomeLayout = () => {
               className="mx-auto"
             />
             <p className="mt-2 font-semibold">
-              {file ? file.name : "契約書をPDFをインポート"}{" "}
+              {file ? file.name : "契約書をPDFをインポート"}
             </p>
           </div>
         </DropzoneFileField>
         {file && (
-          <p className="bg-white shadow mt-8 max-h-[60vh] overflow-y-auto mx-auto border border-solid border-gray-200 rounded p-2 whitespace-pre-wrap ">
-            {pdfText}
-          </p>
+          <div className="mt-8">
+            <div className="text-center">
+              <Button
+                text="契約書を要約"
+                onClick={handleAiRequest}
+                color="primary"
+                variant="outlined"
+                disabled={isChatRequesting}
+              />
+            </div>
+            {summaryText && (
+              <p className="mt-8 bg-white shadow max-h-[60vh] overflow-y-auto mx-auto border border-solid border-gray-200 rounded p-2 whitespace-pre-wrap ">
+                {summaryText}
+              </p>
+            )}
+            <p className="mt-8 bg-white shadow max-h-[60vh] overflow-y-auto mx-auto border border-solid border-gray-200 rounded p-2 whitespace-pre-wrap ">
+              {pdfText}
+            </p>
+          </div>
         )}
       </div>
     </main>

src/features/home/hooks/useContractSummaryRequest.ts

@@ -0,0 +1,31 @@
+import { OpenAiOnSuccessType, useOpenAiRequest } from "@keiyomi/hooks";
+
+type ApiRequestType = {
+  message: string;
+  onSuccess?: ({ data, chatMessage }: OpenAiOnSuccessType) => void;
+};
+
+type ReturnType = {
+  doSummaryRequest: ({ message, onSuccess }: ApiRequestType) => void;
+  isChatRequesting: boolean;
+};
+
+export const useContractSummaryRequest = (
+  currentEmployeeId: string
+): ReturnType => {
+  const { openAiRequest, isChatRequesting } =
+    useOpenAiRequest(currentEmployeeId);
+
+  const doSummaryRequest = ({ message, onSuccess }: ApiRequestType) => {
+    openAiRequest({
+      prompt: message,
+      systemMessage: "あなたは10歳にもわかる言葉で説明するAIです。",
+      onSuccess,
+    });
+  };
+
+  return {
+    doSummaryRequest,
+    isChatRequesting,
+  };
+};

src/features/home/index.ts

@@ -1 +1,2 @@
 export { HomeLayout } from "./components/HomeLayout";
+export { useContractSummaryRequest } from "./hooks/useContractSummaryRequest";

src/hooks/index.ts

@@ -1,2 +1,6 @@
 export { useFile } from "./useFile";
 export { usePdfLoad } from "./usePdfLoad";
+export { useBoolean } from "./useBoolean";
+export { useInput } from "./useInput";
+export { useOpenAiRequest } from "./useOpenAiRequest";
+export type { OpenAiOnSuccessType } from "./useOpenAiRequest";

src/hooks/useBoolean.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState, ChangeEvent } from "react";
+
+type ReturnType = {
+  isChecked: boolean;
+  setTrue: () => void;
+  setFalse: () => void;
+  toggle: () => void;
+  handleChange: (value: boolean) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const useBoolean = (initial = false): ReturnType => {
+  const [isChecked, setIsChecked] = useState(initial);
+
+  const setTrue = useCallback(() => setIsChecked(true), []);
+  const setFalse = useCallback(() => setIsChecked(false), []);
+  const toggle = useCallback(() => setIsChecked((state) => !state), []);
+  const handleChange = useCallback((value: boolean) => setIsChecked(value), []);
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      handleChange(e.target.checked);
+    },
+    [handleChange]
+  );
+
+  return { isChecked, setTrue, setFalse, toggle, handleChange, onChange };
+};

src/hooks/useInput.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback, ChangeEvent } from "react";
+
+type ReturnType = [
+  {
+    value: string;
+    onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  },
+  (value?: string) => void
+];
+
+export const useInput = (initialValue: string): ReturnType => {
+  const [value, setValue] = useState(initialValue || "");
+  return [
+    {
+      value,
+      onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+        setValue(e.target.value),
+    },
+    useCallback((value?: string) => setValue(value || ""), []),
+  ];
+};