Skip to content

Commit

Permalink
0,1
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zochory
Zochory committed Dec 22, 2024
1 parent 608767d commit bf18c56
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 46 deletions.
6 changes: 2 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
{
"name": "agentic-ui",
"name": "agentic-ui-monorepo",
"private": true,
"version": "0.1.0",
"license": "MIT",
"workspaces": [
"packages/core",
"packages/components",
"packages/utils",
"packages/docs"
"packages/components"
],
"scripts": {
"dev": "yarn workspace docs dev",
Expand Down
42 changes: 21 additions & 21 deletions packages/components/dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,18 +164,18 @@ var AgentMessage = ({
}) => {
const messageStyles = {
display: "flex",
gap: import_core2.theme.spacing[4],
padding: import_core2.theme.spacing[4],
backgroundColor: import_core2.theme.background.secondary,
gap: import_core2.theme.spacing.md,
padding: import_core2.theme.spacing.md,
backgroundColor: import_core2.theme.colors.background.secondary,
borderRadius: import_core2.theme.radius.lg,
color: import_core2.theme.text.primary,
color: import_core2.theme.colors.text.primary,
...style
};
const avatarStyles = {
width: "40px",
height: "40px",
borderRadius: "50%",
backgroundColor: import_core2.theme.colors.agent[role],
backgroundColor: import_core2.theme.colors.primary,
display: "flex",
alignItems: "center",
justifyContent: "center",
Expand All @@ -185,16 +185,16 @@ var AgentMessage = ({
flex: 1,
display: "flex",
flexDirection: "column",
gap: import_core2.theme.spacing[2]
gap: import_core2.theme.spacing.sm
};
const expandableStyles = {
backgroundColor: import_core2.theme.background.tertiary,
backgroundColor: import_core2.theme.colors.background.tertiary,
borderRadius: import_core2.theme.radius.md,
padding: import_core2.theme.spacing[3],
marginTop: import_core2.theme.spacing[2],
padding: import_core2.theme.spacing.md,
marginTop: import_core2.theme.spacing.sm,
cursor: "pointer"
};
return /* @__PURE__ */ import_react3.default.createElement("div", { className, style: messageStyles }, /* @__PURE__ */ import_react3.default.createElement("div", { style: avatarStyles }, typeof avatar === "string" ? /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: `${role} avatar`, style: { width: "100%", height: "100%", borderRadius: "50%" } }) : avatar || role.charAt(0).toUpperCase()), /* @__PURE__ */ import_react3.default.createElement("div", { style: contentStyles }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: import_core2.theme.fontSizes.sm, color: import_core2.theme.text.secondary } }, role.charAt(0).toUpperCase() + role.slice(1), timestamp && /* @__PURE__ */ import_react3.default.createElement("span", { style: { marginLeft: import_core2.theme.spacing[2] } }, timestamp)), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: import_core2.theme.fontSizes.md } }, content), reasoning && /* @__PURE__ */ import_react3.default.createElement(
return /* @__PURE__ */ import_react3.default.createElement("div", { className, style: messageStyles }, /* @__PURE__ */ import_react3.default.createElement("div", { style: avatarStyles }, typeof avatar === "string" ? /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: `${role} avatar`, style: { width: "100%", height: "100%", borderRadius: "50%" } }) : avatar || role.charAt(0).toUpperCase()), /* @__PURE__ */ import_react3.default.createElement("div", { style: contentStyles }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: import_core2.theme.typography.sm, color: import_core2.theme.colors.text.secondary } }, role.charAt(0).toUpperCase() + role.slice(1), timestamp && /* @__PURE__ */ import_react3.default.createElement("span", { style: { marginLeft: import_core2.theme.spacing.sm } }, timestamp)), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: import_core2.theme.typography.md } }, content), reasoning && /* @__PURE__ */ import_react3.default.createElement(
"div",
{
style: expandableStyles,
Expand All @@ -205,7 +205,7 @@ var AgentMessage = ({
alignItems: "center",
justifyContent: "space-between"
} }, /* @__PURE__ */ import_react3.default.createElement("span", null, "Reasoning"), /* @__PURE__ */ import_react3.default.createElement("span", null, reasoning.isExpanded ? "\u25BC" : "\u25B6")),
/* @__PURE__ */ import_react3.default.createElement(Collapse, { isOpen: reasoning.isExpanded || false }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { color: import_core2.theme.text.secondary, marginTop: import_core2.theme.spacing[2] } }, reasoning.thoughts.map((thought, index) => /* @__PURE__ */ import_react3.default.createElement("div", { key: index, style: { marginBottom: import_core2.theme.spacing[2] } }, thought))))
/* @__PURE__ */ import_react3.default.createElement(Collapse, { isOpen: reasoning.isExpanded || false }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { color: import_core2.theme.colors.text.secondary, marginTop: import_core2.theme.spacing.sm } }, reasoning.thoughts.map((thought, index) => /* @__PURE__ */ import_react3.default.createElement("div", { key: index, style: { marginBottom: import_core2.theme.spacing.sm } }, thought))))
), toolCalls == null ? void 0 : toolCalls.map((toolCall, index) => /* @__PURE__ */ import_react3.default.createElement(
"div",
{
Expand All @@ -218,20 +218,20 @@ var AgentMessage = ({
alignItems: "center",
justifyContent: "space-between"
} }, /* @__PURE__ */ import_react3.default.createElement("span", null, toolCall.tool), /* @__PURE__ */ import_react3.default.createElement("span", null, toolCall.isExpanded ? "\u25BC" : "\u25B6")),
/* @__PURE__ */ import_react3.default.createElement(Collapse, { isOpen: toolCall.isExpanded || false }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { color: import_core2.theme.text.secondary, marginTop: import_core2.theme.spacing[2] } }, /* @__PURE__ */ import_react3.default.createElement("pre", { style: {
fontFamily: import_core2.theme.fonts.mono,
fontSize: import_core2.theme.fontSizes.sm,
/* @__PURE__ */ import_react3.default.createElement(Collapse, { isOpen: toolCall.isExpanded || false }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { color: import_core2.theme.colors.text.secondary, marginTop: import_core2.theme.spacing.sm } }, /* @__PURE__ */ import_react3.default.createElement("pre", { style: {
fontFamily: "monospace",
fontSize: import_core2.theme.typography.sm,
overflow: "auto",
padding: import_core2.theme.spacing[2],
backgroundColor: import_core2.theme.background.primary,
padding: import_core2.theme.spacing.sm,
backgroundColor: import_core2.theme.colors.background.primary,
borderRadius: import_core2.theme.radius.sm,
margin: `${import_core2.theme.spacing[2]} 0`
margin: `${import_core2.theme.spacing.sm} 0`
} }, JSON.stringify(toolCall.args, null, 2)), toolCall.result && /* @__PURE__ */ import_react3.default.createElement("pre", { style: {
fontFamily: import_core2.theme.fonts.mono,
fontSize: import_core2.theme.fontSizes.sm,
fontFamily: "monospace",
fontSize: import_core2.theme.typography.sm,
overflow: "auto",
padding: import_core2.theme.spacing[2],
backgroundColor: import_core2.theme.background.primary,
padding: import_core2.theme.spacing.sm,
backgroundColor: import_core2.theme.colors.background.primary,
borderRadius: import_core2.theme.radius.sm
} }, toolCall.result)))
))));
Expand Down
42 changes: 21 additions & 21 deletions packages/components/dist/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,18 +122,18 @@ var AgentMessage = ({
}) => {
const messageStyles = {
display: "flex",
gap: theme2.spacing[4],
padding: theme2.spacing[4],
backgroundColor: theme2.background.secondary,
gap: theme2.spacing.md,
padding: theme2.spacing.md,
backgroundColor: theme2.colors.background.secondary,
borderRadius: theme2.radius.lg,
color: theme2.text.primary,
color: theme2.colors.text.primary,
...style
};
const avatarStyles = {
width: "40px",
height: "40px",
borderRadius: "50%",
backgroundColor: theme2.colors.agent[role],
backgroundColor: theme2.colors.primary,
display: "flex",
alignItems: "center",
justifyContent: "center",
Expand All @@ -143,16 +143,16 @@ var AgentMessage = ({
flex: 1,
display: "flex",
flexDirection: "column",
gap: theme2.spacing[2]
gap: theme2.spacing.sm
};
const expandableStyles = {
backgroundColor: theme2.background.tertiary,
backgroundColor: theme2.colors.background.tertiary,
borderRadius: theme2.radius.md,
padding: theme2.spacing[3],
marginTop: theme2.spacing[2],
padding: theme2.spacing.md,
marginTop: theme2.spacing.sm,
cursor: "pointer"
};
return /* @__PURE__ */ React3.createElement("div", { className, style: messageStyles }, /* @__PURE__ */ React3.createElement("div", { style: avatarStyles }, typeof avatar === "string" ? /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: `${role} avatar`, style: { width: "100%", height: "100%", borderRadius: "50%" } }) : avatar || role.charAt(0).toUpperCase()), /* @__PURE__ */ React3.createElement("div", { style: contentStyles }, /* @__PURE__ */ React3.createElement("div", { style: { fontSize: theme2.fontSizes.sm, color: theme2.text.secondary } }, role.charAt(0).toUpperCase() + role.slice(1), timestamp && /* @__PURE__ */ React3.createElement("span", { style: { marginLeft: theme2.spacing[2] } }, timestamp)), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: theme2.fontSizes.md } }, content), reasoning && /* @__PURE__ */ React3.createElement(
return /* @__PURE__ */ React3.createElement("div", { className, style: messageStyles }, /* @__PURE__ */ React3.createElement("div", { style: avatarStyles }, typeof avatar === "string" ? /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: `${role} avatar`, style: { width: "100%", height: "100%", borderRadius: "50%" } }) : avatar || role.charAt(0).toUpperCase()), /* @__PURE__ */ React3.createElement("div", { style: contentStyles }, /* @__PURE__ */ React3.createElement("div", { style: { fontSize: theme2.typography.sm, color: theme2.colors.text.secondary } }, role.charAt(0).toUpperCase() + role.slice(1), timestamp && /* @__PURE__ */ React3.createElement("span", { style: { marginLeft: theme2.spacing.sm } }, timestamp)), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: theme2.typography.md } }, content), reasoning && /* @__PURE__ */ React3.createElement(
"div",
{
style: expandableStyles,
Expand All @@ -163,7 +163,7 @@ var AgentMessage = ({
alignItems: "center",
justifyContent: "space-between"
} }, /* @__PURE__ */ React3.createElement("span", null, "Reasoning"), /* @__PURE__ */ React3.createElement("span", null, reasoning.isExpanded ? "\u25BC" : "\u25B6")),
/* @__PURE__ */ React3.createElement(Collapse, { isOpen: reasoning.isExpanded || false }, /* @__PURE__ */ React3.createElement("div", { style: { color: theme2.text.secondary, marginTop: theme2.spacing[2] } }, reasoning.thoughts.map((thought, index) => /* @__PURE__ */ React3.createElement("div", { key: index, style: { marginBottom: theme2.spacing[2] } }, thought))))
/* @__PURE__ */ React3.createElement(Collapse, { isOpen: reasoning.isExpanded || false }, /* @__PURE__ */ React3.createElement("div", { style: { color: theme2.colors.text.secondary, marginTop: theme2.spacing.sm } }, reasoning.thoughts.map((thought, index) => /* @__PURE__ */ React3.createElement("div", { key: index, style: { marginBottom: theme2.spacing.sm } }, thought))))
), toolCalls == null ? void 0 : toolCalls.map((toolCall, index) => /* @__PURE__ */ React3.createElement(
"div",
{
Expand All @@ -176,20 +176,20 @@ var AgentMessage = ({
alignItems: "center",
justifyContent: "space-between"
} }, /* @__PURE__ */ React3.createElement("span", null, toolCall.tool), /* @__PURE__ */ React3.createElement("span", null, toolCall.isExpanded ? "\u25BC" : "\u25B6")),
/* @__PURE__ */ React3.createElement(Collapse, { isOpen: toolCall.isExpanded || false }, /* @__PURE__ */ React3.createElement("div", { style: { color: theme2.text.secondary, marginTop: theme2.spacing[2] } }, /* @__PURE__ */ React3.createElement("pre", { style: {
fontFamily: theme2.fonts.mono,
fontSize: theme2.fontSizes.sm,
/* @__PURE__ */ React3.createElement(Collapse, { isOpen: toolCall.isExpanded || false }, /* @__PURE__ */ React3.createElement("div", { style: { color: theme2.colors.text.secondary, marginTop: theme2.spacing.sm } }, /* @__PURE__ */ React3.createElement("pre", { style: {
fontFamily: "monospace",
fontSize: theme2.typography.sm,
overflow: "auto",
padding: theme2.spacing[2],
backgroundColor: theme2.background.primary,
padding: theme2.spacing.sm,
backgroundColor: theme2.colors.background.primary,
borderRadius: theme2.radius.sm,
margin: `${theme2.spacing[2]} 0`
margin: `${theme2.spacing.sm} 0`
} }, JSON.stringify(toolCall.args, null, 2)), toolCall.result && /* @__PURE__ */ React3.createElement("pre", { style: {
fontFamily: theme2.fonts.mono,
fontSize: theme2.fontSizes.sm,
fontFamily: "monospace",
fontSize: theme2.typography.sm,
overflow: "auto",
padding: theme2.spacing[2],
backgroundColor: theme2.background.primary,
padding: theme2.spacing.sm,
backgroundColor: theme2.colors.background.primary,
borderRadius: theme2.radius.sm
} }, toolCall.result)))
))));
Expand Down

0 comments on commit bf18c56

Please sign in to comment.