From 4fe17c49e6196c6f01ea0fb4f97f08f769bee653 Mon Sep 17 00:00:00 2001 From: Atai Barkai Date: Sat, 19 Oct 2024 20:17:46 -0700 Subject: [PATCH] core docs: specify all ways of customizing the ui in dedicatd guides --- .../built-in-ui-components.mdx | 9 +++++ .../customize-built-in-ui-components.mdx} | 24 +++++++------ .../custom-look-and-feel/headless-ui.mdx | 35 +++++++++++++++++++ .../guides/custom-look-and-feel/meta.json | 8 +++++ docs/content/docs/(root)/quickstart.mdx | 3 ++ .../docs/coagents/chat-ui/chat-with-agent.mdx | 5 ++- docs/content/docs/coagents/chat-ui/meta.json | 1 + docs/snippets/copilot-ui.mdx | 8 ++--- docs/snippets/headless-ui.mdx | 30 ++++++++++++++++ 9 files changed, 107 insertions(+), 16 deletions(-) create mode 100644 docs/content/docs/(root)/guides/custom-look-and-feel/built-in-ui-components.mdx rename docs/content/docs/(root)/guides/{custom-look-and-feel.mdx => custom-look-and-feel/customize-built-in-ui-components.mdx} (86%) create mode 100644 docs/content/docs/(root)/guides/custom-look-and-feel/headless-ui.mdx create mode 100644 docs/content/docs/(root)/guides/custom-look-and-feel/meta.json create mode 100644 docs/snippets/headless-ui.mdx diff --git a/docs/content/docs/(root)/guides/custom-look-and-feel/built-in-ui-components.mdx b/docs/content/docs/(root)/guides/custom-look-and-feel/built-in-ui-components.mdx new file mode 100644 index 0000000000..60cc05a0f8 --- /dev/null +++ b/docs/content/docs/(root)/guides/custom-look-and-feel/built-in-ui-components.mdx @@ -0,0 +1,9 @@ +--- +title: "Built-in Copilot UI" +description: "An overview of the built-in Copilot UI components." +--- +import ConnectCopilotUI from "@/snippets/copilot-ui.mdx"; + +# Setting up the built-in UI components + + diff --git a/docs/content/docs/(root)/guides/custom-look-and-feel.mdx b/docs/content/docs/(root)/guides/custom-look-and-feel/customize-built-in-ui-components.mdx similarity index 86% rename from docs/content/docs/(root)/guides/custom-look-and-feel.mdx rename to docs/content/docs/(root)/guides/custom-look-and-feel/customize-built-in-ui-components.mdx index 37e94f2ce3..7bf3ad6d7d 100644 --- a/docs/content/docs/(root)/guides/custom-look-and-feel.mdx +++ b/docs/content/docs/(root)/guides/custom-look-and-feel/customize-built-in-ui-components.mdx @@ -1,18 +1,22 @@ --- -title: "Custom Look & Feel" -description: "Learn how to customize the look and feel of CopilotKit in your app." +title: "Customize the built-in components" +description: "Customize the look and feel of the built-in Copilot UI components." --- import { CopilotKitCSS, InteractiveCSSInspector } from "@/components/react/copilotkit-css"; +## CSS Variables + -## CSS Variables -CopilotKit uses CSS variables to make it easay to customize the look and feel of the components. Hover over the interactive UI elements below to see the available CSS variables. +CopilotKit uses CSS variables to make it easay to customize the look and feel of the components.
+Hover over the interactive UI elements below to see the available CSS variables. + + + Hover over the interactive UI elements below to see the available CSS variables. + -## Customize CopilotKit Appearance - You can override / customize the CSS, customize the icons, customize labels, swap out react components, and use headless UI. See below. ### CSS Variables (Easiest) @@ -48,7 +52,7 @@ For example: } ``` -### Custom Icons +## Custom Icons You can customize the icons by passing the `icons` property to the `CopilotSidebar`, `CopilotPopup` or `CopilotChat` component. @@ -64,7 +68,7 @@ Below is a list of customizable icons: - `regenerateIcon`: The icon to use for the regenerate button. - `pushToTalkIcon`: The icon to use for push to talk. -### Custom Labels +## Custom Labels To customize labels, pass the `labels` property to the `CopilotSidebar`, `CopilotPopup` or `CopilotChat` component. @@ -76,7 +80,7 @@ Below is a list of customizable labels: - `stopGenerating`: The label to display on the stop button. - `regenerateResponse`: The label to display on the regenerate button. -### Swapping Out Components +## Swapping Out Components To completely customize the look and feel of CopilotKit, you can swap out the components of the chat window. @@ -129,4 +133,4 @@ export function CustomResponseButton({ onClick, inProgress }: ResponseButtonProp ## Headless UI (Full Customizability) -Finally, as a reminder, CopilotKit also supports [Headless UI]() for full customizability and programmatic control. +Finally, as a reminder, CopilotKit also supports [Headless UI](/guides/custom-look-and-feel/headless-ui) for full customizability and programmatic control. diff --git a/docs/content/docs/(root)/guides/custom-look-and-feel/headless-ui.mdx b/docs/content/docs/(root)/guides/custom-look-and-feel/headless-ui.mdx new file mode 100644 index 0000000000..c7da147bf1 --- /dev/null +++ b/docs/content/docs/(root)/guides/custom-look-and-feel/headless-ui.mdx @@ -0,0 +1,35 @@ +--- +title: "Headless Copilot UI" +description: "Fully customize your Copilot's UI from the ground up using headless UI" +--- + +The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components. + +CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability. + +```tsx +import { useCopilotChat } from "@copilotkit/react-core"; +import { Role, TextMessage } from "@copilotkit/runtime-client-gql"; + +export function CustomChatInterface() { + const { + visibleMessages, + appendMessage, + setMessages, + deleteMessage, + reloadMessages, + stopGeneration, + isLoading, + } = useCopilotChat(); + + const sendMessage = (content: string) => { + appendMessage(new TextMessage({ content, role: Role.User })); + }; + + return ( +
+ {/* Implement your custom chat UI here */} +
+ ); +} +``` \ No newline at end of file diff --git a/docs/content/docs/(root)/guides/custom-look-and-feel/meta.json b/docs/content/docs/(root)/guides/custom-look-and-feel/meta.json new file mode 100644 index 0000000000..bb8c699922 --- /dev/null +++ b/docs/content/docs/(root)/guides/custom-look-and-feel/meta.json @@ -0,0 +1,8 @@ +{ + "title": "Customize Look & Feel", + "pages": [ + "built-in-ui-components", + "customize-built-in-ui-components", + "headless-ui" + ] +} \ No newline at end of file diff --git a/docs/content/docs/(root)/quickstart.mdx b/docs/content/docs/(root)/quickstart.mdx index df0ce26f7b..327f67c5a2 100644 --- a/docs/content/docs/(root)/quickstart.mdx +++ b/docs/content/docs/(root)/quickstart.mdx @@ -32,6 +32,9 @@ import ConnectCopilotUI from "@/snippets/copilot-ui.mdx"; ### Connect Copilot UI + You are almost there! + Now it's time to setup your Copilot UI. + diff --git a/docs/content/docs/coagents/chat-ui/chat-with-agent.mdx b/docs/content/docs/coagents/chat-ui/chat-with-agent.mdx index cfdb2e69be..0f6574935a 100644 --- a/docs/content/docs/coagents/chat-ui/chat-with-agent.mdx +++ b/docs/content/docs/coagents/chat-ui/chat-with-agent.mdx @@ -1,4 +1,7 @@ --- -title: Implementing agent chat +title: Chat with an agent --- +No need to do anything else -- chat with an agent JustWorks! + +You can use any of the built-in Copilot \ No newline at end of file diff --git a/docs/content/docs/coagents/chat-ui/meta.json b/docs/content/docs/coagents/chat-ui/meta.json index f23d7c8da7..3c5194b5a2 100644 --- a/docs/content/docs/coagents/chat-ui/meta.json +++ b/docs/content/docs/coagents/chat-ui/meta.json @@ -1,6 +1,7 @@ { "title": "chat-ui", "pages": [ + "chat-with-agent", "render-agent-state", "hitl" ] diff --git a/docs/snippets/copilot-ui.mdx b/docs/snippets/copilot-ui.mdx index cabbc88bcb..9868fd85f4 100644 --- a/docs/snippets/copilot-ui.mdx +++ b/docs/snippets/copilot-ui.mdx @@ -1,6 +1,5 @@ -You are almost there! -Now it's time to setup your Copilot UI. +import HeadlessUI from "@/snippets/headless-ui.mdx"; First, import the default styles in your root component (typically `layout.tsx`) : @@ -93,8 +92,8 @@ import "@copilotkit/react-ui/styles.css"; The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components. - - CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI can be implemented with the headless UI, providing deep customizability. + + CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability. ```tsx import { useCopilotChat } from "@copilotkit/react-core"; @@ -122,6 +121,5 @@ import "@copilotkit/react-ui/styles.css"; ); } ``` - diff --git a/docs/snippets/headless-ui.mdx b/docs/snippets/headless-ui.mdx new file mode 100644 index 0000000000..28da2ade05 --- /dev/null +++ b/docs/snippets/headless-ui.mdx @@ -0,0 +1,30 @@ +The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components. + +CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability. + +```tsx +import { useCopilotChat } from "@copilotkit/react-core"; +import { Role, TextMessage } from "@copilotkit/runtime-client-gql"; + +export function CustomChatInterface() { + const { + visibleMessages, + appendMessage, + setMessages, + deleteMessage, + reloadMessages, + stopGeneration, + isLoading, + } = useCopilotChat(); + + const sendMessage = (content: string) => { + appendMessage(new TextMessage({ content, role: Role.User })); + }; + + return ( +
+ {/* Implement your custom chat UI here */} +
+ ); +} +``` \ No newline at end of file