Merge branch 'main' into mme/preserve-whitespace

Author: mme

CopilotKit/examples/next-openai/package.json

@@ -20,6 +20,7 @@
     "@langchain/core": "^0.1.29",
     "@langchain/langgraph": "^0.0.7",
     "@langchain/openai": "^0.0.14",
+    "clsx": "^1.2.1",
     "langchain": "^0.1.19",
     "next": "^13.4.9",
     "next-themes": "^0.2.1",

CopilotKit/examples/next-openai/src/app/presentation/actions/useAppendSlide.tsx

@@ -0,0 +1,55 @@
+import { useCopilotAction } from "@copilotkit/react-core";
+import { SlideModel } from "../types";
+import { SlidePreview } from "../components/misc/SlidePreview";
+
+interface AppendSlideParams {
+  setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
+  setCurrentSlideIndex: (fn: (i: number) => number) => void;
+  slides: SlideModel[];
+}
+
+export default function useAppendSlide({
+  setSlides,
+  setCurrentSlideIndex,
+  slides,
+}: AppendSlideParams) {
+  useCopilotAction({
+    name: "appendSlide",
+    description:
+      "Add a slide after all the existing slides. Call this function multiple times to add multiple slides.",
+    parameters: [
+      {
+        name: "content",
+        description:
+          "The content of the slide. MUST consist of a title, then an empty newline, then a few bullet points. Always between 1-3 bullet points - no more, no less.",
+      },
+      {
+        name: "backgroundImageDescription",
+        description:
+          "What to display in the background of the slide. For example, 'dog', 'house', etc.",
+      },
+      {
+        name: "spokenNarration",
+        description:
+          "The text to read while presenting the slide. Should be distinct from the slide's content, " +
+          "and can include additional context, references, etc. Will be read aloud as-is. " +
+          "Should be a few sentences long, clear, and smooth to read." +
+          "DO NOT include meta-commentary, such as 'in this slide', 'we explore', etc.",
+      },
+    ],
+
+    handler: async ({ content, backgroundImageDescription, spokenNarration }) => {
+      const newSlide: SlideModel = {
+        content,
+        backgroundImageDescription,
+        spokenNarration,
+      };
+
+      setSlides((slides) => [...slides, newSlide]);
+      setCurrentSlideIndex((i) => slides.length);
+    },
+    render: (props) => {
+      return <SlidePreview {...props.args} done={props.status === "complete"} />;
+    },
+  });
+}

CopilotKit/examples/next-openai/src/app/presentation/actions/useUpdateSlide.tsx

@@ -0,0 +1,40 @@
+import { useCopilotAction } from "@copilotkit/react-core";
+import { SlideModel } from "../types";
+import { SlidePreview } from "../components/misc/SlidePreview";
+
+interface UpdateSlideParams {
+  partialUpdateSlide: (partialSlide: Partial<SlideModel>) => void;
+}
+
+export default function useUpdateSlide({ partialUpdateSlide }: UpdateSlideParams) {
+  useCopilotAction({
+    name: "updateSlide",
+    description: "Update the current slide.",
+    parameters: [
+      {
+        name: "content",
+        description: "The content of the slide. Should generally consist of a few bullet points.",
+      },
+      {
+        name: "backgroundImageDescription",
+        description:
+          "What to display in the background of the slide. For example, 'dog', 'house', etc.",
+      },
+      {
+        name: "spokenNarration",
+        description:
+          "The spoken narration for the slide. This is what the user will hear when the slide is shown.",
+      },
+    ],
+    handler: async ({ content, backgroundImageDescription, spokenNarration }) => {
+      partialUpdateSlide({
+        content,
+        backgroundImageDescription,
+        spokenNarration,
+      });
+    },
+    render: (props) => {
+      return <SlidePreview {...props.args} done={props.status === "complete"} />;
+    },
+  });
+}

CopilotKit/examples/next-openai/src/app/presentation/components/buttons/ActionButton.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+
+interface ActionButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  inProgress?: boolean;
+}
+
+export function ActionButton({ children, onClick, disabled, inProgress }: ActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled || inProgress}
+      className={clsx(
+        "text-white font-bold w-7 h-7 flex items-center justify-center rounded-md",
+        disabled ? "opacity-50 cursor-not-allowed" : "hover:border hover:border-white",
+        inProgress && "animate-bounce text-blue-400 cursor-not-allowed hover:border-none",
+      )}
+    >
+      {children}
+    </button>
+  );
+}

CopilotKit/examples/next-openai/src/app/presentation/components/buttons/AddSlideButton.tsx

@@ -0,0 +1,35 @@
+import { SlideModel } from "../../types";
+import { ActionButton } from "./ActionButton";
+import { PlusCircleIcon } from "@heroicons/react/24/outline";
+
+interface AddSlideButtonProps {
+  currentSlideIndex: number;
+  setCurrentSlideIndex: (fn: (i: number) => number) => void;
+  setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
+}
+
+export function AddSlideButton({
+  currentSlideIndex,
+  setCurrentSlideIndex,
+  setSlides,
+}: AddSlideButtonProps) {
+  return (
+    <ActionButton
+      onClick={() => {
+        const newSlide: SlideModel = {
+          content: "",
+          backgroundImageDescription: "random",
+          spokenNarration: "",
+        };
+        setSlides((slides) => [
+          ...slides.slice(0, currentSlideIndex + 1),
+          newSlide,
+          ...slides.slice(currentSlideIndex + 1),
+        ]);
+        setCurrentSlideIndex((i) => i + 1);
+      }}
+    >
+      <PlusCircleIcon className="h-5 w-5" />
+    </ActionButton>
+  );
+}

CopilotKit/examples/next-openai/src/app/presentation/components/buttons/DeleteSlideButton.tsx

@@ -0,0 +1,33 @@
+import { SlideModel } from "../../types";
+import { ActionButton } from "./ActionButton";
+import { TrashIcon } from "@heroicons/react/24/outline";
+
+interface DeleteSlideButtonProps {
+  currentSlideIndex: number;
+  setCurrentSlideIndex: (fn: (i: number) => number) => void;
+  slides: SlideModel[];
+  setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
+}
+
+export function DeleteSlideButton({
+  currentSlideIndex,
+  setCurrentSlideIndex,
+  slides,
+  setSlides,
+}: DeleteSlideButtonProps) {
+  return (
+    <ActionButton
+      disabled={slides.length == 1}
+      onClick={() => {
+        // delete the current slide
+        setSlides((slides) => [
+          ...slides.slice(0, currentSlideIndex),
+          ...slides.slice(currentSlideIndex + 1),
+        ]);
+        setCurrentSlideIndex((i) => 0);
+      }}
+    >
+      <TrashIcon className="h-5 w-5" />
+    </ActionButton>
+  );
+}

CopilotKit/examples/next-openai/src/app/presentation/components/buttons/GenerateSlideButton.tsx

@@ -0,0 +1,37 @@
+import { CopilotContextParams, CopilotTask } from "@copilotkit/react-core";
+import { useState } from "react";
+import { ActionButton } from "./ActionButton";
+import { SparklesIcon } from "@heroicons/react/24/outline";
+
+interface GenerateSlideButtonProps {
+  context: CopilotContextParams;
+}
+
+export function GenerateSlideButton({ context }: GenerateSlideButtonProps) {
+  const [isGeneratingSlide, setIsGeneratingSlide] = useState(false);
+  return (
+    <ActionButton
+      inProgress={isGeneratingSlide}
+      onClick={async () => {
+        try {
+          let slideContent = prompt("What should the new slide be about?");
+          if (slideContent === null) {
+            return;
+          }
+          setIsGeneratingSlide(true);
+          const generateSlideTask = new CopilotTask({
+            instructions:
+              "Make a new slide given this user input: " +
+              slideContent +
+              "\n DO NOT carry out research",
+          });
+          await generateSlideTask.run(context);
+        } finally {
+          setIsGeneratingSlide(false);
+        }
+      }}
+    >
+      <SparklesIcon className={"h-5 w-5"} />
+    </ActionButton>
+  );
+}

CopilotKit/examples/next-openai/src/app/presentation/components/buttons/NavButton.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+
+interface NavButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export function NavButton({ children, onClick, disabled }: NavButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={clsx(
+        "w-7 h-7 border border-white rounded-md flex justify-center items-center",
+        "focus:outline-none",
+        disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-white hover:text-black",
+      )}
+    >
+      {children}
+    </button>
+  );
+}

CopilotKit/examples/next-openai/src/app/presentation/components/buttons/PerformResearchSwitch.tsx

@@ -0,0 +1,31 @@
+interface PerformResearchSwitchProps {
+  isEnabled: boolean;
+  setIsEnabled: (fn: (b: boolean) => boolean) => void;
+}
+
+export const PerformResearchSwitch = ({ isEnabled, setIsEnabled }: PerformResearchSwitchProps) => {
+  return (
+    <label className="flex items-center cursor-pointer pl-4">
+      <div className="relative">
+        <input
+          type="checkbox"
+          className="sr-only"
+          checked={isEnabled}
+          onChange={() => setIsEnabled((b) => !b)}
+        />
+        <div
+          className={`w-10 h-4 ${
+            isEnabled ? "bg-blue-500" : "bg-gray-400"
+          } rounded-full shadow-inner transition-colors`}
+        ></div>
+
+        <div
+          className={`absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition-transform ${
+            isEnabled ? "transform translate-x-full" : ""
+          }`}
+        ></div>
+      </div>
+      <span className="text-sm font-normal ml-2">Perform Research?</span>
+    </label>
+  );
+};

CopilotKit/examples/next-openai/src/app/presentation/components/buttons/SpeakCurrentSlideButton.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { ActionButton } from "./ActionButton";
+import { SpeakerWaveIcon } from "@heroicons/react/24/outline";
+import { resetGlobalAudio, speak } from "../../utils/globalAudio";
+
+interface SpeakCurrentSlideButtonProps {
+  spokenNarration: string;
+}
+
+export function SpeakCurrentSlideButton({ spokenNarration }: SpeakCurrentSlideButtonProps) {
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  return (
+    <ActionButton inProgress={isSpeaking}>
+      <SpeakerWaveIcon
+        className="h-5 w-5"
+        onClick={async () => {
+          resetGlobalAudio();
+          try {
+            setIsSpeaking(true);
+            await speak(spokenNarration);
+          } finally {
+            setIsSpeaking(false);
+          }
+        }}
+      />
+    </ActionButton>
+  );
+}