@convo-lang/convo-lang

import { ConvoIconType } from "./convo-lang-ui-types.js"; /** * The ConvoViewTheme interface defines the class names and icons used by ConvoView and related * components. Most string properties represent CSS class names applied to specific elements and * are commonly used with utility class systems such as Tailwind. */ export interface ConvoViewTheme { /** * Applied to all icons rendered by the default ConvoView UI. */ iconClassName?: string; /** * Applied to buttons that primarily render as icons. */ iconButtonClassName?: string; /** * Applied to the root ConvoView element. */ convoViewClassName?: string; /** * Icon displayed next to user messages. */ userIcon?: ConvoIconType; /** * Icon displayed next to assistant messages. */ assistantIcon?: ConvoIconType; /** * Applied to the user message icon. */ userIconClassName?: string; /** * Applied to the assistant message icon. */ assistantIconClassName?: string; /** * Icon displayed next to system messages. */ systemIcon?: ConvoIconType; /** * Applied to the system message icon. */ systemIconClassName?: string; /** * Applied to markdown-rendered message content. */ markdownClassName?: string; /** * Applied to messages formatted in plain text. */ plainTextClassName?: string; /** * Applied to all message bubbles and custom message components. */ messageClassName?: string; /** * Applied to user message bubbles. */ userMessageClassName?: string; /** * Applied to assistant message bubbles. */ assistantMessageClassName?: string; /** * Applied to result message bubbles such as variable assignments and function/tool results. */ resultMessageClassName?: string; /** * Applied to retrieval augmented generation (RAG) messages. */ ragMessageClassName?: string; /** * Applied to system message bubbles. */ systemMessageClassName?: string; /** * Applied to messages representing function or tool calls. */ callMessageClassName?: string; /** * Applied to function definition messages when shown as bubbles. */ functionMessageClassName?: string; /** * Icon used for function definition messages and function-related content. */ functionIcon?: ConvoIconType; /** * Applied to the function icon. */ functionIconClassName?: string; /** * Applied to suggestion message containers rendered inline in the message list. */ suggestionMessageClassName?: string; /** * Applied to all message rows. Additional row class names are applied based on message role. * Each message row contains a message bubble or custom component. */ rowClassName?: string; /** * Applied to rows containing user messages. */ userRowClassName?: string; /** * Applied to rows containing assistant messages. */ assistantRowClassName?: string; /** * Applied to rows containing result messages. */ resultRowClassName?: string; /** * Applied to rows containing RAG messages. */ ragRowClassName?: string; /** * Applied to rows containing system messages. */ systemRowClassName?: string; /** * Applied to rows containing function or tool call messages. */ callRowClassName?: string; /** * Applied to rows containing function definition messages. */ functionRowClassName?: string; /** * Applied to rows containing suggestion message groups. */ suggestionRowClassName?: string; /** * Applied to rows containing custom rendered components. */ componentRowClassName?: string; /** * Applied to assignment/result message containers that display variable values. */ assignmentMessageClassName?: string; /** * Applied to the container that lists assignment entries. */ assignmentListClassName?: string; /** * Applied to the function call section shown within assignment/result messages. */ assignmentFunctionCallClassName?: string; /** * Applied to streaming function call containers shown within assignment/result messages. */ assignmentStreamingFunctionCallClassName?: string; /** * Applied to token count text for streaming assignment function calls. */ assignmentStreamingFunctionTokenCountCallClassName?: string; /** * Applied to individual assignment value entries. */ assignmentValueClassName?: string; /** * Applied to the icon displayed with assignment/result messages. */ assignmentIconClassName?: string; /** * Icon displayed with assignment/result messages. */ assignmentIcon?: ConvoIconType; /** * Applied to the container that displays assignment values in a bounded window. */ assignmentWindowClassName?: string; /** * Applied to rendered images inside messages. */ imageClassName?: string; /** * Applied to images shown in user messages. */ userImageClassName?: string; /** * Applied to images shown in assistant messages. */ assistantImageClassName?: string; /** * Applied to the container that displays suggestions inline with messages. The container is * rendered in a message row. */ suggestionContainerClassName?: string; /** * Applied to suggestion group title text. */ suggestionTitleClassName?: string; /** * Applied to the container that wraps a suggestion title and icon. */ suggestionTitleContainerClassName?: string; /** * Icon displayed next to suggestion group titles. */ suggestionTitleIcon?: ConvoIconType; /** * Applied to the suggestion title icon. */ suggestionTitleIconClassName?: string; /** * Applied to inline suggestion buttons. */ suggestionButtonClassName?: string; /** * Icon displayed at the start of suggestion buttons. */ suggestionButtonIcon?: ConvoIconType; /** * Icon displayed at the end of suggestion buttons. */ suggestionButtonEndIcon?: ConvoIconType; /** * Applied to icons rendered inside suggestion buttons. */ suggestionButtonIconClassName?: string; /** * Applied to the container that wraps the list of conversation messages. */ messageListContainerClassName?: string; /** * Applied to the element that contains all message rows or the element wrapping the scroll view * when scrolling is enabled. */ messageListClassName?: string; /** * Applied in addition to messageListContainerClassName when scrolling is disabled. */ messageListContainerScrollDisabledClassName?: string; /** * Applied to the scroll view that contains the message rows. */ scrollViewClassName?: string; /** * Applied to the element that directly contains the message rows inside the scroll view. */ scrollContentClassName?: string; /** * Applied to the row containing the status or loading indicator while awaiting responses. */ statusIndicatorRowClassName?: string; /** * Icon used as the default loading indicator. */ loaderIcon?: ConvoIconType; /** * Applied to the loader icon. */ loaderIconClassName?: string; /** * Applied to each suggestion button displayed above or below the chat input. */ inputSuggestionButtonClassName?: string; /** * Applied to the outer container of the input component. */ inputContainerClassName?: string; /** * Applied to the text input or textarea element. */ inputClassName?: string; /** * Applied to the wrapper around the input element. */ inputClassWrapperName?: string; /** * Applied to the input element when it is ready to submit. */ inputReadyClassName?: string; /** * Applied to the input container when the input is ready to submit. */ inputContainerReadyClassName?: string; /** * Applied to the main content row inside the input container. */ inputMainContentClassName?: string; /** * Applied to the input submit button. */ inputSubmitButtonClassName?: string; /** * Applied to the input submit button when the input is ready to submit or live mode can be * started. */ inputSubmitReadyButtonClassName?: string; /** * Icon displayed by the submit button. */ inputSubmitButtonIcon?: ConvoIconType; /** * Applied to the submit button icon. */ inputSubmitButtonIconClassName?: string; /** * Applied to the container that displays attached media previews. */ inputImageContainerClassName?: string; /** * Applied to the preview image for an attached image. */ inputImageClassName?: string; /** * Applied to the button used to remove an attached image. */ inputImageRemoveButton?: string; /** * Icon displayed in the attached image remove button. */ inputImageRemoveButtonIcon?: ConvoIconType; /** * Applied to the attached image remove button icon. */ inputImageRemoveButtonIconClassName?: string; /** * Applied to the button used to start or stop audio recording. */ inputAudioRecorderButtonClassName?: string; /** * Applied to the button used to cancel recording or stop live mode. */ inputAudioRecorderCancelButtonClassName?: string; /** * Icon displayed on the audio recorder button before recording starts. */ inputAudioRecorderButtonIcon?: ConvoIconType; /** * Applied to the primary audio recorder button icon. */ inputAudioRecorderButtonIconClassName?: string; /** * Icon displayed on the audio recorder button when submitting a recording. */ inputAudioRecorderSubmitButtonIcon?: ConvoIconType; /** * Applied to the submit-recording icon. */ inputAudioRecorderSubmitButtonIconClassName?: string; /** * Icon displayed on the button used to cancel a recording. */ inputAudioRecorderCancelButtonIcon?: ConvoIconType; /** * Applied to the recording cancel button icon. */ inputAudioRecorderCancelButtonIconClassName?: string; /** * Icon displayed on the button used to stop live mode recording. */ inputAudioRecorderStopLiveButtonIcon?: ConvoIconType; /** * Applied to the live mode stop button icon. */ inputAudioRecorderStopLiveButtonIconClassName?: string; /** * Icon displayed while live transcription is active. */ inputAudioRecorderLiveTranscribeIcon?: ConvoIconType; /** * Applied to the live transcription icon. */ inputAudioRecorderLiveTranscribeIconClassName?: string; /** * Applied to the container that centers the live transcription icon over the stop button. */ inputAudioRecorderLiveTranscribeIconContainerClassName?: string; /** * Icon displayed by the submit button when it is being used to start live mode. */ inputLiveModeButtonIcon?: ConvoIconType; /** * Applied to the button used to enter live mode. */ inputLiveModeButtonClassName?: string; /** * Applied to the canvas used to render the recording visualizer. */ inputRecordingVisualizerCanvasClassName?: string; /** * Applied to the overlay container that displays input status messages such as transcription. */ inputMessageContainerClassName?: string; /** * Icon displayed while transcription is in progress. */ inputTranscribeIcon?: ConvoIconType; /** * Applied to the transcription progress icon. */ inputTranscribeIconClassName?: string; /** * CSS variable name used by the audio visualizer for the active speaking color. */ inputLiveModeVisualizerActiveVarName?: string; /** * Applied to the text input when attachments are enabled. */ inputAttachmentEnabledClassName?: string; /** * Applied to the container that displays attached files or images. */ inputAttachmentsContainer?: string; /** * Applied to the input container when attachments are enabled. */ inputContainerAttachmentEnabledClassName?: string; /** * Applied to the attachment button. */ inputAttachmentButton?: string; /** * Icon displayed by the attachment button. */ inputAttachmentButtonIcon?: ConvoIconType; /** * Applied to the attachment button icon. */ inputAttachmentButtonIconClassName?: string; /** * Applied to the invisible file input overlay used by the default attachment picker. */ inputAttachmentInputOverlay?: string; /** * Applied to the container rendered before the input row. */ beforeInputContainerClassName?: string; /** * Applied to the container rendered after the input row. */ afterInputContainerClassName?: string; /** * Applied to the model selector dropdown. */ modelSelectorClassName?: string; /** * Applied to the container that contains the input and related UI such as input suggestions. */ inputAreaClassName?: string; /** * Applied to task status containers. */ taskClassName?: string; /** * Applied to task name text. */ taskNameClassName?: string; /** * Applied to task names when rendered as links. */ taskLinkClassName?: string; /** * Applied to task progress bars. */ taskProgressBarClassName?: string; /** * Applied to task status text. */ taskStatusClassName?: string; /** * Applied to the main row containing task name and loader. */ taskRowClassName?: string; /** * Applied to the container that renders a function or tool call. */ functionCallClassName?: string; /** * Applied when a function call is expanded. */ functionCallOpenClassName?: string; /** * Applied to the compact function argument preview. */ functionCallArgsClassName?: string; /** * Applied to the expanded function argument view. */ functionCallArgsOpenClassName?: string; /** * Applied to the token count text shown under a function call. */ functionCallTokensClassName?: string; /** * Icon displayed with function or tool call messages. */ functionCallIcon?: ConvoIconType; /** * Applied to the function call icon. */ functionCallIconClassName?: string; /** * Maximum number of characters shown in the compact function argument preview before truncation. */ functionCallMaxArgsCharLength?: number; /** * Applied to the header row shown when a function call is expanded. */ functionCallOpenHeaderClassName?: string; /** * Applied to the button used to collapse an expanded function call. */ functionCallCollapseButtonClassName?: string; /** * Icon displayed by the collapse button for function calls. */ functionCallCollapseIcon?: ConvoIconType; /** * Applied to the function call collapse icon. */ functionCallCollapseIconClassName?: string; /** * Applied to the button used to toggle JSON formatting for function arguments. */ functionCallJsonButtonClassName?: string; /** * Icon displayed by the JSON toggle button. */ functionCallJsonIcon?: ConvoIconType; /** * Applied to the function call JSON icon. */ functionCallJsonIconClassName?: string; /** * Icon displayed with RAG messages. */ ragIcon?: ConvoIconType; /** * Applied to the RAG icon. */ ragIconClassName?: string; /** * Applied to the outer container of the source view. */ sourceViewContainerClassName?: string; /** * Applied in addition to sourceViewContainerClassName when source view scrolling is disabled. */ sourceViewContainerScrollDisabledClassName?: string; /** * Applied to the scroll view used in source mode. */ sourceViewScrollViewClassName?: string; /** * Applied to the busy/loading indicator container shown over the source view. */ sourceViewBusyContainer?: string; /** * Applied to the submit button shown in source mode. */ sourceViewSubmitButtonClassName?: string; /** * Applied to the shortcut hint displayed inside the source submit button. */ sourceViewSubmitButtonShortcutClassName?: string; /** * Applied to the code editor component used in source mode. */ sourceViewClassName?: string; /** * Applied to the textarea element used by the source editor. */ sourceViewTextareaClassName?: string; /** * Applied to source editor error regions or error styling. */ sourceViewErrorClassName?: string; /** * Applied to source editor error messages. */ sourceViewErrorMessageClassName?: string; /** * Applied to highlighted source editor error ranges. */ sourceViewErrorHighlightMessageClassName?: string; /** * Applied to source editor line numbers. */ sourceViewLineNumberClassName?: string; }