@copilotkit/react-ui 1.7.2-next.2 → 1.8.0-next.4

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.
Files changed (162) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/{chunk-CBBFRI3Q.mjs → chunk-5JY5QJ2W.mjs} +9 -5
  3. package/dist/chunk-5JY5QJ2W.mjs.map +1 -0
  4. package/dist/{chunk-OFYI4UU4.mjs → chunk-7RIBDD4K.mjs} +19 -3
  5. package/dist/chunk-7RIBDD4K.mjs.map +1 -0
  6. package/dist/{chunk-AELKLZSG.mjs → chunk-AIR3MXUU.mjs} +12 -12
  7. package/dist/{chunk-YAGE7RCE.mjs → chunk-CGVOCLHN.mjs} +2 -2
  8. package/dist/{chunk-DLG7BZTA.mjs → chunk-CZUP2N4J.mjs} +2 -2
  9. package/dist/chunk-FBYETUFL.mjs +118 -0
  10. package/dist/chunk-FBYETUFL.mjs.map +1 -0
  11. package/dist/chunk-GIPO7UB2.mjs +24 -0
  12. package/dist/chunk-GIPO7UB2.mjs.map +1 -0
  13. package/dist/{chunk-6FTRYYR5.mjs → chunk-GJME6MK4.mjs} +72 -62
  14. package/dist/chunk-GJME6MK4.mjs.map +1 -0
  15. package/dist/{chunk-QXQDIFOC.mjs → chunk-H24B7QWO.mjs} +49 -38
  16. package/dist/chunk-H24B7QWO.mjs.map +1 -0
  17. package/dist/{chunk-QXTRFMPM.mjs → chunk-LYHZXHTJ.mjs} +15 -12
  18. package/dist/chunk-LYHZXHTJ.mjs.map +1 -0
  19. package/dist/chunk-ORSMX3SE.mjs +244 -0
  20. package/dist/chunk-ORSMX3SE.mjs.map +1 -0
  21. package/dist/{chunk-UPTB2MVO.mjs → chunk-PCTCOQK2.mjs} +4 -10
  22. package/dist/chunk-PCTCOQK2.mjs.map +1 -0
  23. package/dist/{chunk-ZIF5JJCH.mjs → chunk-QQ4FBIGN.mjs} +30 -59
  24. package/dist/chunk-QQ4FBIGN.mjs.map +1 -0
  25. package/dist/{chunk-R2O33F44.mjs → chunk-TFIQA2P5.mjs} +2 -2
  26. package/dist/{chunk-WGAZXTUA.mjs → chunk-TOQ7P4DO.mjs} +6 -9
  27. package/dist/chunk-TOQ7P4DO.mjs.map +1 -0
  28. package/dist/{chunk-3XAXY2Z3.mjs → chunk-UZTZXMYS.mjs} +2 -2
  29. package/dist/{chunk-RQNJNK2W.mjs → chunk-VC4NO5QZ.mjs} +2 -2
  30. package/dist/{chunk-YQ3D5IQV.mjs → chunk-XNQO5AZZ.mjs} +2 -5
  31. package/dist/chunk-XNQO5AZZ.mjs.map +1 -0
  32. package/dist/chunk-YC4NBUGE.mjs +97 -0
  33. package/dist/chunk-YC4NBUGE.mjs.map +1 -0
  34. package/dist/components/chat/Button.js.map +1 -1
  35. package/dist/components/chat/Button.mjs +3 -3
  36. package/dist/components/chat/Chat.d.ts +17 -1
  37. package/dist/components/chat/Chat.js +380 -906
  38. package/dist/components/chat/Chat.js.map +1 -1
  39. package/dist/components/chat/Chat.mjs +11 -18
  40. package/dist/components/chat/ChatContext.d.ts +20 -0
  41. package/dist/components/chat/ChatContext.js +44 -74
  42. package/dist/components/chat/ChatContext.js.map +1 -1
  43. package/dist/components/chat/ChatContext.mjs +2 -2
  44. package/dist/components/chat/CodeBlock.js +58 -82
  45. package/dist/components/chat/CodeBlock.js.map +1 -1
  46. package/dist/components/chat/CodeBlock.mjs +2 -2
  47. package/dist/components/chat/Header.js +516 -4
  48. package/dist/components/chat/Header.js.map +1 -1
  49. package/dist/components/chat/Header.mjs +10 -3
  50. package/dist/components/chat/Icons.d.ts +10 -9
  51. package/dist/components/chat/Icons.js +125 -164
  52. package/dist/components/chat/Icons.js.map +1 -1
  53. package/dist/components/chat/Icons.mjs +9 -5
  54. package/dist/components/chat/Input.d.ts +1 -1
  55. package/dist/components/chat/Input.js +13 -10
  56. package/dist/components/chat/Input.js.map +1 -1
  57. package/dist/components/chat/Input.mjs +3 -3
  58. package/dist/components/chat/Markdown.js +58 -56
  59. package/dist/components/chat/Markdown.js.map +1 -1
  60. package/dist/components/chat/Markdown.mjs +3 -3
  61. package/dist/components/chat/Messages.d.ts +1 -1
  62. package/dist/components/chat/Messages.js +70 -60
  63. package/dist/components/chat/Messages.js.map +1 -1
  64. package/dist/components/chat/Messages.mjs +3 -3
  65. package/dist/components/chat/Modal.js +1709 -1749
  66. package/dist/components/chat/Modal.js.map +1 -1
  67. package/dist/components/chat/Modal.mjs +20 -20
  68. package/dist/components/chat/Popup.js +1709 -1749
  69. package/dist/components/chat/Popup.js.map +1 -1
  70. package/dist/components/chat/Popup.mjs +21 -21
  71. package/dist/components/chat/Response.js.map +1 -1
  72. package/dist/components/chat/Response.mjs +3 -3
  73. package/dist/components/chat/Sidebar.js +1711 -1751
  74. package/dist/components/chat/Sidebar.js.map +1 -1
  75. package/dist/components/chat/Sidebar.mjs +21 -21
  76. package/dist/components/chat/Suggestion.js +4 -40
  77. package/dist/components/chat/Suggestion.js.map +1 -1
  78. package/dist/components/chat/Suggestion.mjs +2 -2
  79. package/dist/components/chat/Window.js.map +1 -1
  80. package/dist/components/chat/Window.mjs +3 -3
  81. package/dist/components/chat/index.js +1711 -1751
  82. package/dist/components/chat/index.js.map +1 -1
  83. package/dist/components/chat/index.mjs +24 -24
  84. package/dist/components/chat/messages/AssistantMessage.js +211 -59
  85. package/dist/components/chat/messages/AssistantMessage.js.map +1 -1
  86. package/dist/components/chat/messages/AssistantMessage.mjs +5 -5
  87. package/dist/components/chat/messages/RenderTextMessage.js +18 -2
  88. package/dist/components/chat/messages/RenderTextMessage.js.map +1 -1
  89. package/dist/components/chat/messages/RenderTextMessage.mjs +1 -1
  90. package/dist/components/chat/props.d.ts +53 -0
  91. package/dist/components/chat/props.js.map +1 -1
  92. package/dist/components/crew/index.mjs +1 -1
  93. package/dist/components/dev-console/console.js +51 -233
  94. package/dist/components/dev-console/console.js.map +1 -1
  95. package/dist/components/dev-console/console.mjs +5 -5
  96. package/dist/components/dev-console/index.js +51 -233
  97. package/dist/components/dev-console/index.js.map +1 -1
  98. package/dist/components/dev-console/index.mjs +5 -5
  99. package/dist/components/help-modal/index.js +29 -147
  100. package/dist/components/help-modal/index.js.map +1 -1
  101. package/dist/components/help-modal/index.mjs +1 -1
  102. package/dist/components/help-modal/modal.js +29 -147
  103. package/dist/components/help-modal/modal.js.map +1 -1
  104. package/dist/components/help-modal/modal.mjs +1 -1
  105. package/dist/components/index.js +1685 -1725
  106. package/dist/components/index.js.map +1 -1
  107. package/dist/components/index.mjs +30 -30
  108. package/dist/index.css +266 -98
  109. package/dist/index.css.map +1 -1
  110. package/dist/index.js +1694 -1734
  111. package/dist/index.js.map +1 -1
  112. package/dist/index.mjs +30 -30
  113. package/dist/types/css.d.ts +6 -5
  114. package/dist/types/css.js.map +1 -1
  115. package/package.json +4 -4
  116. package/src/components/chat/Chat.tsx +59 -22
  117. package/src/components/chat/ChatContext.tsx +29 -1
  118. package/src/components/chat/CodeBlock.tsx +2 -4
  119. package/src/components/chat/Header.tsx +8 -3
  120. package/src/components/chat/Icons.tsx +108 -108
  121. package/src/components/chat/Input.tsx +47 -38
  122. package/src/components/chat/Markdown.tsx +0 -3
  123. package/src/components/chat/Messages.tsx +68 -56
  124. package/src/components/chat/Suggestion.tsx +2 -3
  125. package/src/components/chat/messages/AssistantMessage.tsx +95 -3
  126. package/src/components/chat/messages/RenderTextMessage.tsx +17 -1
  127. package/src/components/chat/props.ts +66 -0
  128. package/src/components/dev-console/console.tsx +16 -54
  129. package/src/components/help-modal/modal.tsx +38 -101
  130. package/src/css/button.css +15 -4
  131. package/src/css/colors.css +56 -10
  132. package/src/css/console.css +46 -39
  133. package/src/css/header.css +23 -6
  134. package/src/css/input.css +35 -19
  135. package/src/css/markdown.css +2 -1
  136. package/src/css/messages.css +126 -16
  137. package/src/css/panel.css +1 -0
  138. package/src/css/suggestions.css +14 -6
  139. package/src/types/css.ts +6 -5
  140. package/dist/chunk-3VNMQWGT.mjs +0 -25
  141. package/dist/chunk-3VNMQWGT.mjs.map +0 -1
  142. package/dist/chunk-6FTRYYR5.mjs.map +0 -1
  143. package/dist/chunk-CBBFRI3Q.mjs.map +0 -1
  144. package/dist/chunk-FZC7X5PK.mjs +0 -262
  145. package/dist/chunk-FZC7X5PK.mjs.map +0 -1
  146. package/dist/chunk-OFYI4UU4.mjs.map +0 -1
  147. package/dist/chunk-QXQDIFOC.mjs.map +0 -1
  148. package/dist/chunk-QXTRFMPM.mjs.map +0 -1
  149. package/dist/chunk-TI7SY2RI.mjs +0 -164
  150. package/dist/chunk-TI7SY2RI.mjs.map +0 -1
  151. package/dist/chunk-UPTB2MVO.mjs.map +0 -1
  152. package/dist/chunk-VEC45H6Q.mjs +0 -18
  153. package/dist/chunk-VEC45H6Q.mjs.map +0 -1
  154. package/dist/chunk-WGAZXTUA.mjs.map +0 -1
  155. package/dist/chunk-YQ3D5IQV.mjs.map +0 -1
  156. package/dist/chunk-ZIF5JJCH.mjs.map +0 -1
  157. /package/dist/{chunk-AELKLZSG.mjs.map → chunk-AIR3MXUU.mjs.map} +0 -0
  158. /package/dist/{chunk-YAGE7RCE.mjs.map → chunk-CGVOCLHN.mjs.map} +0 -0
  159. /package/dist/{chunk-DLG7BZTA.mjs.map → chunk-CZUP2N4J.mjs.map} +0 -0
  160. /package/dist/{chunk-R2O33F44.mjs.map → chunk-TFIQA2P5.mjs.map} +0 -0
  161. /package/dist/{chunk-3XAXY2Z3.mjs.map → chunk-UZTZXMYS.mjs.map} +0 -0
  162. /package/dist/{chunk-RQNJNK2W.mjs.map → chunk-VC4NO5QZ.mjs.map} +0 -0
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  AssistantMessage
3
- } from "./chunk-3VNMQWGT.mjs";
3
+ } from "./chunk-FBYETUFL.mjs";
4
4
  import {
5
5
  RenderActionExecutionMessage
6
6
  } from "./chunk-XB6QCUPB.mjs";
@@ -12,30 +12,27 @@ import {
12
12
  } from "./chunk-WEYDZBT7.mjs";
13
13
  import {
14
14
  RenderTextMessage
15
- } from "./chunk-OFYI4UU4.mjs";
15
+ } from "./chunk-7RIBDD4K.mjs";
16
16
  import {
17
17
  UserMessage
18
18
  } from "./chunk-HEIDCT7I.mjs";
19
19
  import {
20
- CopilotDevConsole
21
- } from "./chunk-ZIF5JJCH.mjs";
20
+ ResponseButton
21
+ } from "./chunk-UZTZXMYS.mjs";
22
22
  import {
23
23
  Suggestion,
24
24
  reloadSuggestions
25
- } from "./chunk-WGAZXTUA.mjs";
25
+ } from "./chunk-TOQ7P4DO.mjs";
26
26
  import {
27
27
  Input
28
- } from "./chunk-QXTRFMPM.mjs";
28
+ } from "./chunk-LYHZXHTJ.mjs";
29
29
  import {
30
30
  Messages
31
- } from "./chunk-6FTRYYR5.mjs";
32
- import {
33
- ResponseButton
34
- } from "./chunk-3XAXY2Z3.mjs";
31
+ } from "./chunk-GJME6MK4.mjs";
35
32
  import {
36
33
  ChatContext,
37
34
  ChatContextProvider
38
- } from "./chunk-CBBFRI3Q.mjs";
35
+ } from "./chunk-5JY5QJ2W.mjs";
39
36
  import {
40
37
  __async,
41
38
  __spreadProps,
@@ -61,6 +58,10 @@ function CopilotChat({
61
58
  onInProgress,
62
59
  onStopGeneration,
63
60
  onReloadMessages,
61
+ onRegenerate,
62
+ onCopy,
63
+ onThumbsUp,
64
+ onThumbsDown,
64
65
  Messages: Messages2 = Messages,
65
66
  RenderTextMessage: RenderTextMessage2 = RenderTextMessage,
66
67
  RenderActionExecutionMessage: RenderActionExecutionMessage2 = RenderActionExecutionMessage,
@@ -104,9 +105,19 @@ function CopilotChat({
104
105
  );
105
106
  const chatContext = React.useContext(ChatContext);
106
107
  const isVisible = chatContext ? chatContext.open : true;
108
+ const handleRegenerate = () => {
109
+ if (onRegenerate) {
110
+ onRegenerate();
111
+ }
112
+ reloadMessages();
113
+ };
114
+ const handleCopy = (message) => {
115
+ if (onCopy) {
116
+ onCopy(message);
117
+ }
118
+ };
107
119
  return /* @__PURE__ */ jsxs(WrappedCopilotChat, { icons, labels, className, children: [
108
- /* @__PURE__ */ jsx(CopilotDevConsole, {}),
109
- /* @__PURE__ */ jsxs(
120
+ /* @__PURE__ */ jsx(
110
121
  Messages2,
111
122
  {
112
123
  AssistantMessage: AssistantMessage2,
@@ -117,32 +128,32 @@ function CopilotChat({
117
128
  RenderResultMessage: RenderResultMessage2,
118
129
  messages: visibleMessages,
119
130
  inProgress: isLoading,
120
- children: [
121
- currentSuggestions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
122
- /* @__PURE__ */ jsx("h6", { children: "Suggested:" }),
123
- /* @__PURE__ */ jsx("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
124
- Suggestion,
125
- {
126
- title: suggestion.title,
127
- message: suggestion.message,
128
- partial: suggestion.partial,
129
- className: suggestion.className,
130
- onClick: (message) => sendMessage(message)
131
- },
132
- index
133
- )) })
134
- ] }),
135
- showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ jsx(
136
- ResponseButton2,
137
- {
138
- onClick: isLoading ? stopGeneration : reloadMessages,
139
- inProgress: isLoading
140
- }
141
- )
142
- ]
131
+ onRegenerate: handleRegenerate,
132
+ onCopy: handleCopy,
133
+ onThumbsUp,
134
+ onThumbsDown,
135
+ children: currentSuggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
136
+ Suggestion,
137
+ {
138
+ title: suggestion.title,
139
+ message: suggestion.message,
140
+ partial: suggestion.partial,
141
+ className: suggestion.className,
142
+ onClick: (message) => sendMessage(message)
143
+ },
144
+ index
145
+ )) })
143
146
  }
144
147
  ),
145
- /* @__PURE__ */ jsx(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible })
148
+ /* @__PURE__ */ jsx(
149
+ Input2,
150
+ {
151
+ inProgress: isLoading,
152
+ onSend: sendMessage,
153
+ isVisible,
154
+ onStop: stopGeneration
155
+ }
156
+ )
146
157
  ] });
147
158
  }
148
159
  function WrappedCopilotChat({
@@ -321,4 +332,4 @@ export {
321
332
  WrappedCopilotChat,
322
333
  useCopilotChatLogic
323
334
  };
324
- //# sourceMappingURL=chunk-QXQDIFOC.mjs.map
335
+ //# sourceMappingURL=chunk-H24B7QWO.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/chat/Chat.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"/images/CopilotChat.gif\" width=\"500\" />\n *\n * A chatbot panel component for the CopilotKit framework. The component allows for a high degree\n * of customization through various props and custom CSS.\n *\n * ## Install Dependencies\n *\n * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.\n *\n * ```shell npm2yarn \\\"@copilotkit/react-ui\"\\\n * npm install @copilotkit/react-core @copilotkit/react-ui\n * ```\n *\n * ## Usage\n *\n * ```tsx\n * import { CopilotChat } from \"@copilotkit/react-ui\";\n * import \"@copilotkit/react-ui/styles.css\";\n *\n * <CopilotChat\n * labels={{\n * title: \"Your Assistant\",\n * initial: \"Hi! 👋 How can I assist you today?\",\n * }}\n * />\n * ```\n *\n * ### Look & Feel\n *\n * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:\n * ```tsx title=\"YourRootComponent.tsx\"\n * ...\n * import \"@copilotkit/react-ui/styles.css\"; // [!code highlight]\n *\n * export function YourRootComponent() {\n * return (\n * <CopilotKit>\n * ...\n * </CopilotKit>\n * );\n * }\n * ```\n * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.\n */\n\nimport {\n ChatContext,\n ChatContextProvider,\n CopilotChatIcons,\n CopilotChatLabels,\n} from \"./ChatContext\";\nimport { Messages as DefaultMessages } from \"./Messages\";\nimport { Input as DefaultInput } from \"./Input\";\nimport { ResponseButton as DefaultResponseButton } from \"./Response\";\nimport { RenderTextMessage as DefaultRenderTextMessage } from \"./messages/RenderTextMessage\";\nimport { RenderActionExecutionMessage as DefaultRenderActionExecutionMessage } from \"./messages/RenderActionExecutionMessage\";\nimport { RenderResultMessage as DefaultRenderResultMessage } from \"./messages/RenderResultMessage\";\nimport { RenderAgentStateMessage as DefaultRenderAgentStateMessage } from \"./messages/RenderAgentStateMessage\";\nimport { AssistantMessage as DefaultAssistantMessage } from \"./messages/AssistantMessage\";\nimport { UserMessage as DefaultUserMessage } from \"./messages/UserMessage\";\nimport { Suggestion } from \"./Suggestion\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n SystemMessageFunction,\n useCopilotChat,\n useCopilotContext,\n useCopilotMessagesContext,\n} from \"@copilotkit/react-core\";\nimport { reloadSuggestions } from \"./Suggestion\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { Message, Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport { randomId } from \"@copilotkit/shared\";\nimport {\n AssistantMessageProps,\n InputProps,\n MessagesProps,\n RenderMessageProps,\n ResponseButtonProps,\n UserMessageProps,\n} from \"./props\";\n\nimport { CopilotDevConsole } from \"../dev-console\";\nimport { HintFunction, runAgent, stopAgent } from \"@copilotkit/react-core\";\n\n/**\n * Props for CopilotChat component.\n */\nexport interface CopilotChatProps {\n /**\n * Custom instructions to be added to the system message. Use this property to\n * provide additional context or guidance to the language model, influencing\n * its responses. These instructions can include specific directions,\n * preferences, or criteria that the model should consider when generating\n * its output, thereby tailoring the conversation more precisely to the\n * user's needs or the application's requirements.\n */\n instructions?: string;\n\n /**\n * A callback that gets called when the in progress state changes.\n */\n onInProgress?: (inProgress: boolean) => void;\n\n /**\n * A callback that gets called when a new message it submitted.\n */\n onSubmitMessage?: (message: string) => void | Promise<void>;\n\n /**\n * A custom stop generation function.\n */\n onStopGeneration?: OnStopGeneration;\n\n /**\n * A custom reload messages function.\n */\n onReloadMessages?: OnReloadMessages;\n\n /**\n * A callback function to regenerate the assistant's response\n */\n onRegenerate?: () => void;\n\n /**\n * A callback function when the message is copied\n */\n onCopy?: (message: string) => void;\n\n /**\n * A callback function for thumbs up feedback\n */\n onThumbsUp?: (message: string) => void;\n\n /**\n * A callback function for thumbs down feedback\n */\n onThumbsDown?: (message: string) => void;\n\n /**\n * Icons can be used to set custom icons for the chat window.\n */\n icons?: CopilotChatIcons;\n\n /**\n * Labels can be used to set custom labels for the chat window.\n */\n labels?: CopilotChatLabels;\n\n /**\n * A function that takes in context string and instructions and returns\n * the system message to include in the chat request.\n * Use this to completely override the system message, when providing\n * instructions is not enough.\n */\n makeSystemMessage?: SystemMessageFunction;\n\n /**\n * Whether to show the response button.\n * @default true\n */\n showResponseButton?: boolean;\n\n /**\n * A custom assistant message component to use instead of the default.\n */\n AssistantMessage?: React.ComponentType<AssistantMessageProps>;\n\n /**\n * A custom user message component to use instead of the default.\n */\n UserMessage?: React.ComponentType<UserMessageProps>;\n\n /**\n * A custom Messages component to use instead of the default.\n */\n Messages?: React.ComponentType<MessagesProps>;\n\n /**\n * A custom RenderTextMessage component to use instead of the default.\n */\n RenderTextMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom RenderActionExecutionMessage component to use instead of the default.\n */\n RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom RenderAgentStateMessage component to use instead of the default.\n */\n RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom RenderResultMessage component to use instead of the default.\n */\n RenderResultMessage?: React.ComponentType<RenderMessageProps>;\n\n /**\n * A custom Input component to use instead of the default.\n */\n Input?: React.ComponentType<InputProps>;\n\n /**\n * A custom ResponseButton component to use instead of the default.\n */\n ResponseButton?: React.ComponentType<ResponseButtonProps>;\n\n /**\n * A class name to apply to the root element.\n */\n className?: string;\n\n /**\n * Children to render.\n */\n children?: React.ReactNode;\n}\n\ninterface OnStopGenerationArguments {\n /**\n * The name of the currently executing agent.\n */\n currentAgentName: string | undefined;\n\n /**\n * The messages in the chat.\n */\n messages: Message[];\n\n /**\n * Set the messages in the chat.\n */\n setMessages: (messages: Message[]) => void;\n\n /**\n * Stop chat generation.\n */\n stopGeneration: () => void;\n\n /**\n * Restart the currently executing agent.\n */\n restartCurrentAgent: () => void;\n\n /**\n * Stop the currently executing agent.\n */\n stopCurrentAgent: () => void;\n\n /**\n * Run the currently executing agent.\n */\n runCurrentAgent: (hint?: HintFunction) => Promise<void>;\n\n /**\n * Set the state of the currently executing agent.\n */\n setCurrentAgentState: (state: any) => void;\n}\n\nexport type OnReloadMessagesArguments = OnStopGenerationArguments;\n\nexport type OnStopGeneration = (args: OnStopGenerationArguments) => void;\n\nexport type OnReloadMessages = (args: OnReloadMessagesArguments) => void;\n\nexport function CopilotChat({\n instructions,\n onSubmitMessage,\n makeSystemMessage,\n showResponseButton = true,\n onInProgress,\n onStopGeneration,\n onReloadMessages,\n onRegenerate,\n onCopy,\n onThumbsUp,\n onThumbsDown,\n Messages = DefaultMessages,\n RenderTextMessage = DefaultRenderTextMessage,\n RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,\n RenderAgentStateMessage = DefaultRenderAgentStateMessage,\n RenderResultMessage = DefaultRenderResultMessage,\n Input = DefaultInput,\n ResponseButton = DefaultResponseButton,\n className,\n icons,\n labels,\n AssistantMessage = DefaultAssistantMessage,\n UserMessage = DefaultUserMessage,\n}: CopilotChatProps) {\n const { additionalInstructions, setChatInstructions } = useCopilotContext();\n\n useEffect(() => {\n if (!additionalInstructions?.length) {\n setChatInstructions(instructions || \"\");\n return;\n }\n\n /*\n Will result in a prompt like:\n\n You are a helpful assistant. \n Additionally, follow these instructions:\n - Do not answer questions about the weather.\n - Do not answer questions about the stock market.\"\n */\n const combinedAdditionalInstructions = [\n instructions,\n \"Additionally, follow these instructions:\",\n ...additionalInstructions.map((instruction) => `- ${instruction}`),\n ];\n\n console.log(\"combinedAdditionalInstructions\", combinedAdditionalInstructions);\n\n setChatInstructions(combinedAdditionalInstructions.join(\"\\n\") || \"\");\n }, [instructions, additionalInstructions]);\n\n const {\n visibleMessages,\n isLoading,\n currentSuggestions,\n sendMessage,\n stopGeneration,\n reloadMessages,\n } = useCopilotChatLogic(\n makeSystemMessage,\n onInProgress,\n onSubmitMessage,\n onStopGeneration,\n onReloadMessages,\n );\n\n const chatContext = React.useContext(ChatContext);\n const isVisible = chatContext ? chatContext.open : true;\n\n const handleRegenerate = () => {\n if (onRegenerate) {\n onRegenerate();\n }\n\n reloadMessages();\n };\n\n const handleCopy = (message: string) => {\n if (onCopy) {\n onCopy(message);\n }\n };\n\n return (\n <WrappedCopilotChat icons={icons} labels={labels} className={className}>\n <Messages\n AssistantMessage={AssistantMessage}\n UserMessage={UserMessage}\n RenderTextMessage={RenderTextMessage}\n RenderActionExecutionMessage={RenderActionExecutionMessage}\n RenderAgentStateMessage={RenderAgentStateMessage}\n RenderResultMessage={RenderResultMessage}\n messages={visibleMessages}\n inProgress={isLoading}\n onRegenerate={handleRegenerate}\n onCopy={handleCopy}\n onThumbsUp={onThumbsUp}\n onThumbsDown={onThumbsDown}\n >\n {currentSuggestions.length > 0 && (\n <div className=\"suggestions\">\n {currentSuggestions.map((suggestion, index) => (\n <Suggestion\n key={index}\n title={suggestion.title}\n message={suggestion.message}\n partial={suggestion.partial}\n className={suggestion.className}\n onClick={(message) => sendMessage(message)}\n />\n ))}\n </div>\n )}\n </Messages>\n <Input\n inProgress={isLoading}\n onSend={sendMessage}\n isVisible={isVisible}\n onStop={stopGeneration}\n />\n </WrappedCopilotChat>\n );\n}\n\nexport function WrappedCopilotChat({\n children,\n icons,\n labels,\n className,\n}: {\n children: React.ReactNode;\n icons?: CopilotChatIcons;\n labels?: CopilotChatLabels;\n className?: string;\n}) {\n const chatContext = React.useContext(ChatContext);\n if (!chatContext) {\n return (\n <ChatContextProvider icons={icons} labels={labels} open={true} setOpen={() => {}}>\n <div className={`copilotKitChat ${className}`}>{children}</div>\n </ChatContextProvider>\n );\n }\n return <>{children}</>;\n}\n\nconst SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;\n\nexport const useCopilotChatLogic = (\n makeSystemMessage?: SystemMessageFunction,\n onInProgress?: (isLoading: boolean) => void,\n onSubmitMessage?: (messageContent: string) => Promise<void> | void,\n onStopGeneration?: OnStopGeneration,\n onReloadMessages?: OnReloadMessages,\n) => {\n const {\n visibleMessages,\n appendMessage,\n reloadMessages: defaultReloadMessages,\n stopGeneration: defaultStopGeneration,\n runChatCompletion,\n isLoading,\n } = useCopilotChat({\n id: randomId(),\n makeSystemMessage,\n });\n\n const [currentSuggestions, setCurrentSuggestions] = useState<CopilotChatSuggestion[]>([]);\n const suggestionsAbortControllerRef = useRef<AbortController | null>(null);\n const debounceTimerRef = useRef<any>();\n\n const abortSuggestions = () => {\n suggestionsAbortControllerRef.current?.abort();\n suggestionsAbortControllerRef.current = null;\n };\n\n const generalContext = useCopilotContext();\n const messagesContext = useCopilotMessagesContext();\n const context = { ...generalContext, ...messagesContext };\n\n useEffect(() => {\n onInProgress?.(isLoading);\n\n abortSuggestions();\n\n debounceTimerRef.current = setTimeout(\n () => {\n if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {\n suggestionsAbortControllerRef.current = new AbortController();\n reloadSuggestions(\n context,\n context.chatSuggestionConfiguration,\n setCurrentSuggestions,\n suggestionsAbortControllerRef,\n );\n }\n },\n currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT,\n );\n\n return () => {\n clearTimeout(debounceTimerRef.current);\n };\n }, [\n isLoading,\n context.chatSuggestionConfiguration,\n // hackish way to trigger suggestions reload on reset, but better than moving suggestions to the\n // global context\n visibleMessages.length == 0,\n ]);\n\n const sendMessage = async (messageContent: string) => {\n abortSuggestions();\n setCurrentSuggestions([]);\n\n const message: Message = new TextMessage({\n content: messageContent,\n role: Role.User,\n });\n\n if (onSubmitMessage) {\n try {\n await onSubmitMessage(messageContent);\n } catch (error) {\n console.error(\"Error in onSubmitMessage:\", error);\n }\n }\n // this needs to happen after onSubmitMessage, because it will trigger submission\n // of the message to the endpoint. Some users depend on performing some actions\n // before the message is submitted.\n appendMessage(message);\n\n return message;\n };\n\n const messages = visibleMessages;\n const { setMessages } = messagesContext;\n const currentAgentName = generalContext.agentSession?.agentName;\n const restartCurrentAgent = async (hint?: HintFunction) => {\n if (generalContext.agentSession) {\n generalContext.setAgentSession({\n ...generalContext.agentSession,\n nodeName: undefined,\n threadId: undefined,\n });\n generalContext.setCoagentStates((prevAgentStates) => {\n return {\n ...prevAgentStates,\n [generalContext.agentSession!.agentName]: {\n ...prevAgentStates[generalContext.agentSession!.agentName],\n threadId: undefined,\n nodeName: undefined,\n runId: undefined,\n },\n };\n });\n }\n };\n const runCurrentAgent = async (hint?: HintFunction) => {\n if (generalContext.agentSession) {\n await runAgent(\n generalContext.agentSession.agentName,\n context,\n appendMessage,\n runChatCompletion,\n hint,\n );\n }\n };\n const stopCurrentAgent = () => {\n if (generalContext.agentSession) {\n stopAgent(generalContext.agentSession.agentName, context);\n }\n };\n const setCurrentAgentState = (state: any) => {\n if (generalContext.agentSession) {\n generalContext.setCoagentStates((prevAgentStates) => {\n return {\n ...prevAgentStates,\n [generalContext.agentSession!.agentName]: {\n state,\n },\n } as any;\n });\n }\n };\n\n function stopGeneration() {\n if (onStopGeneration) {\n onStopGeneration({\n messages,\n setMessages,\n stopGeneration: defaultStopGeneration,\n currentAgentName,\n restartCurrentAgent,\n stopCurrentAgent,\n runCurrentAgent,\n setCurrentAgentState,\n });\n } else {\n defaultStopGeneration();\n }\n }\n function reloadMessages() {\n if (onReloadMessages) {\n onReloadMessages({\n messages,\n setMessages,\n stopGeneration: defaultStopGeneration,\n currentAgentName,\n restartCurrentAgent,\n stopCurrentAgent,\n runCurrentAgent,\n setCurrentAgentState,\n });\n } else {\n defaultReloadMessages();\n }\n }\n\n return {\n visibleMessages,\n isLoading,\n currentSuggestions,\n sendMessage,\n stopGeneration,\n reloadMessages,\n };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,OAAO,SAAS,WAAW,QAAQ,gBAAgB;AACnD;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAkB,MAAM,mBAAmB;AAC3C,SAAS,gBAAgB;AAWzB,SAAuB,UAAU,iBAAiB;AA6Q9C,SA2DK,UAzCK,KAlBV;AArFG,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAAA,YAAW;AAAA,EACX,mBAAAC,qBAAoB;AAAA,EACpB,8BAAAC,gCAA+B;AAAA,EAC/B,yBAAAC,2BAA0B;AAAA,EAC1B,qBAAAC,uBAAsB;AAAA,EACtB,OAAAC,SAAQ;AAAA,EACR,gBAAAC,kBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAAC,oBAAmB;AAAA,EACnB,aAAAC,eAAc;AAChB,GAAqB;AACnB,QAAM,EAAE,wBAAwB,oBAAoB,IAAI,kBAAkB;AAE1E,YAAU,MAAM;AACd,QAAI,EAAC,iEAAwB,SAAQ;AACnC,0BAAoB,gBAAgB,EAAE;AACtC;AAAA,IACF;AAUA,UAAM,iCAAiC;AAAA,MACrC;AAAA,MACA;AAAA,MACA,GAAG,uBAAuB,IAAI,CAAC,gBAAgB,KAAK,aAAa;AAAA,IACnE;AAEA,YAAQ,IAAI,kCAAkC,8BAA8B;AAE5E,wBAAoB,+BAA+B,KAAK,IAAI,KAAK,EAAE;AAAA,EACrE,GAAG,CAAC,cAAc,sBAAsB,CAAC;AAEzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,MAAM,WAAW,WAAW;AAChD,QAAM,YAAY,cAAc,YAAY,OAAO;AAEnD,QAAM,mBAAmB,MAAM;AAC7B,QAAI,cAAc;AAChB,mBAAa;AAAA,IACf;AAEA,mBAAe;AAAA,EACjB;AAEA,QAAM,aAAa,CAAC,YAAoB;AACtC,QAAI,QAAQ;AACV,aAAO,OAAO;AAAA,IAChB;AAAA,EACF;AAEA,SACE,qBAAC,sBAAmB,OAAc,QAAgB,WAChD;AAAA;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,kBAAkBO;AAAA,QAClB,aAAaC;AAAA,QACb,mBAAmBP;AAAA,QACnB,8BAA8BC;AAAA,QAC9B,yBAAyBC;AAAA,QACzB,qBAAqBC;AAAA,QACrB,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEC,6BAAmB,SAAS,KAC3B,oBAAC,SAAI,WAAU,eACZ,6BAAmB,IAAI,CAAC,YAAY,UACnC;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,WAAW;AAAA,YAClB,SAAS,WAAW;AAAA,YACpB,SAAS,WAAW;AAAA,YACpB,WAAW,WAAW;AAAA,YACtB,SAAS,CAAC,YAAY,YAAY,OAAO;AAAA;AAAA,UALpC;AAAA,QAMP,CACD,GACH;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR;AAAA,QACA,QAAQ;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,cAAc,MAAM,WAAW,WAAW;AAChD,MAAI,CAAC,aAAa;AAChB,WACE,oBAAC,uBAAoB,OAAc,QAAgB,MAAM,MAAM,SAAS,MAAM;AAAA,IAAC,GAC7E,8BAAC,SAAI,WAAW,kBAAkB,aAAc,UAAS,GAC3D;AAAA,EAEJ;AACA,SAAO,gCAAG,UAAS;AACrB;AAEA,IAAM,+BAA+B;AAE9B,IAAM,sBAAsB,CACjC,mBACA,cACA,iBACA,kBACA,qBACG;AAvaL;AAwaE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,IAAI,eAAe;AAAA,IACjB,IAAI,SAAS;AAAA,IACb;AAAA,EACF,CAAC;AAED,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkC,CAAC,CAAC;AACxF,QAAM,gCAAgC,OAA+B,IAAI;AACzE,QAAM,mBAAmB,OAAY;AAErC,QAAM,mBAAmB,MAAM;AAxbjC,QAAAI;AAybI,KAAAA,MAAA,8BAA8B,YAA9B,gBAAAA,IAAuC;AACvC,kCAA8B,UAAU;AAAA,EAC1C;AAEA,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,UAAU,kCAAK,iBAAmB;AAExC,YAAU,MAAM;AACd,iDAAe;AAEf,qBAAiB;AAEjB,qBAAiB,UAAU;AAAA,MACzB,MAAM;AACJ,YAAI,CAAC,aAAa,OAAO,KAAK,QAAQ,2BAA2B,EAAE,WAAW,GAAG;AAC/E,wCAA8B,UAAU,IAAI,gBAAgB;AAC5D;AAAA,YACE;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,mBAAmB,UAAU,IAAI,IAAI;AAAA,IACvC;AAEA,WAAO,MAAM;AACX,mBAAa,iBAAiB,OAAO;AAAA,IACvC;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA,QAAQ;AAAA;AAAA;AAAA,IAGR,gBAAgB,UAAU;AAAA,EAC5B,CAAC;AAED,QAAM,cAAc,CAAO,mBAA2B;AACpD,qBAAiB;AACjB,0BAAsB,CAAC,CAAC;AAExB,UAAM,UAAmB,IAAI,YAAY;AAAA,MACvC,SAAS;AAAA,MACT,MAAM,KAAK;AAAA,IACb,CAAC;AAED,QAAI,iBAAiB;AACnB,UAAI;AACF,cAAM,gBAAgB,cAAc;AAAA,MACtC,SAAS,OAAP;AACA,gBAAQ,MAAM,6BAA6B,KAAK;AAAA,MAClD;AAAA,IACF;AAIA,kBAAc,OAAO;AAErB,WAAO;AAAA,EACT;AAEA,QAAM,WAAW;AACjB,QAAM,EAAE,YAAY,IAAI;AACxB,QAAM,oBAAmB,oBAAe,iBAAf,mBAA6B;AACtD,QAAM,sBAAsB,CAAO,SAAwB;AACzD,QAAI,eAAe,cAAc;AAC/B,qBAAe,gBAAgB,iCAC1B,eAAe,eADW;AAAA,QAE7B,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,EAAC;AACD,qBAAe,iBAAiB,CAAC,oBAAoB;AACnD,eAAO,iCACF,kBADE;AAAA,UAEL,CAAC,eAAe,aAAc,SAAS,GAAG,iCACrC,gBAAgB,eAAe,aAAc,SAAS,IADjB;AAAA,YAExC,UAAU;AAAA,YACV,UAAU;AAAA,YACV,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACA,QAAM,kBAAkB,CAAO,SAAwB;AACrD,QAAI,eAAe,cAAc;AAC/B,YAAM;AAAA,QACJ,eAAe,aAAa;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,eAAe,cAAc;AAC/B,gBAAU,eAAe,aAAa,WAAW,OAAO;AAAA,IAC1D;AAAA,EACF;AACA,QAAM,uBAAuB,CAAC,UAAe;AAC3C,QAAI,eAAe,cAAc;AAC/B,qBAAe,iBAAiB,CAAC,oBAAoB;AACnD,eAAO,iCACF,kBADE;AAAA,UAEL,CAAC,eAAe,aAAc,SAAS,GAAG;AAAA,YACxC;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAEA,WAAS,iBAAiB;AACxB,QAAI,kBAAkB;AACpB,uBAAiB;AAAA,QACf;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,OAAO;AACL,4BAAsB;AAAA,IACxB;AAAA,EACF;AACA,WAAS,iBAAiB;AACxB,QAAI,kBAAkB;AACpB,uBAAiB;AAAA,QACf;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,OAAO;AACL,4BAAsB;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["Messages","RenderTextMessage","RenderActionExecutionMessage","RenderAgentStateMessage","RenderResultMessage","Input","ResponseButton","AssistantMessage","UserMessage","_a"]}
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-YQFVRDNC.mjs";
4
4
  import {
5
5
  useChatContext
6
- } from "./chunk-CBBFRI3Q.mjs";
6
+ } from "./chunk-5JY5QJ2W.mjs";
7
7
  import {
8
8
  usePushToTalk
9
9
  } from "./chunk-S5MBUNGN.mjs";
@@ -12,7 +12,7 @@ import {
12
12
  import { useEffect, useRef, useState } from "react";
13
13
  import { useCopilotContext } from "@copilotkit/react-core";
14
14
  import { jsx, jsxs } from "react/jsx-runtime";
15
- var Input = ({ inProgress, onSend, isVisible = false }) => {
15
+ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
16
16
  const context = useChatContext();
17
17
  const copilotContext = useCopilotContext();
18
18
  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
@@ -42,16 +42,17 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
42
42
  sendFunction: onSend,
43
43
  inProgress
44
44
  });
45
- const sendIcon = inProgress || pushToTalkState === "transcribing" ? context.icons.activityIcon : context.icons.sendIcon;
45
+ const isInProgress = inProgress || pushToTalkState === "transcribing";
46
+ const buttonIcon = isInProgress ? context.icons.stopIcon : context.icons.sendIcon;
46
47
  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
47
48
  const canSend = () => {
48
49
  var _a;
49
50
  const interruptEvent = (_a = copilotContext.langGraphInterruptAction) == null ? void 0 : _a.event;
50
51
  const interruptInProgress = (interruptEvent == null ? void 0 : interruptEvent.name) === "LangGraphInterruptEvent" && !(interruptEvent == null ? void 0 : interruptEvent.response);
51
- return !inProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interruptInProgress;
52
+ return (isInProgress || !isInProgress && text.trim().length > 0) && pushToTalkState === "idle" && !interruptInProgress;
52
53
  };
53
54
  const sendDisabled = !canSend();
54
- return /* @__PURE__ */ jsxs("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
55
+ return /* @__PURE__ */ jsx("div", { className: "copilotKitInputContainer", children: /* @__PURE__ */ jsxs("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
55
56
  /* @__PURE__ */ jsx(
56
57
  Textarea_default,
57
58
  {
@@ -72,11 +73,12 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
72
73
  }
73
74
  ),
74
75
  /* @__PURE__ */ jsxs("div", { className: "copilotKitInputControls", children: [
76
+ /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
75
77
  showPushToTalk && /* @__PURE__ */ jsx(
76
78
  "button",
77
79
  {
78
80
  onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
79
- className: pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : "",
81
+ className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
80
82
  children: context.icons.pushToTalkIcon
81
83
  }
82
84
  ),
@@ -84,17 +86,18 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
84
86
  "button",
85
87
  {
86
88
  disabled: sendDisabled,
87
- onClick: send,
88
- "data-copilotkit-in-progress": !!inProgress,
89
- "data-testid": inProgress ? "copilot-chat-request-in-progress" : void 0,
90
- children: sendIcon
89
+ onClick: isInProgress ? onStop : send,
90
+ "data-copilotkit-in-progress": inProgress,
91
+ "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
92
+ className: "copilotKitInputControlButton",
93
+ children: buttonIcon
91
94
  }
92
95
  )
93
96
  ] })
94
- ] });
97
+ ] }) });
95
98
  };
96
99
 
97
100
  export {
98
101
  Input
99
102
  };
100
- //# sourceMappingURL=chunk-QXTRFMPM.mjs.map
103
+ //# sourceMappingURL=chunk-LYHZXHTJ.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/chat/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { InputProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport AutoResizingTextarea from \"./Textarea\";\nimport { usePushToTalk } from \"../../hooks/use-push-to-talk\";\nimport { useCopilotContext } from \"@copilotkit/react-core\";\n\nexport const Input = ({ inProgress, onSend, isVisible = false, onStop }: InputProps) => {\n const context = useChatContext();\n const copilotContext = useCopilotContext();\n\n const pushToTalkConfigured =\n copilotContext.copilotApiConfig.textToSpeechUrl !== undefined &&\n copilotContext.copilotApiConfig.transcribeAudioUrl !== undefined;\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const handleDivClick = (event: React.MouseEvent<HTMLDivElement>) => {\n // Check if the clicked element is not the textarea itself\n if (event.target !== event.currentTarget) return;\n\n textareaRef.current?.focus();\n };\n\n const [text, setText] = useState(\"\");\n const send = () => {\n if (inProgress) return;\n onSend(text);\n setText(\"\");\n\n textareaRef.current?.focus();\n };\n\n useEffect(() => {\n if (isVisible) {\n textareaRef.current?.focus();\n }\n }, [isVisible]);\n\n const { pushToTalkState, setPushToTalkState } = usePushToTalk({\n sendFunction: onSend,\n inProgress,\n });\n\n const isInProgress = inProgress || pushToTalkState === \"transcribing\";\n const buttonIcon = isInProgress ? context.icons.stopIcon : context.icons.sendIcon;\n const showPushToTalk =\n pushToTalkConfigured &&\n (pushToTalkState === \"idle\" || pushToTalkState === \"recording\") &&\n !inProgress;\n\n const canSend = () => {\n const interruptEvent = copilotContext.langGraphInterruptAction?.event;\n const interruptInProgress =\n interruptEvent?.name === \"LangGraphInterruptEvent\" && !interruptEvent?.response;\n\n return (\n (isInProgress || (!isInProgress && text.trim().length > 0)) &&\n pushToTalkState === \"idle\" &&\n !interruptInProgress\n );\n };\n\n const sendDisabled = !canSend();\n\n return (\n <div className=\"copilotKitInputContainer\">\n <div className=\"copilotKitInput\" onClick={handleDivClick}>\n <AutoResizingTextarea\n ref={textareaRef}\n placeholder={context.labels.placeholder}\n autoFocus={true}\n maxRows={5}\n value={text}\n onChange={(event) => setText(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n if (canSend()) {\n send();\n }\n }\n }}\n />\n <div className=\"copilotKitInputControls\">\n <div style={{ flexGrow: 1 }} />\n {showPushToTalk && (\n <button\n onClick={() =>\n setPushToTalkState(pushToTalkState === \"idle\" ? \"recording\" : \"transcribing\")\n }\n className={\n pushToTalkState === \"recording\"\n ? \"copilotKitInputControlButton copilotKitPushToTalkRecording\"\n : \"copilotKitInputControlButton\"\n }\n >\n {context.icons.pushToTalkIcon}\n </button>\n )}\n <button\n disabled={sendDisabled}\n onClick={isInProgress ? onStop : send}\n data-copilotkit-in-progress={inProgress}\n data-test-id={inProgress ? \"copilot-chat-request-in-progress\" : \"copilot-chat-ready\"}\n className=\"copilotKitInputControlButton\"\n >\n {buttonIcon}\n </button>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA,SAAgB,WAAW,QAAQ,gBAAgB;AAKnD,SAAS,yBAAyB;AA+D1B,cAgBA,YAhBA;AA7DD,IAAM,QAAQ,CAAC,EAAE,YAAY,QAAQ,YAAY,OAAO,OAAO,MAAkB;AACtF,QAAM,UAAU,eAAe;AAC/B,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,uBACJ,eAAe,iBAAiB,oBAAoB,UACpD,eAAe,iBAAiB,uBAAuB;AAEzD,QAAM,cAAc,OAA4B,IAAI;AAEpD,QAAM,iBAAiB,CAAC,UAA4C;AAjBtE;AAmBI,QAAI,MAAM,WAAW,MAAM;AAAe;AAE1C,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,OAAO,MAAM;AAzBrB;AA0BI,QAAI;AAAY;AAChB,WAAO,IAAI;AACX,YAAQ,EAAE;AAEV,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,YAAU,MAAM;AAjClB;AAkCI,QAAI,WAAW;AACb,wBAAY,YAAZ,mBAAqB;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,EAAE,iBAAiB,mBAAmB,IAAI,cAAc;AAAA,IAC5D,cAAc;AAAA,IACd;AAAA,EACF,CAAC;AAED,QAAM,eAAe,cAAc,oBAAoB;AACvD,QAAM,aAAa,eAAe,QAAQ,MAAM,WAAW,QAAQ,MAAM;AACzE,QAAM,iBACJ,yBACC,oBAAoB,UAAU,oBAAoB,gBACnD,CAAC;AAEH,QAAM,UAAU,MAAM;AAnDxB;AAoDI,UAAM,kBAAiB,oBAAe,6BAAf,mBAAyC;AAChE,UAAM,uBACJ,iDAAgB,UAAS,6BAA6B,EAAC,iDAAgB;AAEzE,YACG,gBAAiB,CAAC,gBAAgB,KAAK,KAAK,EAAE,SAAS,MACxD,oBAAoB,UACpB,CAAC;AAAA,EAEL;AAEA,QAAM,eAAe,CAAC,QAAQ;AAE9B,SACE,oBAAC,SAAI,WAAU,4BACb,+BAAC,SAAI,WAAU,mBAAkB,SAAS,gBACxC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,aAAa,QAAQ,OAAO;AAAA,QAC5B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU,CAAC,UAAU,QAAQ,MAAM,OAAO,KAAK;AAAA,QAC/C,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,WAAW,CAAC,MAAM,UAAU;AAC5C,kBAAM,eAAe;AACrB,gBAAI,QAAQ,GAAG;AACb,mBAAK;AAAA,YACP;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,OAAO,EAAE,UAAU,EAAE,GAAG;AAAA,MAC5B,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MACP,mBAAmB,oBAAoB,SAAS,cAAc,cAAc;AAAA,UAE9E,WACE,oBAAoB,cAChB,+DACA;AAAA,UAGL,kBAAQ,MAAM;AAAA;AAAA,MACjB;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,SAAS,eAAe,SAAS;AAAA,UACjC,+BAA6B;AAAA,UAC7B,gBAAc,aAAa,qCAAqC;AAAA,UAChE,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}
@@ -0,0 +1,244 @@
1
+ // src/components/chat/Icons.tsx
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ var OpenIcon = /* @__PURE__ */ jsx(
4
+ "svg",
5
+ {
6
+ xmlns: "http://www.w3.org/2000/svg",
7
+ viewBox: "0 0 24 24",
8
+ fill: "currentColor",
9
+ width: "24",
10
+ height: "24",
11
+ children: /* @__PURE__ */ jsx("g", { transform: "translate(24, 0) scale(-1, 1)", children: /* @__PURE__ */ jsx(
12
+ "path",
13
+ {
14
+ fillRule: "evenodd",
15
+ d: "M5.337 21.718a6.707 6.707 0 01-.533-.074.75.75 0 01-.44-1.223 3.73 3.73 0 00.814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 01-4.246.997z",
16
+ clipRule: "evenodd"
17
+ }
18
+ ) })
19
+ }
20
+ );
21
+ var CloseIcon = /* @__PURE__ */ jsx(
22
+ "svg",
23
+ {
24
+ xmlns: "http://www.w3.org/2000/svg",
25
+ fill: "none",
26
+ viewBox: "0 0 24 24",
27
+ strokeWidth: "1.5",
28
+ stroke: "currentColor",
29
+ width: "24",
30
+ height: "24",
31
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
32
+ }
33
+ );
34
+ var HeaderCloseIcon = /* @__PURE__ */ jsx(
35
+ "svg",
36
+ {
37
+ xmlns: "http://www.w3.org/2000/svg",
38
+ fill: "none",
39
+ viewBox: "0 0 24 24",
40
+ strokeWidth: "1.5",
41
+ stroke: "currentColor",
42
+ width: "24",
43
+ height: "24",
44
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
45
+ }
46
+ );
47
+ var SendIcon = /* @__PURE__ */ jsx(
48
+ "svg",
49
+ {
50
+ xmlns: "http://www.w3.org/2000/svg",
51
+ fill: "none",
52
+ viewBox: "0 0 24 24",
53
+ strokeWidth: "1.5",
54
+ stroke: "currentColor",
55
+ width: "24",
56
+ height: "24",
57
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19V5m0 0l-7 7m7-7l7 7" })
58
+ }
59
+ );
60
+ var MicrophoneIcon = /* @__PURE__ */ jsx(
61
+ "svg",
62
+ {
63
+ xmlns: "http://www.w3.org/2000/svg",
64
+ fill: "none",
65
+ viewBox: "0 0 24 24",
66
+ strokeWidth: "1.5",
67
+ stroke: "currentColor",
68
+ width: "24",
69
+ height: "24",
70
+ children: /* @__PURE__ */ jsx(
71
+ "path",
72
+ {
73
+ strokeLinecap: "round",
74
+ strokeLinejoin: "round",
75
+ d: "M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
76
+ }
77
+ )
78
+ }
79
+ );
80
+ var StopIcon = /* @__PURE__ */ jsx(
81
+ "svg",
82
+ {
83
+ xmlns: "http://www.w3.org/2000/svg",
84
+ fill: "none",
85
+ viewBox: "0 0 24 24",
86
+ strokeWidth: "1.5",
87
+ stroke: "currentColor",
88
+ width: "24",
89
+ height: "24",
90
+ children: /* @__PURE__ */ jsx(
91
+ "path",
92
+ {
93
+ strokeLinecap: "round",
94
+ strokeLinejoin: "round",
95
+ d: "M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
96
+ }
97
+ )
98
+ }
99
+ );
100
+ var RegenerateIcon = /* @__PURE__ */ jsx(
101
+ "svg",
102
+ {
103
+ xmlns: "http://www.w3.org/2000/svg",
104
+ fill: "none",
105
+ viewBox: "0 0 24 24",
106
+ strokeWidth: "2",
107
+ stroke: "currentColor",
108
+ width: "16",
109
+ height: "16",
110
+ style: { minWidth: "16px", minHeight: "16px" },
111
+ children: /* @__PURE__ */ jsx(
112
+ "path",
113
+ {
114
+ strokeLinecap: "round",
115
+ strokeLinejoin: "round",
116
+ d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
117
+ }
118
+ )
119
+ }
120
+ );
121
+ var CopyIcon = /* @__PURE__ */ jsx(
122
+ "svg",
123
+ {
124
+ xmlns: "http://www.w3.org/2000/svg",
125
+ fill: "none",
126
+ viewBox: "0 0 24 24",
127
+ strokeWidth: "2",
128
+ stroke: "currentColor",
129
+ width: "16",
130
+ height: "16",
131
+ style: { minWidth: "16px", minHeight: "16px" },
132
+ children: /* @__PURE__ */ jsx(
133
+ "path",
134
+ {
135
+ strokeLinecap: "round",
136
+ strokeLinejoin: "round",
137
+ d: "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
138
+ }
139
+ )
140
+ }
141
+ );
142
+ var SmallSpinnerIcon = /* @__PURE__ */ jsx("span", { className: "copilotKitSpinner", style: { width: "13px", height: "13px" } });
143
+ var SpinnerIcon = /* @__PURE__ */ jsx("span", { className: "copilotKitSpinner", style: { width: "24px", height: "24px" } });
144
+ var ActivityIcon = /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
145
+ /* @__PURE__ */ jsx("span", { className: "copilotKitActivityDot", style: { animationDelay: "0s" } }),
146
+ /* @__PURE__ */ jsx("span", { className: "copilotKitActivityDot", style: { animationDelay: "0.2s" } }),
147
+ /* @__PURE__ */ jsx("span", { className: "copilotKitActivityDot", style: { animationDelay: "0.4s" } })
148
+ ] });
149
+ var ThumbsUpIcon = /* @__PURE__ */ jsx(
150
+ "svg",
151
+ {
152
+ xmlns: "http://www.w3.org/2000/svg",
153
+ fill: "none",
154
+ viewBox: "0 0 24 24",
155
+ strokeWidth: "2",
156
+ stroke: "currentColor",
157
+ width: "16",
158
+ height: "16",
159
+ style: { minWidth: "16px", minHeight: "16px" },
160
+ children: /* @__PURE__ */ jsx(
161
+ "path",
162
+ {
163
+ strokeLinecap: "round",
164
+ strokeLinejoin: "round",
165
+ d: "M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
166
+ }
167
+ )
168
+ }
169
+ );
170
+ var ThumbsDownIcon = /* @__PURE__ */ jsx(
171
+ "svg",
172
+ {
173
+ xmlns: "http://www.w3.org/2000/svg",
174
+ fill: "none",
175
+ viewBox: "0 0 24 24",
176
+ strokeWidth: "2",
177
+ stroke: "currentColor",
178
+ width: "16",
179
+ height: "16",
180
+ style: { minWidth: "16px", minHeight: "16px" },
181
+ children: /* @__PURE__ */ jsx(
182
+ "path",
183
+ {
184
+ strokeLinecap: "round",
185
+ strokeLinejoin: "round",
186
+ d: "M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"
187
+ }
188
+ )
189
+ }
190
+ );
191
+ var DownloadIcon = /* @__PURE__ */ jsx(
192
+ "svg",
193
+ {
194
+ xmlns: "http://www.w3.org/2000/svg",
195
+ fill: "none",
196
+ viewBox: "0 0 24 24",
197
+ strokeWidth: "2",
198
+ stroke: "currentColor",
199
+ width: "16",
200
+ height: "16",
201
+ style: { minWidth: "16px", minHeight: "16px" },
202
+ children: /* @__PURE__ */ jsx(
203
+ "path",
204
+ {
205
+ strokeLinecap: "round",
206
+ strokeLinejoin: "round",
207
+ d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
208
+ }
209
+ )
210
+ }
211
+ );
212
+ var CheckIcon = /* @__PURE__ */ jsx(
213
+ "svg",
214
+ {
215
+ xmlns: "http://www.w3.org/2000/svg",
216
+ fill: "none",
217
+ viewBox: "0 0 24 24",
218
+ strokeWidth: "2",
219
+ stroke: "currentColor",
220
+ width: "16",
221
+ height: "16",
222
+ style: { minWidth: "16px", minHeight: "16px" },
223
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" })
224
+ }
225
+ );
226
+
227
+ export {
228
+ OpenIcon,
229
+ CloseIcon,
230
+ HeaderCloseIcon,
231
+ SendIcon,
232
+ MicrophoneIcon,
233
+ StopIcon,
234
+ RegenerateIcon,
235
+ CopyIcon,
236
+ SmallSpinnerIcon,
237
+ SpinnerIcon,
238
+ ActivityIcon,
239
+ ThumbsUpIcon,
240
+ ThumbsDownIcon,
241
+ DownloadIcon,
242
+ CheckIcon
243
+ };
244
+ //# sourceMappingURL=chunk-ORSMX3SE.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/chat/Icons.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const OpenIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"24\"\n height=\"24\"\n >\n <g transform=\"translate(24, 0) scale(-1, 1)\">\n <path\n fillRule=\"evenodd\"\n d=\"M5.337 21.718a6.707 6.707 0 01-.533-.074.75.75 0 01-.44-1.223 3.73 3.73 0 00.814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 01-4.246.997z\"\n clipRule=\"evenodd\"\n />\n </g>\n </svg>\n);\n\nexport const CloseIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"1.5\"\n stroke=\"currentColor\"\n width=\"24\"\n height=\"24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n </svg>\n);\n\nexport const HeaderCloseIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"1.5\"\n stroke=\"currentColor\"\n width=\"24\"\n height=\"24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n);\n\nexport const SendIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"1.5\"\n stroke=\"currentColor\"\n width=\"24\"\n height=\"24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 19V5m0 0l-7 7m7-7l7 7\" />\n </svg>\n);\n\nexport const MicrophoneIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"1.5\"\n stroke=\"currentColor\"\n width=\"24\"\n height=\"24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z\"\n />\n </svg>\n);\n\nexport const StopIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"1.5\"\n stroke=\"currentColor\"\n width=\"24\"\n height=\"24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z\"\n />\n </svg>\n);\n\nexport const RegenerateIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n width=\"16\"\n height=\"16\"\n style={{ minWidth: \"16px\", minHeight: \"16px\" }}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99\"\n />\n </svg>\n);\n\nexport const CopyIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n width=\"16\"\n height=\"16\"\n style={{ minWidth: \"16px\", minHeight: \"16px\" }}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75\"\n />\n </svg>\n);\n\nexport const SmallSpinnerIcon = (\n <span className=\"copilotKitSpinner\" style={{ width: \"13px\", height: \"13px\" }}></span>\n);\n\nexport const SpinnerIcon = (\n <span className=\"copilotKitSpinner\" style={{ width: \"24px\", height: \"24px\" }}></span>\n);\n\nexport const ActivityIcon = (\n <div style={{ display: \"flex\", alignItems: \"center\", gap: \"4px\" }}>\n <span className=\"copilotKitActivityDot\" style={{ animationDelay: \"0s\" }}></span>\n <span className=\"copilotKitActivityDot\" style={{ animationDelay: \"0.2s\" }}></span>\n <span className=\"copilotKitActivityDot\" style={{ animationDelay: \"0.4s\" }}></span>\n </div>\n);\n\nexport const ThumbsUpIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n width=\"16\"\n height=\"16\"\n style={{ minWidth: \"16px\", minHeight: \"16px\" }}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z\"\n />\n </svg>\n);\n\nexport const ThumbsDownIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n width=\"16\"\n height=\"16\"\n style={{ minWidth: \"16px\", minHeight: \"16px\" }}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384\"\n />\n </svg>\n);\n\nexport const DownloadIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n width=\"16\"\n height=\"16\"\n style={{ minWidth: \"16px\", minHeight: \"16px\" }}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3\"\n />\n </svg>\n);\n\nexport const CheckIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n width=\"16\"\n height=\"16\"\n style={{ minWidth: \"16px\", minHeight: \"16px\" }}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n </svg>\n);\n"],"mappings":"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","names":[]}
@@ -2,7 +2,7 @@ import {
2
2
  CheckIcon,
3
3
  CopyIcon,
4
4
  DownloadIcon
5
- } from "./chunk-FZC7X5PK.mjs";
5
+ } from "./chunk-ORSMX3SE.mjs";
6
6
  import {
7
7
  useCopyToClipboard
8
8
  } from "./chunk-54JAUBUJ.mjs";
@@ -77,14 +77,8 @@ var CodeBlock = memo(({ language, value }) => {
77
77
  /* @__PURE__ */ jsxs("div", { className: "copilotKitCodeBlockToolbar", children: [
78
78
  /* @__PURE__ */ jsx("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
79
79
  /* @__PURE__ */ jsxs("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
80
- /* @__PURE__ */ jsxs("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: [
81
- /* @__PURE__ */ jsx(DownloadIcon, {}),
82
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Download" })
83
- ] }),
84
- /* @__PURE__ */ jsxs("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: [
85
- isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
86
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Copy code" })
87
- ] })
80
+ /* @__PURE__ */ jsx("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
81
+ /* @__PURE__ */ jsx("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
88
82
  ] })
89
83
  ] }),
90
84
  /* @__PURE__ */ jsx(
@@ -392,4 +386,4 @@ export {
392
386
  generateRandomString,
393
387
  CodeBlock
394
388
  };
395
- //# sourceMappingURL=chunk-UPTB2MVO.mjs.map
389
+ //# sourceMappingURL=chunk-PCTCOQK2.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/chat/CodeBlock.tsx"],"sourcesContent":["import { FC, memo } from \"react\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard\";\nimport { CheckIcon, CopyIcon, DownloadIcon } from \"./Icons\";\n\ninterface CodeActionButtonProps {\n onClick: () => void;\n children: React.ReactNode;\n}\n\ninterface Props {\n language: string;\n value: string;\n}\n\ninterface languageMap {\n [key: string]: string | undefined;\n}\n\nexport const programmingLanguages: languageMap = {\n javascript: \".js\",\n python: \".py\",\n java: \".java\",\n c: \".c\",\n cpp: \".cpp\",\n \"c++\": \".cpp\",\n \"c#\": \".cs\",\n ruby: \".rb\",\n php: \".php\",\n swift: \".swift\",\n \"objective-c\": \".m\",\n kotlin: \".kt\",\n typescript: \".ts\",\n go: \".go\",\n perl: \".pl\",\n rust: \".rs\",\n scala: \".scala\",\n haskell: \".hs\",\n lua: \".lua\",\n shell: \".sh\",\n sql: \".sql\",\n html: \".html\",\n css: \".css\",\n // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component\n};\n\nexport const generateRandomString = (length: number, lowercase = false) => {\n const chars = \"ABCDEFGHJKLMNPQRSTUVWXY3456789\"; // excluding similar looking characters like Z, 2, I, 1, O, 0\n let result = \"\";\n for (let i = 0; i < length; i++) {\n result += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return lowercase ? result.toLowerCase() : result;\n};\n\nconst CodeBlock: FC<Props> = memo(({ language, value }) => {\n const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });\n\n const downloadAsFile = () => {\n if (typeof window === \"undefined\") {\n return;\n }\n const fileExtension = programmingLanguages[language] || \".file\";\n const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;\n const fileName = window.prompt(\"Enter file name\" || \"\", suggestedFileName);\n\n if (!fileName) {\n // User pressed cancel on prompt.\n return;\n }\n\n const blob = new Blob([value], { type: \"text/plain\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.download = fileName;\n link.href = url;\n link.style.display = \"none\";\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n };\n\n const onCopy = () => {\n if (isCopied) return;\n copyToClipboard(value);\n };\n\n return (\n <div className=\"copilotKitCodeBlock\">\n <div className=\"copilotKitCodeBlockToolbar\">\n <span className=\"copilotKitCodeBlockToolbarLanguage\">{language}</span>\n <div className=\"copilotKitCodeBlockToolbarButtons\">\n <button className=\"copilotKitCodeBlockToolbarButton\" onClick={downloadAsFile}>\n {DownloadIcon}\n </button>\n <button className=\"copilotKitCodeBlockToolbarButton\" onClick={onCopy}>\n {isCopied ? CheckIcon : CopyIcon}\n </button>\n </div>\n </div>\n <SyntaxHighlighter\n language={language}\n style={highlightStyle}\n PreTag=\"div\"\n customStyle={{\n margin: 0,\n borderBottomLeftRadius: \"0.375rem\",\n borderBottomRightRadius: \"0.375rem\",\n }}\n >\n {value}\n </SyntaxHighlighter>\n </div>\n );\n});\nCodeBlock.displayName = \"CodeBlock\";\n\nexport { CodeBlock };\n\n// import { vscDarkPlus as highlightStyle } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n// As a workaround, we inline the vscDarkPlus from react-syntax-highlighter.\n// Importing it as recommended in the documentation leads to build errors in the non app router\n// (Next.js classic) setup.\nconst highlightStyle: any = {\n 'pre[class*=\"language-\"]': {\n color: \"#d4d4d4\",\n fontSize: \"13px\",\n textShadow: \"none\",\n fontFamily: 'Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace',\n direction: \"ltr\",\n textAlign: \"left\",\n whiteSpace: \"pre\",\n wordSpacing: \"normal\",\n wordBreak: \"normal\",\n lineHeight: \"1.5\",\n MozTabSize: \"4\",\n OTabSize: \"4\",\n tabSize: \"4\",\n WebkitHyphens: \"none\",\n MozHyphens: \"none\",\n msHyphens: \"none\",\n hyphens: \"none\",\n padding: \"1em\",\n margin: \".5em 0\",\n overflow: \"auto\",\n background: \"#1e1e1e\",\n },\n 'code[class*=\"language-\"]': {\n color: \"#d4d4d4\",\n fontSize: \"13px\",\n textShadow: \"none\",\n fontFamily: 'Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace',\n direction: \"ltr\",\n textAlign: \"left\",\n whiteSpace: \"pre\",\n wordSpacing: \"normal\",\n wordBreak: \"normal\",\n lineHeight: \"1.5\",\n MozTabSize: \"4\",\n OTabSize: \"4\",\n tabSize: \"4\",\n WebkitHyphens: \"none\",\n MozHyphens: \"none\",\n msHyphens: \"none\",\n hyphens: \"none\",\n },\n 'pre[class*=\"language-\"]::selection': {\n textShadow: \"none\",\n background: \"#264F78\",\n },\n 'code[class*=\"language-\"]::selection': {\n textShadow: \"none\",\n background: \"#264F78\",\n },\n 'pre[class*=\"language-\"] *::selection': {\n textShadow: \"none\",\n background: \"#264F78\",\n },\n 'code[class*=\"language-\"] *::selection': {\n textShadow: \"none\",\n background: \"#264F78\",\n },\n ':not(pre) > code[class*=\"language-\"]': {\n padding: \".1em .3em\",\n borderRadius: \".3em\",\n color: \"#db4c69\",\n background: \"#1e1e1e\",\n },\n \".namespace\": {\n Opacity: \".7\",\n },\n \"doctype.doctype-tag\": {\n color: \"#569CD6\",\n },\n \"doctype.name\": {\n color: \"#9cdcfe\",\n },\n comment: {\n color: \"#6a9955\",\n },\n prolog: {\n color: \"#6a9955\",\n },\n punctuation: {\n color: \"#d4d4d4\",\n },\n \".language-html .language-css .token.punctuation\": {\n color: \"#d4d4d4\",\n },\n \".language-html .language-javascript .token.punctuation\": {\n color: \"#d4d4d4\",\n },\n property: {\n color: \"#9cdcfe\",\n },\n tag: {\n color: \"#569cd6\",\n },\n boolean: {\n color: \"#569cd6\",\n },\n number: {\n color: \"#b5cea8\",\n },\n constant: {\n color: \"#9cdcfe\",\n },\n symbol: {\n color: \"#b5cea8\",\n },\n inserted: {\n color: \"#b5cea8\",\n },\n unit: {\n color: \"#b5cea8\",\n },\n selector: {\n color: \"#d7ba7d\",\n },\n \"attr-name\": {\n color: \"#9cdcfe\",\n },\n string: {\n color: \"#ce9178\",\n },\n char: {\n color: \"#ce9178\",\n },\n builtin: {\n color: \"#ce9178\",\n },\n deleted: {\n color: \"#ce9178\",\n },\n \".language-css .token.string.url\": {\n textDecoration: \"underline\",\n },\n operator: {\n color: \"#d4d4d4\",\n },\n entity: {\n color: \"#569cd6\",\n },\n \"operator.arrow\": {\n color: \"#569CD6\",\n },\n atrule: {\n color: \"#ce9178\",\n },\n \"atrule.rule\": {\n color: \"#c586c0\",\n },\n \"atrule.url\": {\n color: \"#9cdcfe\",\n },\n \"atrule.url.function\": {\n color: \"#dcdcaa\",\n },\n \"atrule.url.punctuation\": {\n color: \"#d4d4d4\",\n },\n keyword: {\n color: \"#569CD6\",\n },\n \"keyword.module\": {\n color: \"#c586c0\",\n },\n \"keyword.control-flow\": {\n color: \"#c586c0\",\n },\n function: {\n color: \"#dcdcaa\",\n },\n \"function.maybe-class-name\": {\n color: \"#dcdcaa\",\n },\n regex: {\n color: \"#d16969\",\n },\n important: {\n color: \"#569cd6\",\n },\n italic: {\n fontStyle: \"italic\",\n },\n \"class-name\": {\n color: \"#4ec9b0\",\n },\n \"maybe-class-name\": {\n color: \"#4ec9b0\",\n },\n console: {\n color: \"#9cdcfe\",\n },\n parameter: {\n color: \"#9cdcfe\",\n },\n interpolation: {\n color: \"#9cdcfe\",\n },\n \"punctuation.interpolation-punctuation\": {\n color: \"#569cd6\",\n },\n variable: {\n color: \"#9cdcfe\",\n },\n \"imports.maybe-class-name\": {\n color: \"#9cdcfe\",\n },\n \"exports.maybe-class-name\": {\n color: \"#9cdcfe\",\n },\n escape: {\n color: \"#d7ba7d\",\n },\n \"tag.punctuation\": {\n color: \"#808080\",\n },\n cdata: {\n color: \"#808080\",\n },\n \"attr-value\": {\n color: \"#ce9178\",\n },\n \"attr-value.punctuation\": {\n color: \"#ce9178\",\n },\n \"attr-value.punctuation.attr-equals\": {\n color: \"#d4d4d4\",\n },\n namespace: {\n color: \"#4ec9b0\",\n },\n 'pre[class*=\"language-javascript\"]': {\n color: \"#9cdcfe\",\n },\n 'code[class*=\"language-javascript\"]': {\n color: \"#9cdcfe\",\n },\n 'pre[class*=\"language-jsx\"]': {\n color: \"#9cdcfe\",\n },\n 'code[class*=\"language-jsx\"]': {\n color: \"#9cdcfe\",\n },\n 'pre[class*=\"language-typescript\"]': {\n color: \"#9cdcfe\",\n },\n 'code[class*=\"language-typescript\"]': {\n color: \"#9cdcfe\",\n },\n 'pre[class*=\"language-tsx\"]': {\n color: \"#9cdcfe\",\n },\n 'code[class*=\"language-tsx\"]': {\n color: \"#9cdcfe\",\n },\n 'pre[class*=\"language-css\"]': {\n color: \"#ce9178\",\n },\n 'code[class*=\"language-css\"]': {\n color: \"#ce9178\",\n },\n 'pre[class*=\"language-html\"]': {\n color: \"#d4d4d4\",\n },\n 'code[class*=\"language-html\"]': {\n color: \"#d4d4d4\",\n },\n \".language-regex .token.anchor\": {\n color: \"#dcdcaa\",\n },\n \".language-html .token.punctuation\": {\n color: \"#808080\",\n },\n 'pre[class*=\"language-\"] > code[class*=\"language-\"]': {\n position: \"relative\",\n zIndex: \"1\",\n },\n \".line-highlight.line-highlight\": {\n background: \"#f7ebc6\",\n boxShadow: \"inset 5px 0 0 #f7d87c\",\n zIndex: \"0\",\n },\n};\n"],"mappings":"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","names":[]}