@puckeditor/plugin-ai 0.1.1-canary.f3bb46a1 → 0.2.0-canary.3454bd05

package/dist/index.css

@@ -1,23 +1,24 @@
 /* css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/Chat/styles.module.css/#css-module-data */
-._Chat_1mv7h_1 {
+._Chat_lckw1_1 {
   background: white;
   height: 100%;
   display: flex;
   flex-direction: column;
+  text-align: left;
 }
-._Chat-header_1mv7h_8 {
+._Chat-header_lckw1_9 {
   display: block;
   padding: 8px 16px;
   font-weight: 600;
   border-bottom: 1px solid var(--puck-color-grey-09);
 }
 @media (min-width: 638px) {
-  ._Chat-header_1mv7h_8 {
+  ._Chat-header_lckw1_9 {
     display: block;
     padding: 16px;
   }
 }
-._Chat-placeholder_1mv7h_22 {
+._Chat-placeholder_lckw1_23 {
   align-items: center;
   color: var(--puck-color-grey-06);
   display: none;
@@ -29,37 +30,37 @@
   gap: 8px;
 }
 @media (min-width: 638px) {
-  ._Chat-placeholder_1mv7h_22 {
+  ._Chat-placeholder_lckw1_23 {
     display: flex;
   }
 }
-._Chat-actions_1mv7h_40 {
+._Chat-actions_lckw1_41 {
   display: flex;
   gap: 8px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 4px;
 }
-._Chat-action_1mv7h_40,
-._Chat-actionOutlined_1mv7h_49 {
+._Chat-action_lckw1_41,
+._Chat-actionOutlined_lckw1_50 {
   border: 1px solid var(--puck-color-azure-04);
   border-radius: 16px;
   padding: 4px 12px;
   font-size: 12px;
   cursor: pointer;
 }
-._Chat-action_1mv7h_40 {
+._Chat-action_lckw1_41 {
   background: var(--puck-color-azure-04);
   color: white;
 }
-._Chat-action_1mv7h_40:hover {
+._Chat-action_lckw1_41:hover {
   opacity: 0.8;
 }
-._Chat-actionOutlined_1mv7h_49 {
+._Chat-actionOutlined_lckw1_50 {
   background: transparent;
   color: var(--puck-color-azure-04);
 }
-._Chat-actionOutlined_1mv7h_49:hover {
+._Chat-actionOutlined_lckw1_50:hover {
   background: var(--puck-color-azure-11);
 }
 
@@ -263,7 +264,7 @@ p {
 }
 
 /* css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Button/Button.module.css/#css-module-data */
-._Button_1fon5_1 {
+._Button_1uqtp_1 {
   appearance: none;
   background: none;
   border: 1px solid transparent;
@@ -285,80 +286,98 @@ p {
   white-space: nowrap;
   margin: 0;
 }
-._Button_1fon5_1:hover,
-._Button_1fon5_1:active {
+._Button_1uqtp_1:hover,
+._Button_1uqtp_1:active {
   transition: none;
 }
-._Button--medium_1fon5_29 {
+._Button_1uqtp_1:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: 2px;
+}
+._Button--medium_1uqtp_34 {
   min-height: 34px;
   padding-bottom: 7px;
   padding-left: 19px;
   padding-right: 19px;
   padding-top: 7px;
 }
-._Button--large_1fon5_37 {
+._Button--large_1uqtp_42 {
   padding-bottom: 11px;
   padding-left: 19px;
   padding-right: 19px;
   padding-top: 11px;
 }
-._Button-icon_1fon5_44 {
+._Button-icon_1uqtp_49 {
   margin-top: 2px;
 }
-._Button--primary_1fon5_48 {
-  background: var(--puck-color-azure-04);
+._Button--brand_1uqtp_53 {
+  background-image:
+    linear-gradient(
+      210deg,
+      var(--puck-color-azure-01) 0%,
+      var(--puck-color-azure-03) 40%,
+      var(--puck-color-red-05) 100%);
+  border: none;
+  border-radius: 48px;
 }
-._Button_1fon5_1:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+@media (hover: hover) and (pointer: fine) {
+  ._Button--brand_1uqtp_53:hover {
+    opacity: 0.8;
+  }
+}
+._Button--brand_1uqtp_53:active {
+  opacity: 0.8;
+}
+._Button--primary_1uqtp_74 {
+  background: var(--puck-color-azure-04);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Button--primary_1fon5_48:hover {
+  ._Button--primary_1uqtp_74:hover {
     background-color: var(--puck-color-azure-03);
   }
 }
-._Button--primary_1fon5_48:active {
+._Button--primary_1uqtp_74:active {
   background-color: var(--puck-color-azure-02);
 }
-._Button--secondary_1fon5_67 {
+._Button--secondary_1uqtp_88 {
   border: 1px solid currentColor;
   color: currentColor;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Button--secondary_1fon5_67:hover {
+  ._Button--secondary_1uqtp_88:hover {
     background-color: var(--puck-color-azure-12);
     color: var(--puck-color-black);
   }
 }
-._Button--secondary_1fon5_67:active {
+._Button--secondary_1uqtp_88:active {
   background-color: var(--puck-color-azure-11);
   color: var(--puck-color-black);
 }
-._Button--danger_1fon5_84 {
+._Button--danger_1uqtp_105 {
   background: var(--puck-color-red-04);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Button--danger_1fon5_84:hover {
+  ._Button--danger_1uqtp_105:hover {
     background-color: var(--puck-color-red-03);
   }
 }
-._Button--danger_1fon5_84:active {
+._Button--danger_1uqtp_105:active {
   background-color: var(--puck-color-red-02);
 }
-._Button--flush_1fon5_98 {
+._Button--flush_1uqtp_119 {
   border-radius: 0;
 }
-._Button--disabled_1fon5_102,
-._Button--disabled_1fon5_102:hover {
+._Button--disabled_1uqtp_123,
+._Button--disabled_1uqtp_123:hover {
   background-color: var(--puck-color-grey-09);
   color: var(--puck-color-grey-05);
   cursor: not-allowed;
 }
-._Button--fullWidth_1fon5_109 {
+._Button--fullWidth_1uqtp_130 {
   justify-content: center;
   width: 100%;
 }
-._Button-spinner_1fon5_114 {
+._Button-spinner_1uqtp_135 {
   padding-left: 8px;
 }
 
@@ -1099,7 +1118,7 @@ p {
 }
 
 /* css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/ChatBody/styles.module.css/#css-module-data */
-._Chat_150yz_1 {
+._Chat_1ybjn_1 {
   --fade-size: 32px;
   --chat-background-color: white;
   display: flex;
@@ -1109,46 +1128,46 @@ p {
   overflow: hidden;
 }
 @media (min-width: 638px) {
-  ._Chat_150yz_1 {
+  ._Chat_1ybjn_1 {
     max-height: none;
   }
 }
-._Chat-inner_150yz_17 {
+._Chat-inner_1ybjn_17 {
   background-color: var(--chat-background-color);
   display: flex;
   flex-direction: column;
   max-height: 100%;
   position: relative;
 }
-._Chat--hasMessages_150yz_25 ._Chat-inner_150yz_17 {
+._Chat--hasMessages_1ybjn_25 ._Chat-inner_1ybjn_17 {
   padding-top: 0;
 }
-._Chat_150yz_1:not(._Chat--hasChildren_150yz_29) ._Chat-inner_150yz_17 {
+._Chat_1ybjn_1:not(._Chat--hasChildren_1ybjn_29) ._Chat-inner_1ybjn_17 {
   height: 100%;
   padding-top: 0;
 }
-._Chat--hasMessages_150yz_25 ._Chat-messages_150yz_34 {
+._Chat--hasMessages_1ybjn_25 ._Chat-messages_1ybjn_34 {
   display: flex;
   flex-direction: column-reverse;
   padding: 16px;
   overflow: auto;
 }
-._Chat-form_150yz_41 {
+._Chat-form_1ybjn_41 {
   background-color: white;
   padding: 16px;
 }
-._Chat--hideInput_150yz_46 ._Chat-form_150yz_41 {
+._Chat--hideInput_1ybjn_46 ._Chat-form_1ybjn_41 {
   display: none;
 }
-._Chat--hasMessages_150yz_25 ._Chat-form_150yz_41 {
+._Chat--hasMessages_1ybjn_25 ._Chat-form_1ybjn_41 {
   border-top: 1px solid var(--puck-color-grey-09);
 }
 @media (min-width: 638px) {
-  ._Chat-form_150yz_41 {
+  ._Chat-form_1ybjn_41 {
     border-top: 1px solid var(--puck-color-grey-09);
   }
 }
-._Chat-formHelper_150yz_60 {
+._Chat-formHelper_1ybjn_60 {
   align-items: center;
   display: flex;
   color: var(--puck-color-grey-04);
@@ -1157,11 +1176,11 @@ p {
   gap: 8px;
   padding-bottom: 12px;
 }
-._Chat--hasMessages_150yz_25 ._Chat-formHelper_150yz_60 {
+._Chat--hasMessages_1ybjn_25 ._Chat-formHelper_1ybjn_60 {
   opacity: 0;
   transition: opacity 250ms ease-in;
 }
-._Chat-examplePrompts_150yz_75 {
+._Chat-examplePrompts_1ybjn_75 {
   align-items: center;
   display: flex;
   flex-wrap: nowrap;
@@ -1170,45 +1189,46 @@ p {
   width: 100%;
   overflow-x: auto;
 }
-._Chat-examplePrompt_150yz_75 {
+._Chat-examplePrompt_1ybjn_75 {
   align-items: center;
   background: white;
   border: 1px solid var(--puck-color-grey-09);
   border-radius: 48px;
+  cursor: pointer;
   display: flex;
   gap: 4px;
   font-size: var(--puck-font-size-xxxs);
   padding: 6px 12px;
   text-wrap: nowrap;
 }
-._Chat-examplePrompt_150yz_75:hover {
+._Chat-examplePrompt_1ybjn_75:hover {
   background: var(--puck-color-azure-11);
   border-color: var(--puck-color-azure-08);
   color: var(--puck-color-azure-04);
 }
-._Chat-examplePromptArrow_150yz_103 {
+._Chat-examplePromptArrow_1ybjn_104 {
   margin-left: auto;
 }
-._Chat-default_150yz_107 {
+._Chat-default_1ybjn_108 {
   overflow-y: auto;
   flex-grow: 1;
 }
-._Chat--hasMessages_150yz_25 ._Chat-default_150yz_107 {
+._Chat--hasMessages_1ybjn_25 ._Chat-default_1ybjn_108 {
   opacity: 0;
   padding: 0;
   pointer-events: none;
   transition: opacity 250ms ease-in;
 }
-._Chat--hasMessages_150yz_25 {
+._Chat--hasMessages_1ybjn_25 {
   background-color: white;
   transition: background-color 250ms ease-in;
 }
-._ChatMessage_150yz_124 {
+._ChatMessage_1ybjn_125 {
   font-size: var(--puck-font-size-xs);
   line-height: var(--line-height-s);
   overflow-wrap: break-word;
 }
-._ChatMessage--userRole_150yz_130 ._ChatMessage-text_150yz_130 {
+._ChatMessage--userRole_1ybjn_131 ._ChatMessage-text_1ybjn_131 {
   background: var(--puck-color-azure-10);
   border-radius: 16px;
   color: var(--puck-color-grey-03);
@@ -1217,64 +1237,70 @@ p {
   margin-top: 8px;
   padding: 12px 16px;
 }
-._ChatMessage_150yz_124 ul,
-._ChatMessage_150yz_124 ol {
+._ChatMessage_1ybjn_125 ul,
+._ChatMessage_1ybjn_125 ol {
   list-style: decimal;
   margin: 0;
   margin-bottom: 12px;
   margin-top: 12px;
   padding-left: 32px;
 }
-._ChatMessage_150yz_124 li {
+._ChatMessage_1ybjn_125 li {
   margin-bottom: 8px;
   margin-top: 8px;
   padding-left: 8px;
 }
-._ChatMessage_150yz_124 h1,
-._ChatMessage_150yz_124 h2,
-._ChatMessage_150yz_124 h3,
-._ChatMessage_150yz_124 h4,
-._ChatMessage_150yz_124 h5,
-._ChatMessage_150yz_124 h6 {
+._ChatMessage_1ybjn_125 h1,
+._ChatMessage_1ybjn_125 h2,
+._ChatMessage_1ybjn_125 h3,
+._ChatMessage_1ybjn_125 h4,
+._ChatMessage_1ybjn_125 h5,
+._ChatMessage_1ybjn_125 h6 {
   font-weight: 600;
 }
-._ChatMessage_150yz_124 h1 {
+._ChatMessage_1ybjn_125 h1 {
   font-size: var(--puck-font-l);
 }
-._ChatMessage_150yz_124 h2 {
+._ChatMessage_1ybjn_125 h2 {
   font-size: var(--puck-font-m);
 }
-._ChatMessage_150yz_124 h3 {
+._ChatMessage_1ybjn_125 h3 {
   font-size: var(--puck-font-m);
 }
-._ChatMessage_150yz_124 h4 {
+._ChatMessage_1ybjn_125 h4 {
   font-size: var(--puck-font-s);
 }
-._ChatMessage_150yz_124 h5 {
+._ChatMessage_1ybjn_125 h5 {
   font-size: var(--puck-font-xs);
 }
-._ChatMessage_150yz_124 h6 {
+._ChatMessage_1ybjn_125 h6 {
   font-size: var(--puck-font-xm);
 }
-._ChatMessage_150yz_124 p {
+._ChatMessage_1ybjn_125 p {
   margin-bottom: 8px;
   margin-top: 8px;
 }
-._ChatMessage_150yz_124 a {
+._ChatMessage--userRole_1ybjn_131 ._ChatMessage-text_1ybjn_131 > *:first-of-type {
+  margin-top: 0px;
+}
+._ChatMessage--userRole_1ybjn_131 ._ChatMessage-text_1ybjn_131 > *:last-of-type {
+  margin-bottom: 0px;
+}
+._ChatMessage_1ybjn_125 a {
   color: var(--puck-color-azure-04);
   font-weight: 600;
   text-decoration: none;
 }
-._ChatMessage_150yz_124 a:hover {
+._ChatMessage_1ybjn_125 a:hover {
   color: var(--puck-color-azure-05);
 }
-._ChatMessage_150yz_124 hr {
+._ChatMessage_1ybjn_125 hr {
   border-top: none;
   border-bottom-color: var(--puck-color-grey-09);
   margin-bottom: 16px;
   margin-top: 16px;
 }
-._ChatMessage_150yz_124 blockquote {
+._ChatMessage_1ybjn_125 blockquote {
   margin-bottom: 8px;
   margin-top: 8px;
   margin-left: 0;
@@ -1283,7 +1309,7 @@ p {
   padding-bottom: 2px;
   padding-top: 2px;
 }
-._ChatMessage-data_150yz_220 {
+._ChatMessage-data_1ybjn_229 {
   background: var(--puck-color-grey-12);
   border: 1px solid var(--puck-color-grey-08);
   border-radius: 16px;
@@ -1293,19 +1319,19 @@ p {
   margin-top: 12px;
   padding: 12px 16px;
 }
-._ChatMessage-dataInner_150yz_231 {
+._ChatMessage-dataInner_1ybjn_240 {
   align-items: center;
   display: flex;
   gap: 8px;
 }
-._ChatMessage-dataIcon_150yz_237 {
+._ChatMessage-dataIcon_1ybjn_246 {
   display: flex;
 }
-._Chat-loader_150yz_241 {
+._Chat-loader_1ybjn_250 {
   padding: 16px;
   padding-top: 0;
 }
-._Chat-error_150yz_246 {
+._Chat-error_1ybjn_255 {
   align-items: center;
   display: flex;
   gap: 8px;
@@ -1313,10 +1339,10 @@ p {
   margin: 16px;
   margin-top: 0;
 }
-._Chat-errorLabel_150yz_255 {
+._Chat-errorLabel_1ybjn_264 {
   color: var(--puck-color-red-04);
 }
-._Chat-errorAction_150yz_259 {
+._Chat-errorAction_1ybjn_268 {
   margin-left: auto;
 }
 

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LanguageModelUsage, UIMessage, DataUIPart, ChatStatus } from 'ai';
+import { PuckAction } from '@measured/puck';
 
 type _JSONSchema = boolean | JSONSchema;
 type JSONSchema = {
@@ -98,16 +100,93 @@ declare module "@measured/puck" {
   }
 }
 
+type ToolStatus = {
+    loading: boolean;
+    label: string;
+    error?: {
+        message: string;
+    };
+};
+type DataToolStatus = {
+    status: ToolStatus;
+    toolCallId: string;
+};
+type AddOperation = {
+    op: "add";
+    id: string;
+    index: number;
+    zone: string;
+    type: string;
+    props: object;
+};
+type UpdateOperation = {
+    op: "update";
+    id: string;
+    props: object;
+};
+type UpdateRootOperation = {
+    op: "updateRoot";
+    props: object;
+};
+type MoveOperation = {
+    op: "move";
+    zone: string;
+    id: string;
+    index: number;
+};
+type DeleteOperation = {
+    op: "delete";
+    id: string;
+};
+type DuplicateOperation = {
+    op: "duplicate";
+    id: string;
+};
+type ResetOperation = {
+    op: "reset";
+};
+type Operation = AddOperation | UpdateOperation | UpdateRootOperation | MoveOperation | DeleteOperation | DuplicateOperation | ResetOperation;
+type PuckDataParts = {
+    "new-chat-created": {
+        chatId: string;
+    };
+    "puck-actions": PuckAction[];
+    "build-op": Operation;
+    "tool-status": DataToolStatus;
+    "user-tool": {
+        toolCallId: string;
+        tools: {
+            name: string;
+            input: any;
+        }[];
+    };
+};
+type PuckProviderMetadata = {
+    tokenUsage?: LanguageModelUsage;
+};
+
+type PuckMessage = UIMessage<PuckProviderMetadata, PuckDataParts>;
+
 type AiPluginProps = {
     host?: string;
     chat?: {
         onSubmit?: (prompt: string) => void;
         examplePrompts?: {
-            href: string;
             label: string;
+            href?: string;
+            onClick?: () => void;
         }[];
     };
 };
+declare global {
+    interface Window {
+        __PUCK_AI: {
+            setMessages: (_messages: PuckMessage[]) => void;
+            processData: (_messages: DataUIPart<PuckDataParts>) => void;
+            setStatus: (_status: ChatStatus) => void;
+        };
+    }
+}
 
 declare function createAiPlugin(opts?: AiPluginProps): {
     label: string;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LanguageModelUsage, UIMessage, DataUIPart, ChatStatus } from 'ai';
+import { PuckAction } from '@measured/puck';
 
 type _JSONSchema = boolean | JSONSchema;
 type JSONSchema = {
@@ -98,16 +100,93 @@ declare module "@measured/puck" {
   }
 }
 
+type ToolStatus = {
+    loading: boolean;
+    label: string;
+    error?: {
+        message: string;
+    };
+};
+type DataToolStatus = {
+    status: ToolStatus;
+    toolCallId: string;
+};
+type AddOperation = {
+    op: "add";
+    id: string;
+    index: number;
+    zone: string;
+    type: string;
+    props: object;
+};
+type UpdateOperation = {
+    op: "update";
+    id: string;
+    props: object;
+};
+type UpdateRootOperation = {
+    op: "updateRoot";
+    props: object;
+};
+type MoveOperation = {
+    op: "move";
+    zone: string;
+    id: string;
+    index: number;
+};
+type DeleteOperation = {
+    op: "delete";
+    id: string;
+};
+type DuplicateOperation = {
+    op: "duplicate";
+    id: string;
+};
+type ResetOperation = {
+    op: "reset";
+};
+type Operation = AddOperation | UpdateOperation | UpdateRootOperation | MoveOperation | DeleteOperation | DuplicateOperation | ResetOperation;
+type PuckDataParts = {
+    "new-chat-created": {
+        chatId: string;
+    };
+    "puck-actions": PuckAction[];
+    "build-op": Operation;
+    "tool-status": DataToolStatus;
+    "user-tool": {
+        toolCallId: string;
+        tools: {
+            name: string;
+            input: any;
+        }[];
+    };
+};
+type PuckProviderMetadata = {
+    tokenUsage?: LanguageModelUsage;
+};
+
+type PuckMessage = UIMessage<PuckProviderMetadata, PuckDataParts>;
+
 type AiPluginProps = {
     host?: string;
     chat?: {
         onSubmit?: (prompt: string) => void;
         examplePrompts?: {
-            href: string;
             label: string;
+            href?: string;
+            onClick?: () => void;
         }[];
     };
 };
+declare global {
+    interface Window {
+        __PUCK_AI: {
+            setMessages: (_messages: PuckMessage[]) => void;
+            processData: (_messages: DataUIPart<PuckDataParts>) => void;
+            setStatus: (_status: ChatStatus) => void;
+        };
+    }
+}
 
 declare function createAiPlugin(opts?: AiPluginProps): {
     label: string;