with changes

Author: arielweinberger

app/page.tsx

@@ -2,13 +2,17 @@
 
 import { EmailThread } from "@/components/EmailThread";
 import { EmailsProvider } from "@/lib/hooks/use-emails";
+import { CopilotKit } from "@copilotkit/react-core";
+import "@copilotkit/react-textarea/styles.css";
 
 export default function Home() {
   return (
     <div className="h-screen">
-      <EmailsProvider>
-        <EmailThread />
-      </EmailsProvider>
+      <CopilotKit publicApiKey="ck_pub_68042cff5088605d9c8ee8ead7b09c69">
+        <EmailsProvider>
+          <EmailThread />
+        </EmailsProvider>
+      </CopilotKit>
     </div>
   );
 }

components/Reply.tsx

@@ -2,6 +2,7 @@ import { useEmails } from "@/lib/hooks/use-emails";
 import { useState } from "react";
 import { Button } from "./ui/button";
 import { Textarea } from "./ui/textarea";
+import { CopilotTextarea } from "@copilotkit/react-textarea";
 
 export function Reply() {
   const { sendEmail } = useEmails();
@@ -17,7 +18,16 @@ export function Reply() {
 
   return (
     <div className="mt-4 pt-4 space-y-2 bg-background p-4 rounded-md border">
-      <Textarea value={input} onChange={(e) => setInput(e.target.value)} />
+      <CopilotTextarea
+        className="min-h-40 border h-40 p-2 overflow-hidden"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Write your reply..."
+        autosuggestionsConfig={{
+          textareaPurpose: `Asisst me in replying to this email thread. Remember all important details.`,
+          chatApiConfigs: {}
+        }}
+      />
       <Button disabled={!input} onClick={handleReply}>
         Reply
       </Button>

lib/hooks/use-emails.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useState, ReactNode } from "react";
 import { Email } from "../emails.types";
 import emailHistory from "./email-history.json";
+import { useCopilotReadable } from "@copilotkit/react-core";
 
 type EmailsContextType = {
   emails: Email[];
@@ -16,6 +17,11 @@ const EmailsContext = createContext<EmailsContextType | undefined>(undefined);
 export const EmailsProvider = ({ children }: { children: ReactNode }) => {
   const [emails, setEmails] = useState<Email[]>(emailHistory);
 
+  useCopilotReadable({
+    description: "The full history of this email thread",
+    value: emails,
+  });
+
   const sendEmail = ({
     body
   }: {