@copilotkit/react-ui 0.22.0 → 0.36.0-mme-pre.1

package/dist/hooks/use-copilot-chat-suggestions.d.ts

@@ -0,0 +1,87 @@
+/**
+ * A hook for providing suggestions to the user in the Copilot chat.
+ *
+ * <Warning>
+ *   useCopilotChatSuggestions is experimental. The interface is not final and
+ *   can change without further notice.
+ * </Warning>
+ *
+ * <img src="/images/useCopilotChatSuggestions/use-copilot-chat-suggestions.gif" width="500" />
+ *
+ * <img referrerPolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be" />
+ *
+ * `useCopilotChatSuggestions` integrates auto-generated chat suggestions into your application in the context of your
+ * app's state. It dynamically manages suggestions based on provided configurations and
+ * dependencies.
+ *
+ * <RequestExample>
+ *   ```jsx useCopilotChatSuggestions Example
+ *   import { useCopilotChatSuggestions }
+ *     from "@copilotkit/react-ui";
+ *
+ *   useCopilotChatSuggestions({
+ *     instructions: "Your instructions for suggestions.",
+ *   })
+ *   ```
+ * </RequestExample>
+ *
+ * ## Basic Setup
+ *
+ * To incorporate this hook into your React components, start by importing it:
+ *
+ * ```tsx
+ * import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
+ * ```
+ *
+ * Then, use it in your component to initiate suggestion functionality:
+ *
+ * ```tsx
+ * useCopilotChatSuggestions({
+ *   instructions: "Your instructions for suggestions.",
+ * });
+ * ```
+ *
+ * ## Dependency Management
+ *
+ * ```tsx
+ * import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
+ *
+ * useCopilotChatSuggestions(
+ *   {
+ *     instructions: "Suggest the most relevant next actions.",
+ *   },
+ *   [appState],
+ * );
+ * ```
+ *
+ * In the example above, the suggestions are generated based on the given instructions.
+ * The hook monitors `appState`, and updates suggestions accordingly whenever it changes.
+ *
+ * ## Behavior and Lifecycle
+ *
+ * The hook registers the configuration with the chat context upon component mount and
+ * removes it on unmount, ensuring a clean and efficient lifecycle management.
+ */
+interface UseCopilotChatSuggestionsConfiguration {
+    /**
+     * A prompt or instructions for the GPT to generate suggestions.
+     */
+    instructions: string;
+    /**
+     * The minimum number of suggestions to generate. Defaults to `1`.
+     * @default 1
+     */
+    minSuggestions?: number;
+    /**
+     * The maximum number of suggestions to generate. Defaults to `3`.
+     * @default 1
+     */
+    maxSuggestions?: number;
+    /**
+     * An optional class name to apply to the suggestions.
+     */
+    className?: string;
+}
+declare function useCopilotChatSuggestions({ instructions, className, minSuggestions, maxSuggestions, }: UseCopilotChatSuggestionsConfiguration, dependencies?: any[]): void;
+
+export { useCopilotChatSuggestions };

package/dist/hooks/use-copilot-chat-suggestions.js

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/use-copilot-chat-suggestions.tsx
+var use_copilot_chat_suggestions_exports = {};
+__export(use_copilot_chat_suggestions_exports, {
+  useCopilotChatSuggestions: () => useCopilotChatSuggestions
+});
+module.exports = __toCommonJS(use_copilot_chat_suggestions_exports);
+var import_react = require("react");
+var import_nanoid = require("nanoid");
+var import_react_core = require("@copilotkit/react-core");
+function useCopilotChatSuggestions({
+  instructions,
+  className,
+  minSuggestions = 1,
+  maxSuggestions = 3
+}, dependencies = []) {
+  const context = (0, import_react_core.useCopilotContext)();
+  (0, import_react.useEffect)(() => {
+    const id = (0, import_nanoid.nanoid)();
+    context.addChatSuggestionConfiguration(id, {
+      instructions,
+      minSuggestions,
+      maxSuggestions,
+      className
+    });
+    return () => {
+      context.removeChatSuggestionConfiguration(id);
+    };
+  }, dependencies);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCopilotChatSuggestions
+});
+//# sourceMappingURL=use-copilot-chat-suggestions.js.map

package/dist/hooks/use-copilot-chat-suggestions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-copilot-chat-suggestions.tsx"],"sourcesContent":["/**\n * A hook for providing suggestions to the user in the Copilot chat.\n *\n * <Warning>\n *   useCopilotChatSuggestions is experimental. The interface is not final and\n *   can change without further notice.\n * </Warning>\n *\n * <img src=\"/images/useCopilotChatSuggestions/use-copilot-chat-suggestions.gif\" width=\"500\" />\n *\n * <img referrerPolicy=\"no-referrer-when-downgrade\" src=\"https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be\" />\n *\n * `useCopilotChatSuggestions` integrates auto-generated chat suggestions into your application in the context of your\n * app's state. It dynamically manages suggestions based on provided configurations and\n * dependencies.\n *\n * <RequestExample>\n *   ```jsx useCopilotChatSuggestions Example\n *   import { useCopilotChatSuggestions }\n *     from \"@copilotkit/react-ui\";\n *\n *   useCopilotChatSuggestions({\n *     instructions: \"Your instructions for suggestions.\",\n *   })\n *   ```\n * </RequestExample>\n *\n * ## Basic Setup\n *\n * To incorporate this hook into your React components, start by importing it:\n *\n * ```tsx\n * import { useCopilotChatSuggestions } from \"@copilotkit/react-ui\";\n * ```\n *\n * Then, use it in your component to initiate suggestion functionality:\n *\n * ```tsx\n * useCopilotChatSuggestions({\n *   instructions: \"Your instructions for suggestions.\",\n * });\n * ```\n *\n * ## Dependency Management\n *\n * ```tsx\n * import { useCopilotChatSuggestions } from \"@copilotkit/react-ui\";\n *\n * useCopilotChatSuggestions(\n *   {\n *     instructions: \"Suggest the most relevant next actions.\",\n *   },\n *   [appState],\n * );\n * ```\n *\n * In the example above, the suggestions are generated based on the given instructions.\n * The hook monitors `appState`, and updates suggestions accordingly whenever it changes.\n *\n * ## Behavior and Lifecycle\n *\n * The hook registers the configuration with the chat context upon component mount and\n * removes it on unmount, ensuring a clean and efficient lifecycle management.\n */\n\nimport { useEffect } from \"react\";\nimport { useChatContext } from \"../components\";\nimport { nanoid } from \"nanoid\";\nimport { CopilotChatSuggestionConfiguration, useCopilotContext } from \"@copilotkit/react-core\";\n\ninterface UseCopilotChatSuggestionsConfiguration {\n  /**\n   * A prompt or instructions for the GPT to generate suggestions.\n   */\n  instructions: string;\n  /**\n   * The minimum number of suggestions to generate. Defaults to `1`.\n   * @default 1\n   */\n  minSuggestions?: number;\n  /**\n   * The maximum number of suggestions to generate. Defaults to `3`.\n   * @default 1\n   */\n  maxSuggestions?: number;\n  /**\n   * An optional class name to apply to the suggestions.\n   */\n  className?: string;\n}\n\nexport function useCopilotChatSuggestions(\n  {\n    instructions,\n    className,\n    minSuggestions = 1,\n    maxSuggestions = 3,\n  }: UseCopilotChatSuggestionsConfiguration,\n  dependencies: any[] = [],\n) {\n  const context = useCopilotContext();\n\n  useEffect(() => {\n    const id = nanoid();\n\n    context.addChatSuggestionConfiguration(id, {\n      instructions,\n      minSuggestions,\n      maxSuggestions,\n      className,\n    });\n\n    return () => {\n      context.removeChatSuggestionConfiguration(id);\n    };\n  }, dependencies);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEA,mBAA0B;AAE1B,oBAAuB;AACvB,wBAAsE;AAuB/D,SAAS,0BACd;AAAA,EACE;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GACA,eAAsB,CAAC,GACvB;AACA,QAAM,cAAU,qCAAkB;AAElC,8BAAU,MAAM;AACd,UAAM,SAAK,sBAAO;AAElB,YAAQ,+BAA+B,IAAI;AAAA,MACzC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,cAAQ,kCAAkC,EAAE;AAAA,IAC9C;AAAA,EACF,GAAG,YAAY;AACjB;","names":[]}

package/dist/hooks/use-copilot-chat-suggestions.mjs

@@ -0,0 +1,8 @@
+import {
+  useCopilotChatSuggestions
+} from "../chunk-LTCJCXCP.mjs";
+import "../chunk-MRXNTQOX.mjs";
+export {
+  useCopilotChatSuggestions
+};
+//# sourceMappingURL=use-copilot-chat-suggestions.mjs.map

package/dist/hooks/use-copilot-chat-suggestions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/hooks/use-push-to-talk.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Message } from '@copilotkit/shared';
+
+declare const checkMicrophonePermission: () => Promise<boolean | undefined>;
+declare const requestMicAndPlaybackPermission: () => Promise<{
+    stream: MediaStream;
+    audioContext: AudioContext;
+} | null>;
+type PushToTalkState = "idle" | "recording" | "transcribing";
+type SendFunction = (text: string) => Promise<Message>;
+declare const usePushToTalk: ({ sendFunction, inProgress, }: {
+    sendFunction: SendFunction;
+    inProgress: boolean;
+}) => {
+    pushToTalkState: PushToTalkState;
+    setPushToTalkState: React.Dispatch<React.SetStateAction<PushToTalkState>>;
+};
+
+export { PushToTalkState, SendFunction, checkMicrophonePermission, requestMicAndPlaybackPermission, usePushToTalk };

package/dist/hooks/use-push-to-talk.js

@@ -0,0 +1,177 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/hooks/use-push-to-talk.tsx
+var use_push_to_talk_exports = {};
+__export(use_push_to_talk_exports, {
+  checkMicrophonePermission: () => checkMicrophonePermission,
+  requestMicAndPlaybackPermission: () => requestMicAndPlaybackPermission,
+  usePushToTalk: () => usePushToTalk
+});
+module.exports = __toCommonJS(use_push_to_talk_exports);
+var import_react_core = require("@copilotkit/react-core");
+var import_react = require("react");
+var checkMicrophonePermission = () => __async(void 0, null, function* () {
+  try {
+    const permissionStatus = yield navigator.permissions.query({
+      name: "microphone"
+    });
+    if (permissionStatus.state === "granted") {
+      return true;
+    } else {
+      return false;
+    }
+  } catch (err) {
+    console.error("Error checking microphone permission", err);
+  }
+});
+var requestMicAndPlaybackPermission = () => __async(void 0, null, function* () {
+  try {
+    const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
+    const audioContext = new window.AudioContext();
+    yield audioContext.resume();
+    return { stream, audioContext };
+  } catch (err) {
+    console.error("Error requesting microphone and playback permissions", err);
+    return null;
+  }
+});
+var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
+  if (!mediaStreamRef.current || !audioContextRef.current) {
+    mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({ audio: true });
+    audioContextRef.current = new window.AudioContext();
+    yield audioContextRef.current.resume();
+  }
+  mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current);
+  mediaRecorderRef.current.start(1e3);
+  mediaRecorderRef.current.ondataavailable = (event) => {
+    recordedChunks.push(event.data);
+  };
+  mediaRecorderRef.current.onstop = onStop;
+});
+var stopRecording = (mediaRecorderRef) => {
+  if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+    mediaRecorderRef.current.stop();
+  }
+};
+var transcribeAudio = (recordedChunks, transcribeAudioUrl) => __async(void 0, null, function* () {
+  const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
+  const formData = new FormData();
+  formData.append("file", completeBlob, "recording.mp4");
+  const response = yield fetch(transcribeAudioUrl, {
+    method: "POST",
+    body: formData
+  });
+  if (!response.ok) {
+    throw new Error(`Error: ${response.statusText}`);
+  }
+  const transcription = yield response.json();
+  return transcription.text;
+});
+var playAudioResponse = (text, textToSpeechUrl, audioContext) => {
+  const encodedText = encodeURIComponent(text);
+  const url = `${textToSpeechUrl}?text=${encodedText}`;
+  fetch(url).then((response) => response.arrayBuffer()).then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer)).then((audioBuffer) => {
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(audioContext.destination);
+    source.start(0);
+  }).catch((error) => {
+    console.error("Error with decoding audio data", error);
+  });
+};
+var usePushToTalk = ({
+  sendFunction,
+  inProgress
+}) => {
+  const [pushToTalkState, setPushToTalkState] = (0, import_react.useState)("idle");
+  const mediaStreamRef = (0, import_react.useRef)(null);
+  const audioContextRef = (0, import_react.useRef)(null);
+  const mediaRecorderRef = (0, import_react.useRef)(null);
+  const recordedChunks = (0, import_react.useRef)([]);
+  const context = (0, import_react_core.useCopilotContext)();
+  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (pushToTalkState === "recording") {
+      startRecording(
+        mediaStreamRef,
+        mediaRecorderRef,
+        audioContextRef,
+        recordedChunks.current,
+        () => {
+          setPushToTalkState("transcribing");
+        }
+      );
+    } else {
+      stopRecording(mediaRecorderRef);
+      if (pushToTalkState === "transcribing") {
+        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl).then(
+          (transcription) => __async(void 0, null, function* () {
+            recordedChunks.current = [];
+            setPushToTalkState("idle");
+            const message = yield sendFunction(transcription);
+            setStartReadingFromMessageId(message.id);
+          })
+        );
+      }
+    }
+    return () => {
+      stopRecording(mediaRecorderRef);
+    };
+  }, [pushToTalkState]);
+  (0, import_react.useEffect)(() => {
+    if (inProgress === false && startReadingFromMessageId) {
+      const lastMessageIndex = context.messages.findIndex(
+        (message) => message.id === startReadingFromMessageId
+      );
+      const messagesAfterLast = context.messages.slice(lastMessageIndex + 1).filter((message) => message.role === "assistant" && message.content);
+      const text = messagesAfterLast.map((message) => message.content).join("\n");
+      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl, audioContextRef.current);
+      setStartReadingFromMessageId(null);
+    }
+  }, [startReadingFromMessageId, inProgress]);
+  return { pushToTalkState, setPushToTalkState };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  checkMicrophonePermission,
+  requestMicAndPlaybackPermission,
+  usePushToTalk
+});
+//# sourceMappingURL=use-push-to-talk.js.map

package/dist/hooks/use-push-to-talk.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-push-to-talk.tsx"],"sourcesContent":["import { CopilotContextParams, useCopilotContext } from \"@copilotkit/react-core\";\nimport { Message } from \"@copilotkit/shared\";\nimport { MutableRefObject, useEffect, useRef, useState } from \"react\";\n\nexport const checkMicrophonePermission = async () => {\n  try {\n    const permissionStatus = await navigator.permissions.query({\n      name: \"microphone\" as PermissionName,\n    });\n    if (permissionStatus.state === \"granted\") {\n      return true;\n    } else {\n      return false;\n    }\n  } catch (err) {\n    console.error(\"Error checking microphone permission\", err);\n  }\n};\n\nexport const requestMicAndPlaybackPermission = async () => {\n  try {\n    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n    const audioContext = new window.AudioContext();\n    await audioContext.resume();\n    return { stream, audioContext };\n  } catch (err) {\n    console.error(\"Error requesting microphone and playback permissions\", err);\n    return null;\n  }\n};\n\nconst startRecording = async (\n  mediaStreamRef: MutableRefObject<MediaStream | null>,\n  mediaRecorderRef: MutableRefObject<MediaRecorder | null>,\n  audioContextRef: MutableRefObject<AudioContext | null>,\n  recordedChunks: Blob[],\n  onStop: () => void,\n) => {\n  if (!mediaStreamRef.current || !audioContextRef.current) {\n    mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });\n    audioContextRef.current = new window.AudioContext();\n    await audioContextRef.current.resume();\n  }\n\n  mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current!);\n  mediaRecorderRef.current.start(1000);\n  mediaRecorderRef.current.ondataavailable = (event) => {\n    recordedChunks.push(event.data);\n  };\n  mediaRecorderRef.current.onstop = onStop;\n};\n\nconst stopRecording = (mediaRecorderRef: MutableRefObject<MediaRecorder | null>) => {\n  if (mediaRecorderRef.current && mediaRecorderRef.current.state !== \"inactive\") {\n    mediaRecorderRef.current.stop();\n  }\n};\n\nconst transcribeAudio = async (recordedChunks: Blob[], transcribeAudioUrl: string) => {\n  const completeBlob = new Blob(recordedChunks, { type: \"audio/mp4\" });\n  const formData = new FormData();\n  formData.append(\"file\", completeBlob, \"recording.mp4\");\n\n  const response = await fetch(transcribeAudioUrl, {\n    method: \"POST\",\n    body: formData,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Error: ${response.statusText}`);\n  }\n\n  const transcription = await response.json();\n  return transcription.text;\n};\n\nconst playAudioResponse = (text: string, textToSpeechUrl: string, audioContext: AudioContext) => {\n  const encodedText = encodeURIComponent(text);\n  const url = `${textToSpeechUrl}?text=${encodedText}`;\n\n  fetch(url)\n    .then((response) => response.arrayBuffer())\n    .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))\n    .then((audioBuffer) => {\n      const source = audioContext.createBufferSource();\n      source.buffer = audioBuffer;\n      source.connect(audioContext.destination);\n      source.start(0);\n    })\n    .catch((error) => {\n      console.error(\"Error with decoding audio data\", error);\n    });\n};\n\nexport type PushToTalkState = \"idle\" | \"recording\" | \"transcribing\";\n\nexport type SendFunction = (text: string) => Promise<Message>;\n\nexport const usePushToTalk = ({\n  sendFunction,\n  inProgress,\n}: {\n  sendFunction: SendFunction;\n  inProgress: boolean;\n}) => {\n  const [pushToTalkState, setPushToTalkState] = useState<PushToTalkState>(\"idle\");\n  const mediaStreamRef = useRef<MediaStream | null>(null);\n  const audioContextRef = useRef<AudioContext | null>(null);\n  const mediaRecorderRef = useRef<MediaRecorder | null>(null);\n  const recordedChunks = useRef<Blob[]>([]);\n  const context = useCopilotContext();\n  const [startReadingFromMessageId, setStartReadingFromMessageId] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (pushToTalkState === \"recording\") {\n      startRecording(\n        mediaStreamRef,\n        mediaRecorderRef,\n        audioContextRef,\n        recordedChunks.current,\n        () => {\n          setPushToTalkState(\"transcribing\");\n        },\n      );\n    } else {\n      stopRecording(mediaRecorderRef);\n      if (pushToTalkState === \"transcribing\") {\n        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl!).then(\n          async (transcription) => {\n            recordedChunks.current = [];\n            setPushToTalkState(\"idle\");\n            const message = await sendFunction(transcription);\n            setStartReadingFromMessageId(message.id);\n          },\n        );\n      }\n    }\n\n    return () => {\n      stopRecording(mediaRecorderRef);\n    };\n  }, [pushToTalkState]);\n\n  useEffect(() => {\n    if (inProgress === false && startReadingFromMessageId) {\n      const lastMessageIndex = context.messages.findIndex(\n        (message) => message.id === startReadingFromMessageId,\n      );\n\n      const messagesAfterLast = context.messages\n        .slice(lastMessageIndex + 1)\n        .filter((message) => message.role === \"assistant\" && message.content);\n\n      const text = messagesAfterLast.map((message) => message.content).join(\"\\n\");\n      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl!, audioContextRef.current!);\n\n      setStartReadingFromMessageId(null);\n    }\n  }, [startReadingFromMessageId, inProgress]);\n\n  return { pushToTalkState, setPushToTalkState };\n};\n"],"mappings":"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","names":[]}

package/dist/hooks/use-push-to-talk.mjs

@@ -0,0 +1,12 @@
+import {
+  checkMicrophonePermission,
+  requestMicAndPlaybackPermission,
+  usePushToTalk
+} from "../chunk-ANO23V2M.mjs";
+import "../chunk-MRXNTQOX.mjs";
+export {
+  checkMicrophonePermission,
+  requestMicAndPlaybackPermission,
+  usePushToTalk
+};
+//# sourceMappingURL=use-push-to-talk.mjs.map

package/dist/hooks/use-push-to-talk.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.css

@@ -202,7 +202,7 @@
 .copilotKitInput {
   border-top: 1px solid var(--copilot-kit-input-separator-color);
   padding-left: 2rem;
-  padding-right: 2.5rem;
+  padding-right: 1rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
   display: flex;
@@ -213,9 +213,7 @@
   border-bottom-right-radius: 0.75rem;
   background-color: var(--copilot-kit-input-background-color);
 }
-.copilotKitInput > button {
-  position: absolute;
-  right: 0.5rem;
+.copilotKitInput > .copilotKitInputControls > button {
   padding: 0.25rem;
   cursor: pointer;
   transition-property: transform;
@@ -239,18 +237,22 @@
   text-shadow: none;
   display: inline-block;
   text-align: center;
+  margin-left: 0.5rem;
 }
-.copilotKitInput > button:not([disabled]) {
+.copilotKitInput > .copilotKitInputControls > button:not([disabled]) {
   color: var(--copilot-kit-input-send-button-color);
 }
-.copilotKitInput > button:not([disabled]):hover {
+.copilotKitInput > .copilotKitInputControls > button:not([disabled]):hover {
   transform: scale(1.1);
 }
-.copilotKitInput > button[disabled] {
+.copilotKitInput > .copilotKitInputControls > button[disabled] {
   color: var(--copilot-kit-input-send-button-disabled-color);
 }
+.copilotKitInputControls {
+  display: flex;
+}
 .copilotKitInput > textarea {
-  width: 100%;
+  flex: 1;
   outline: 2px solid transparent;
   outline-offset: 2px;
   resize: none;
@@ -277,13 +279,18 @@
   color: var(--copilot-kit-input-placeholder-color);
   opacity: 1;
 }
+.copilotKitInput > .copilotKitInputControls > button.copilotKitPushToTalkRecording {
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  animation: copilotKitPulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
 
 /* src/css/messages.css */
 .copilotKitMessages {
   overflow-y: scroll;
   flex: 1;
   padding: 1rem 2rem;
-  padding-bottom: 3rem;
   display: flex;
   flex-direction: column;
   background-color: var(--copilot-kit-messages-background-color);
@@ -335,6 +342,12 @@
 .copilotKitMessage .inProgressLabel {
   margin-left: 10px;
 }
+.copilotKitMessages footer {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
 
 /* src/css/window.css */
 .copilotKitWindow {
@@ -442,10 +455,7 @@
   text-decoration: none;
   text-transform: none;
   white-space: nowrap;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -44px;
+  margin-top: 15px;
 }
 .copilotKitResponseButton:hover {
   filter: brightness(95%);
@@ -568,6 +578,75 @@
   background-color: rgb(55, 55, 58);
 }
 
+/* src/css/suggestions.css */
+.copilotKitMessages footer .suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.copilotKitMessages footer h6 {
+  font-weight: 500;
+  font-size: 0.7rem;
+  margin-bottom: 8px;
+}
+.copilotKitMessages footer .suggestions .suggestion {
+  padding: 8px 12px;
+  font-size: 0.7rem;
+  border-radius: 0.5rem;
+  background: var(--copilot-kit-message-user-background-color);
+  color: var(--copilot-kit-message-user-color);
+}
+.copilotKitMessages footer .suggestions button {
+  transition: transform 0.3s ease;
+}
+.copilotKitMessages footer .suggestions button:not(:disabled):hover {
+  transform: scale(1.05);
+}
+.copilotKitMessages footer .suggestions button:disabled {
+  cursor: wait;
+}
+.copilotKitMessages footer .suggestions button svg {
+  margin-right: 6px;
+}
+
+/* src/css/panel.css */
+.copilotKitPanel {
+  z-index: 30;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  touch-action: manipulation;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.copilotKitPanel svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+.copilotKitPanel .copilotKitMessages {
+  flex-grow: 1;
+}
+
 /* src/styles.css */
 *,
 ::before,
@@ -914,6 +993,12 @@ video {
 .hidden {
   display: none;
 }
+.h-6 {
+  height: 1.5rem;
+}
+.w-6 {
+  width: 1.5rem;
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -929,4 +1014,7 @@ video {
 .underline {
   text-decoration-line: underline;
 }
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 /*# sourceMappingURL=index.css.map */