居酒屋のメニューを作成します。下記の各ジャンルそれぞれにおいて、8つずつメニュータイトルを作成してください。

酒類、おつまみ、刺身、揚げ物、焼き物、麺類、ごはんもの、デザート

{
  "menu": {
    "酒類": [
      "日本酒フライト（季節の選りすぐり）",
      "山廃純米の生一本",
      "本格焼酎の水割りセット",
      "季節のフルーツカクテル",
      "クラフトビール（地元の醸造所より）",
      "梅酒とゆず酒の二種盛り",
      "熟成日本酒のお燗",
      "スパークリング日本酒"
    ],
    "おつまみ": [
      "枝豆の塩ゆで",
      "たたききゅうりのごま油和え",
      "チーズとサラミの盛り合わせ",
      "レモンとハーブのマリネサラダ",
      "季節の野菜のピクルス",
      "和風ポテトサラダ",
      "居酒屋特製唐揚げ",
      "自家製冷製トマトスープ"
    ],
    "刺身": [
      "まぐろの三色丼（赤身、中トロ、大トロ）",
      "季節のお刺身5点盛り",
      "ブリの照り焼き刺身",
      "新鮮イカとウニの刺身",
      "たこときゅうりの酢の物",
      "刺身のサラダ（季節の魚を使用）",
      "白身魚のカルパッチョ",
      "鮮度抜群！サーモンとアボカドの刺身"
    ],
    "揚げ物": [
      "天ぷら盛り合わせ（季節の野菜と海鮮）",
      "鶏の唐揚げ（自家製ソース付き）",
      "かぼちゃのコロッケ",
      "季節の魚のフライ",
      "エビフライ（自家製タルタルソース付き）",
      "自家製豆腐の揚げ出し",
      "チーズとハムの春巻き",
      "ポテトフライ（自家製ソース付き）"
    ],
    "焼き物": [
      "鳥の焼き鳥盛り合わせ",
      "真ダコのバター焼き",
      "季節の野菜の串焼き",
      "特選和牛の石焼き",
      "骨付きラムのローズマリー焼き",
      "海鮮焼き（季節の魚と貝）",
      "銀ダラの西京焼き",
      "フォアグラの鉄板焼き"
    ],
    "麺類": [
      "居酒屋特製冷やし中華",
      "和風パスタ（季節の野菜と海鮮）",
      "自家製つけ麺（チャーシュー付き）",
      "ウニとイクラのクリームパスタ",
      "五目焼きそば",
      "豚肉とキムチの炒麺",
      "海老と青菜の塩ラーメン",
      "あっさり鶏ガララーメン"
    ],
    "ごはんもの": [
      "海鮮丼（季節の海鮮）",
      "居酒屋特製焼き鳥丼",
      "うなぎの蒲焼丼",
      "牛すじの煮込みごはん",
      "ちらし寿司（季節のネタ）",
      "炙りサーモンのおにぎり二個",
      "筍と鶏肉の炊き込みごはん",
      "五目おこわ"
    ],
    "デザート": [
      "抹茶のパンナコッタ",
      "黒ごまのアイスクリーム",
      "季節のフルーツパフェ",
      "さくらんぼのヨーグルトムース",
      "練乳キャラメルのプリン",
      "レモンとハチミツのゼリー",
      "マンゴーとココナッツのタピオカドリンク",
      "ゆずと白桃のソルベ"
    ]
  }
}

export default function Home() {
  return (
    <main className="grid grid-cols-12 gap-4">
      <div className="col-span-2">
        <Sidebar />
      </div>

      <div className="col-span-7">
        <Menu />
      </div>

      <div className="col-span-3">
        <Cart />
      </div>
    </main>
  );
}

import { useAtom } from "jotai";

import { orderCountsAtom } from "./atom";

const useOrder = () => {
  const [order, setOrderCounts] = useAtom(orderCountsAtom);

  const add = (item: string) => {
    setOrderCounts(
      (prevCounts) =>
        new Map(prevCounts.set(item, (prevCounts.get(item) || 0) + 1))
    );
  };

  const pop = (item: string) => {
    setOrderCounts((prevCounts) => {
      const currentCount = prevCounts.get(item) || 0;
      const nextCount = currentCount > 0 ? currentCount - 1 : 0;
      return nextCount > 0
        ? new Map(prevCounts.set(item, nextCount))
        : new Map([...prevCounts].filter(([key]) => key !== item));
    });
  };

  return {
    order,
    add,
    pop,
  };
};

export default useOrder;

import "client-only";

import { useState } from "react";

export const useSpeech = () => {
  const [transcript, setTranscript] = useState("");
  const [isListening, setIsListening] = useState(false);
  const [recognition] = useState(new window.webkitSpeechRecognition());

  const startListening = () => {
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.lang = "ja";

    recognition.onresult = (event) => {
      const currentTranscript = Array.from(event.results)
        .map((result) => result[0])
        .map((result) => result?.transcript)
        .join("");

      setTranscript(currentTranscript);
    };

    recognition.onerror = (event) => {
      console.error(event.error);
    };

    recognition.onend = () => {
      setIsListening(false);
    };

    recognition.start();
    setIsListening(true);
  };

  const stopListening = () => {
    recognition.stop();
    setIsListening(false);
  };

  return {
    transcript,
    isListening,
    startListening,
    stopListening,
  };
};

"use client";

import { BsFillMicFill } from "react-icons/bs";
import { tv } from "tailwind-variants";

import { useSpeech } from "./useSpeech";

const button = tv({
  base: "fixed bottom-10 right-10 flex h-16 w-16 items-center justify-center rounded-full text-2xl shadow",
  variants: {
    type: {
      on: "bg-red-700 text-white",
      off: "bg-slate-100 p-2 text-slate-800",
    },
  },
  defaultVariants: {
    type: "off",
  },
});

const Dictaphone = () => {
  const { transcript, isListening, startListening, stopListening } =
    useSpeech();

  const handleListening = !isListening ? startListening : stopListening;

  return (
    <div>
      <button
        className={button({ type: isListening ? "on" : "off" })}
        onClick={handleListening}
      >
        <BsFillMicFill />
      </button>
      <p>{transcript}</p>
    </div>
  );
};
export default Dictaphone;

import "client-only";

import { useCallback, useState } from "react";

export const useSpeech = () => {
  const [transcript, setTranscript] = useState("");
  const [isListening, setIsListening] = useState(false);
  const [recognition] = useState(new window.webkitSpeechRecognition());

  const startListening = useCallback(() => {
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.lang = "ja";

    recognition.onresult = (event) => {
      const currentTranscript = Array.from(event.results)
        .map((result) => result[0])
        .map((result) => result?.transcript)
        .join("");

      setTranscript(currentTranscript);
    };

    recognition.onerror = (event) => {
      console.error(event.error);
    };

    recognition.onend = () => {
      setIsListening(false);
    };

    recognition.start();
    setIsListening(true);
  }, [recognition]);

  const stopListening = useCallback(() => {
    recognition.stop();
    setIsListening(false);
  }, [recognition]);

  const reset = useCallback(() => {
    setTranscript("");
  }, []);

  return {
    transcript,
    isListening,
    startListening,
    stopListening,
    reset,
  };
};

"use client";

import * as Dialog from "@radix-ui/react-dialog";
import { BiStopCircle } from "react-icons/bi";
import { BsFillMicFill } from "react-icons/bs";
import { tv } from "tailwind-variants";

import { useSpeech } from "./useSpeech";

const button = tv({
  base: "fixed bottom-10 right-10 z-30 flex h-16 w-16 items-center justify-center rounded-full text-2xl shadow",
  variants: {
    type: {
      on: "bg-red-700 text-white",
      off: "bg-slate-100 p-2 text-slate-800",
    },
  },
  defaultVariants: {
    type: "off",
  },
});

const dialog = tv({
  slots: {
    content:
      "fixed left-2 top-[10%] z-50 flex h-4/5 w-[240px] flex-col gap-4 border bg-white p-6 shadow-lg duration-200 sm:rounded-lg",
    title: "text-lg font-semibold leading-none tracking-tight",
    description: "grow text-sm text-slate-700",
    footer: "flex sm:justify-end",
  },
});

const { content, title, description, footer } = dialog();

const Dictaphone = () => {
  const { transcript, isListening, startListening, stopListening, reset } =
    useSpeech();

  const handleListening = !isListening ? startListening : stopListening;

  const onStop = () => {
    stopListening();
    reset();
  };

  return (
    <Dialog.Root open={isListening} modal={false}>
      <Dialog.Trigger asChild>
        <button
          className={button({ type: isListening ? "on" : "off" })}
          onClick={handleListening}
        >
          <BsFillMicFill />
        </button>
      </Dialog.Trigger>

      <Dialog.Portal className="z-20">
        <Dialog.Content className={content()}>
          <Dialog.Title className={title()}>ご注文内容</Dialog.Title>

          <Dialog.Description className={description()}>
            {transcript}
          </Dialog.Description>
          <div className={footer()}>
            <Dialog.Close asChild>
              <button
                onClick={onStop}
                className="text-2xl text-red-700"
                aria-label="Close"
              >
                <BiStopCircle />
              </button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default Dictaphone;

error ReferenceError: window is not defined
    at useSpeech (./app/useSpeech.ts:14:79)

import "client-only";

import { useCallback, useEffect, useState } from "react";

export const useSpeech = () => {
  const [transcript, setTranscript] = useState("");
  const [isListening, setIsListening] = useState(false);
  const [recognition, setRecognition] = useState<SpeechRecognition>();

  useEffect(() => {
    if (window) {
      const r = new window.webkitSpeechRecognition();
      r.continuous = true;
      r.interimResults = true;
      r.lang = "ja";

      r.onresult = (event) => {
        const currentTranscript = Array.from(event.results)
          .map((result) => result[0])
          .map((result) => result?.transcript)
          .join("");

        setTranscript(currentTranscript);
      };

      r.onerror = (event) => {
        console.error(event.error);
      };

      r.onend = () => {
        setIsListening(false);
      };
      setRecognition(r);
    }
  }, []);

  const startListening = useCallback(() => {
    recognition?.start();
    setIsListening(true);
  }, [recognition]);

  const stopListening = useCallback(() => {
    recognition?.stop();
    setIsListening(false);
  }, [recognition]);

  const reset = useCallback(() => {
    setTranscript("");
  }, []);

  return {
    transcript,
    isListening,
    startListening,
    stopListening,
    reset,
  };
};

import { ChatCompletionFunctions } from 'openai-edge/types/api'

const functions: ChatCompletionFunctions[] = [
  {
    name: 'get_current_weather',
    description: 'Get the current weather',
    parameters: {
      type: 'object',
      properties: {
        location: {
          type: 'string',
          description: 'The city and state, e.g. San Francisco, CA'
        },
        format: {
          type: 'string',
          enum: ['celsius', 'fahrenheit'],
          description:
            'The temperature unit to use. Infer this from the users location.'
        }
      },
      required: ['location', 'format']
    }
  },
]

export async function POST(req: Request) {
  const { messages, function_call } = await req.json()

  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo-0613',
    stream: true,
    messages,
    functions,
    function_call
  })

  const stream = OpenAIStream(response)
  return new StreamingTextResponse(stream)
}

"use client";

import { FunctionCallHandler, ChatRequest, nanoid } from "ai";
import { useChat } from "ai/react";

const functionCallHandler: FunctionCallHandler = async (
  chatMessages,
  functionCall
) => {
  if (functionCall.name === "order") {
    const functionResponse: ChatRequest = {
      messages: [
        ...chatMessages,
        {
          id: nanoid(),
          name: "get_current_weather",
          role: "function" as const,
          content: JSON.stringify({
            arguments: functionCall.arguments,
          }),
        },
      ],
    };
    return functionResponse;
  }
};

export default function SloganGenerator() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    experimental_onFunctionCall: functionCallHandler,
  });

  console.log(messages);

  return (
    <div className="fixed left-1/2 top-40 mx-auto flex w-full max-w-md flex-col py-24">
      <form onSubmit={handleSubmit}>
        <input
          className="mb-8 w-full max-w-md rounded border border-gray-300 p-2 shadow-xl"
          value={input}
          placeholder="Describe your business..."
          onChange={handleInputChange}
        />
      </form>
      <ul>
        {messages.map((m) => (
          <li key={m.id}>{m.content}</li>
        ))}
      </ul>
    </div>
  );
}

"{"arguments":"{\n  \"orders\": [\n    {\n      \"title\": \"唐揚げ\",\n      \"count\": 1\n    },\n    {\n      \"title\": \"枝豆\",\n      \"count\": 1\n    }\n  ]\n}"}"

"{"arguments":"{\n  \"orders\": [\n    {\n      \"title\": \"スパークリング日本酒\",\n      \"count\": 1\n    },\n    {\n      \"title\": \"揚げ出し豆腐\",\n      \"count\": 2\n    }\n  ]\n}"}"

const useHandleOrder: FunctionCallHandler = async (_, functionCall) => {
  const { add } = useOrder();
  if (functionCall.name === "order") {
    const ordersJson = functionCall.arguments;
    if (!ordersJson) return;
    const orders = JSON.parse(ordersJson) as { title: string; count: number }[];
    orders.forEach(({ title, count }) => add(title, count));
  }
};

  const { messages, input, handleInputChange, handleSubmit } = useChat({
    experimental_onFunctionCall: useHandleOrder,
  });

Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10539:9)
    at useContext (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react/cjs/react.development.js:1753:21)
    at useStore (webpack-internal:///(:3000/app-client)/./node_modules/jotai/esm/react.mjs:16:66)
    at useAtomValue (webpack-internal:///(:3000/app-client)/./node_modules/jotai/esm/react.mjs:60:17)
    at useAtom (webpack-internal:///(:3000/app-client)/./node_modules/jotai/esm/react.mjs:109:5)
    at useOrder (webpack-internal:///(:3000/app-client)/./app/useOrder.ts:7:83)
    at useHandleOrder (webpack-internal:///(:3000/app-client)/./app/AIClient.tsx:14:74)
    at eval (webpack-internal:///(:3000/app-client)/./node_modules/ai/react/dist/index.mjs:210:48)
    at Generator.next (<anonymous>)
    at fulfilled (webpack-internal:///(:3000/app-client)/./node_modules/ai/react/dist/index.mjs:31:24)

 const { add } = useOrder();

  const functionCallHandler: FunctionCallHandler = async (_, functionCall) => {
    if (functionCall.name === "order") {
      const ordersJson = functionCall.arguments?.replaceAll("\n", "");

      if (!ordersJson) return;

      const { orders } = JSON.parse(ordersJson) as {
        orders: {
          title: string;
          count: number;
        }[];
      };

      orders.forEach(({ title, count }) => add(title, count));
    }
  };