@agentiffai/design 1.3.11 → 1.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, w as UserMessage, U as UserMessageProps, K as Window, W as WindowProps } from '../Window-BcTRumpc.cjs';
1
+ export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, w as UserMessage, U as UserMessageProps, K as Window, W as WindowProps } from '../Window-pJb3Z5_P.cjs';
2
2
  import { RenderMessageProps, AssistantMessageProps, InputProps, UserMessageProps } from '@copilotkit/react-ui';
3
3
  import * as React$1 from 'react';
4
4
  import React__default, { ReactNode } from 'react';
@@ -1,4 +1,4 @@
1
- export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, w as UserMessage, U as UserMessageProps, K as Window, W as WindowProps } from '../Window-BcTRumpc.js';
1
+ export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, w as UserMessage, U as UserMessageProps, K as Window, W as WindowProps } from '../Window-pJb3Z5_P.js';
2
2
  import { RenderMessageProps, AssistantMessageProps, InputProps, UserMessageProps } from '@copilotkit/react-ui';
3
3
  import * as React$1 from 'react';
4
4
  import React__default, { ReactNode } from 'react';
@@ -1,5 +1,5 @@
1
1
  import { useButton } from '@react-aria/button';
2
- import { memo, useRef, useEffect, useState, useMemo, useCallback } from 'react';
2
+ import { memo, useRef, useEffect, useMemo, useState, useCallback } from 'react';
3
3
  import styled8, { css, keyframes, createGlobalStyle } from 'styled-components';
4
4
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
5
5
  import { useCopilotChat } from '@copilotkit/react-core';
@@ -104,7 +104,9 @@ var tokens = {
104
104
  fontWeight: {
105
105
  regular: 400,
106
106
  medium: 500,
107
- semibold: 600},
107
+ semibold: 600,
108
+ bold: 700
109
+ },
108
110
  lineHeight: {
109
111
  tight: 1.25,
110
112
  normal: 1.5}
@@ -822,6 +824,59 @@ function AssistantThinking({
822
824
  );
823
825
  }
824
826
  AssistantThinking.displayName = "AssistantThinking";
827
+ function parseMarkdown(text) {
828
+ if (!text) return [];
829
+ const elements = [];
830
+ let key = 0;
831
+ const paragraphs = text.split(/\n\n+/);
832
+ paragraphs.forEach((paragraph, pIndex) => {
833
+ if (pIndex > 0) {
834
+ elements.push(/* @__PURE__ */ jsx("br", {}, key++));
835
+ elements.push(/* @__PURE__ */ jsx("br", {}, key++));
836
+ }
837
+ const lines = paragraph.split("\n");
838
+ lines.forEach((line, lineIndex) => {
839
+ if (lineIndex > 0) {
840
+ elements.push(/* @__PURE__ */ jsx("br", {}, key++));
841
+ }
842
+ const parsed = parseInlineMarkdown(line, key);
843
+ elements.push(...parsed.elements);
844
+ key = parsed.nextKey;
845
+ });
846
+ });
847
+ return elements;
848
+ }
849
+ function parseInlineMarkdown(text, startKey) {
850
+ const elements = [];
851
+ let key = startKey;
852
+ const inlineRegex = /(\*\*(.+?)\*\*)|(\*(.+?)\*)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)]+)\))/g;
853
+ let lastIndex = 0;
854
+ let match;
855
+ while ((match = inlineRegex.exec(text)) !== null) {
856
+ if (match.index > lastIndex) {
857
+ elements.push(text.slice(lastIndex, match.index));
858
+ }
859
+ if (match[1]) {
860
+ elements.push(/* @__PURE__ */ jsx("strong", { children: match[2] }, key++));
861
+ } else if (match[3]) {
862
+ elements.push(/* @__PURE__ */ jsx("em", { children: match[4] }, key++));
863
+ } else if (match[5]) {
864
+ elements.push(/* @__PURE__ */ jsx("code", { children: match[6] }, key++));
865
+ } else if (match[7]) {
866
+ elements.push(
867
+ /* @__PURE__ */ jsx("a", { href: match[9], target: "_blank", rel: "noopener noreferrer", children: match[8] }, key++)
868
+ );
869
+ }
870
+ lastIndex = match.index + match[0].length;
871
+ }
872
+ if (lastIndex < text.length) {
873
+ elements.push(text.slice(lastIndex));
874
+ }
875
+ if (elements.length === 0) {
876
+ elements.push(text);
877
+ }
878
+ return { elements, nextKey: key };
879
+ }
825
880
  var Container3 = styled8.div`
826
881
  font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
827
882
  white-space: pre-wrap;
@@ -830,6 +885,33 @@ var Container3 = styled8.div`
830
885
  /* Performance optimizations for streaming text */
831
886
  text-rendering: optimizeSpeed;
832
887
  contain: content;
888
+
889
+ /* Markdown element styles */
890
+ strong {
891
+ font-weight: ${tokens.typography.fontWeight.bold};
892
+ color: ${tokens.colors.text.primary};
893
+ }
894
+
895
+ em {
896
+ font-style: italic;
897
+ }
898
+
899
+ code {
900
+ font-family: ${tokens.typography.fontFamily.monospace};
901
+ background: ${tokens.colors.surface.overlay};
902
+ padding: 0.15em 0.4em;
903
+ border-radius: ${tokens.borderRadius.sm};
904
+ font-size: 0.9em;
905
+ }
906
+
907
+ a {
908
+ color: ${tokens.colors.primary};
909
+ text-decoration: none;
910
+
911
+ &:hover {
912
+ text-decoration: underline;
913
+ }
914
+ }
833
915
  `;
834
916
  var Cursor = styled8.span`
835
917
  display: inline-block;
@@ -874,8 +956,14 @@ var StreamingTextBase = ({
874
956
  wasStreamingRef.current = isStreaming;
875
957
  }, [isStreaming, onStreamComplete]);
876
958
  const showCursor = isStreaming && cursor;
959
+ const renderedContent = useMemo(() => {
960
+ if (variant === "markdown") {
961
+ return parseMarkdown(content);
962
+ }
963
+ return content;
964
+ }, [content, variant]);
877
965
  return /* @__PURE__ */ jsxs(Container3, { $variant: variant, className, children: [
878
- content,
966
+ renderedContent,
879
967
  showCursor && /* @__PURE__ */ jsx(Cursor, {})
880
968
  ] });
881
969
  };
@@ -3640,27 +3728,6 @@ var ActionsContainer3 = styled8.div`
3640
3728
  gap: ${tokens.spacing.xs};
3641
3729
  flex-wrap: wrap;
3642
3730
  `;
3643
- var StreamingIndicator2 = styled8.span`
3644
- display: inline-block;
3645
- width: ${tokens.spacing.xs};
3646
- height: ${tokens.spacing.xs};
3647
- margin-left: ${tokens.spacing.xs};
3648
- background-color: ${tokens.colors.text.tertiary};
3649
- border-radius: ${tokens.borderRadius.full};
3650
- animation: pulse 1.5s ease-in-out infinite;
3651
-
3652
- @keyframes pulse {
3653
- 0%,
3654
- 100% {
3655
- opacity: 0.3;
3656
- transform: scale(0.8);
3657
- }
3658
- 50% {
3659
- opacity: 1;
3660
- transform: scale(1.2);
3661
- }
3662
- }
3663
- `;
3664
3731
  var Avatar3 = styled8.img`
3665
3732
  width: ${tokens.spacing.xl};
3666
3733
  height: ${tokens.spacing.xl};
@@ -3676,15 +3743,21 @@ var UserMessage2 = ({
3676
3743
  avatarUrl,
3677
3744
  username,
3678
3745
  isStreaming = false,
3679
- actions = []
3746
+ actions = [],
3747
+ enableMarkdown = true
3680
3748
  }) => {
3681
3749
  return /* @__PURE__ */ jsxs(StyledUserMessage2, { className, children: [
3682
3750
  /* @__PURE__ */ jsxs(MessageBubble, { children: [
3683
3751
  username && /* @__PURE__ */ jsx("strong", { children: username }),
3684
- /* @__PURE__ */ jsxs(MessageContent2, { children: [
3685
- content,
3686
- isStreaming && /* @__PURE__ */ jsx(StreamingIndicator2, {})
3687
- ] }),
3752
+ /* @__PURE__ */ jsx(MessageContent2, { children: /* @__PURE__ */ jsx(
3753
+ StreamingText2,
3754
+ {
3755
+ content,
3756
+ isStreaming,
3757
+ variant: enableMarkdown ? "markdown" : "default",
3758
+ cursor: false
3759
+ }
3760
+ ) }),
3688
3761
  timestamp && /* @__PURE__ */ jsx(MessageTime2, { children: timestamp }),
3689
3762
  actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton3, { onClick: action.onClick, children: [
3690
3763
  action.icon,