Reference
UIKit
Copilot

Copilot component

<wy-copilot> | WyCopilot

The copilot component renders a complete and functional user interface for a contextual AI agent chat. It needs to be configured with an AI agent and can have instructions and use any contextual data you provide (as long as it's a string).

The copilot chat is agent-to-user which means each user has their own chat with the agent. Each time the chat is loaded a fresh chat is started. It can optionally be configured with a uid to persist the conversation. The uid needs to be unique to each user and each agent (if you intend to use several agents). You can make a uid with automatically appended user and agent by using the autoUid property instead, which generates a value for the uid property.

Importing

If you installed the UIKit with npm you can use the following snippet to import the component into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

import { WyCopilot } from "@weavy/uikit-web";

Examples

Generic copilot

The agent name is required and should correspond to any configured AI agent you have. You may switch between different agents whenever you like, but remember that the conversation also changes.

Here we use the built-in assistant AI agent.

<wy-copilot agent="assistant"></wy-copilot>

It's optional to provide a uid and in many cases not needed. When using a uid it's often useful to base the uid on something that identifies the location where the component is rendered. Typically you would use something like a product id, page id, path or URL.

Copilot with instructions and contextual data

<div id="my-sample-content">
  <h1>ACME</h1>
  <ul>
    <li>Wile E. Coyote</li>
    <li>Daffy Duck</li>
    <li>Porky Pig</li>
  </ul>
</div>

<wy-copilot id="my-copilot" agent="assistant"></wy-copilot>

<script>
  const copilot = document.querySelector("#my-copilot");
  const sampleContent = document.querySelector("#my-sample-content");

  copilot.instructions = "Answer in a whacky way with many emojis.";
  copilot.data = [sampleContent.innerHTML];
</script>

Copilot with a custom button and suggestions

You may use slots to provide custom functionality to the copilot. This example shows a button to reset the conversation and some custom suggestions.

When the suggestions have the .suggestion class, they automatically get their text inserted into the editor when clicked.

In this example we use the pre-styled weavy sub components, but you may use any elements or components you like.

<wy-copilot id="my-copilot" agent="assistant">
  <wy-button
    slot="actions"
    kind="icon"
    onclick="document.querySelector('#my-copilot').reset()"
  >
    <wy-icon name="stars"></wy-icon>
  </wy-button>

  <wy-button slot="suggestion-list" class="suggestion"
    >Summarize this page</wy-button
  >
  <wy-button slot="suggestion-list" class="suggestion"
    >What keywords are used?</wy-button
  >
</wy-copilot>

All Weavy sub components can be found by importing WeavyComponents from the UI Kit.

Properties

Most properties are optional and/or has sensible default values. Required properties are indicated with an asterisk (*).

Property	Type	Description
`agent`*	`string`	The configured uid of the AI agent.
`autoUid`	`string`	Sets the `uid` property with automatically appended user and agent name.
`data`	`string[]`	Array with any contextual data. The data is uploaded upon change. Note: Only the first item in the array is currently used.
`features`	`string`	Explicit space separated list of enabled features. All default features are enabled when this property is not defined.
`instructions`	`string`	Any specific instructions for the agent. Overrides any pre configured agent instructions.
`name`	`string`	Optional display name for the app (used in notifications etc.)
`notifications`	`"button-list", "none"`	Set the appearance of notifications. Defaults to `"button-list"`.
`notificationsBadge`	`"count", "dot", "none"`	Set the appearance of the notification badge. Defaults to `"count"`.
`placeholder`	`string`	Placeholder text for the editor. Overrides default text.
`reactions`	`string`	Space separated string of unicode emojis to use for reactions. Defaults to reactions from the `Weavy` instance or `<wy-context>`.
`uid`	`string`	Optional unique identifier for the app, to persist the conversation. The uid should be unique per agent and user.

Learn more about attributes and properties.

Available features

Features that are available but disabled by default are indicated by parenthesis ().

Feature	Description
(`attachments`)	Possibility to upload local files. The support for files may be restricted by the agent provider.
`context_data`	Possibility to upload contextual data.
`embeds`	Creating embeds from urls in editor text.
(`mentions`)	Possibility to mention other people from the current directory in the editor.
`previews`	Previews of files and attachments.
(`reactions`)	Possibility to add emoji reactions to a message, post or comment. This has currently no effect on the agent.
`typing`	Typing indicators in the chat when the agent types.

Events

Name	Type	Description
`wy-app`	`WyAppEventType`	Emitted when the app changes.
`wy-message`	`WyMessageEventType`	Emitted when a message is received.
`wy-link`	`WyLinkEventType`	Emitted when a notification is clicked.
`wy-preview-open`	`WyPreviewOpenEventType`	Emitted when preview is about to be opened. The event may be prevented.
`wy-preview-close`	`WyPreviewCloseEventType`	Emitted when preview is closed.

Learn more about events.

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

actions - Floating buttons placed in the top right.
empty - All the content for the empty state.
- header - Header for the empty state.
  - icon - Display icon in the header.
- suggestions - Suggestion content.
  - suggestion-list - Items for the list in the suggestion content.
- footer - Footer for the empty state.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

wy-copilot:not(:defined) {
  display: none;
}

Methods

The component exposes the following methods.

setSuggestion(text: string)

Sets the editor input to a suggested text. This replaces the text content of the editor. This can be used to create any custom suggestions.

reset()

This resets the app/conversation. I sets the component to it's initial state and clears the conversation when is not persistent (when no uid is used).