@bikdotai/bik-component-library 0.0.868-beta.9 → 0.0.869-beta.0

package/dist/esm/components/bik-copilot/CopilotFeedbackModal.styled.js

@@ -0,0 +1,122 @@
+import r from "styled-components";
+import { COLORS as o } from "../../constants/Theme.js";
+const a = r.div`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	width: 220px;
+	padding: 14px;
+	background: ${o.surface.standard};
+	border: 1px solid ${o.stroke.primary};
+	border-radius: 12px;
+	box-shadow: 0 12px 32px rgba(40, 3, 78, 0.16);
+`, i = r.div`
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 8px;
+`, d = r.div`
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+`, s = r.span`
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 600;
+	line-height: 18px;
+	color: ${o.content.primary};
+`, p = r.span`
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 16px;
+	color: ${o.content.placeholder};
+`, c = r.button`
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	flex-shrink: 0;
+	padding: 0;
+	border: none;
+	border-radius: 4px;
+	background: transparent;
+	color: ${o.content.placeholder};
+	cursor: pointer;
+	transition: background 0.15s ease, color 0.15s ease;
+
+	&:hover {
+		background: ${o.surface.hovered};
+		color: ${o.content.primary};
+	}
+`, l = r.div`
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+`, x = r.button`
+	padding: 4px 8px;
+	border-radius: 6px;
+	border: 1px solid
+		${({ $selected: e }) => e ? o.stroke.brand : o.stroke.primary};
+	background: ${({ $selected: e }) => e ? o.background.brandVeryLight : o.surface.standard};
+	color: ${({ $selected: e }) => e ? o.content.brand : o.content.secondary};
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 16px;
+	text-align: left;
+	cursor: pointer;
+	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+	&:hover {
+		background: ${({ $selected: e }) => e ? o.background.brandVeryLight : o.surface.hovered};
+	}
+`, b = r.textarea`
+	min-height: 64px;
+	padding: 8px;
+	border: 1px solid ${o.stroke.primary};
+	border-radius: 8px;
+	background: ${o.surface.standard};
+	color: ${o.content.primary};
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 16px;
+	resize: none;
+	outline: none;
+
+	&::placeholder {
+		color: ${o.content.placeholder};
+	}
+
+	&:focus {
+		border-color: ${o.stroke.brand};
+	}
+`, u = r.button`
+	padding: 8px;
+	border: none;
+	border-radius: 8px;
+	background: ${o.background.brand};
+	color: ${o.content.primaryInverse};
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 16px;
+	cursor: pointer;
+	transition: background 0.15s ease;
+
+	&:hover {
+		background: ${o.background.brandHovered};
+	}
+`;
+export {
+  a as ModalCard,
+  c as ModalClose,
+  i as ModalHeader,
+  d as ModalHeading,
+  p as ModalSubtitle,
+  s as ModalTitle,
+  b as NoteInput,
+  x as ReasonChip,
+  l as ReasonList,
+  u as SubmitButton
+};
+//# sourceMappingURL=CopilotFeedbackModal.styled.js.map

package/dist/esm/components/bik-copilot/CopilotFeedbackModal.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopilotFeedbackModal.styled.js","sources":["../../../../src/components/bik-copilot/CopilotFeedbackModal.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const ModalCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n\twidth: 220px;\n\tpadding: 14px;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 12px;\n\tbox-shadow: 0 12px 32px rgba(40, 3, 78, 0.16);\n`;\n\nexport const ModalHeader = styled.div`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tgap: 8px;\n`;\n\nexport const ModalHeading = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n`;\n\nexport const ModalTitle = styled.span`\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tfont-weight: 600;\n\tline-height: 18px;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const ModalSubtitle = styled.span`\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.placeholder};\n`;\n\nexport const ModalClose = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tpadding: 0;\n\tborder: none;\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcolor: ${COLORS.content.placeholder};\n\tcursor: pointer;\n\ttransition: background 0.15s ease, color 0.15s ease;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t\tcolor: ${COLORS.content.primary};\n\t}\n`;\n\nexport const ReasonList = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 6px;\n`;\n\n/* A toggle, not a radio: more than one thing can be wrong with one reply. */\nexport const ReasonChip = styled.button<{ $selected: boolean }>`\n\tpadding: 4px 8px;\n\tborder-radius: 6px;\n\tborder: 1px solid\n\t\t${({ $selected }) =>\n\t\t\t$selected ? COLORS.stroke.brand : COLORS.stroke.primary};\n\tbackground: ${({ $selected }) =>\n\t\t$selected ? COLORS.background.brandVeryLight : COLORS.surface.standard};\n\tcolor: ${({ $selected }) =>\n\t\t$selected ? COLORS.content.brand : COLORS.content.secondary};\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\ttext-align: left;\n\tcursor: pointer;\n\ttransition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n\n\t&:hover {\n\t\tbackground: ${({ $selected }) =>\n\t\t\t$selected ? COLORS.background.brandVeryLight : COLORS.surface.hovered};\n\t}\n`;\n\nexport const NoteInput = styled.textarea`\n\tmin-height: 64px;\n\tpadding: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbackground: ${COLORS.surface.standard};\n\tcolor: ${COLORS.content.primary};\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\tresize: none;\n\toutline: none;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n\n\t&:focus {\n\t\tborder-color: ${COLORS.stroke.brand};\n\t}\n`;\n\nexport const SubmitButton = styled.button`\n\tpadding: 8px;\n\tborder: none;\n\tborder-radius: 8px;\n\tbackground: ${COLORS.background.brand};\n\tcolor: ${COLORS.content.primaryInverse};\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tline-height: 16px;\n\tcursor: pointer;\n\ttransition: background 0.15s ease;\n\n\t&:hover {\n\t\tbackground: ${COLORS.background.brandHovered};\n\t}\n`;\n"],"names":["ModalCard","styled","COLORS","ModalHeader","ModalHeading","ModalTitle","ModalSubtitle","ModalClose","ReasonList","ReasonChip","$selected","NoteInput","SubmitButton"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMjBC,EAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA,GAK7BC,IAAcF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOrBG,IAAeH,EAAO;AAAA;AAAA;AAAA;AAAA,GAMtBI,IAAaJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKvBC,EAAO,QAAQ,OAAO;AAAA,GAGnBI,IAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA,UAI1BC,EAAO,QAAQ,WAAW;AAAA,GAGvBK,IAAaN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWvBC,EAAO,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKpBA,EAAO,QAAQ,OAAO;AAAA,WAC3BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIpBM,IAAaP,EAAO;AAAA;AAAA;AAAA;AAAA,GAOpBQ,IAAaR,EAAO;AAAA;AAAA;AAAA;AAAA,IAI7B,CAAC,EAAE,WAAAS,EAAA,MACJA,IAAYR,EAAO,OAAO,QAAQA,EAAO,OAAO,OAAO;AAAA,eAC3C,CAAC,EAAE,WAAAQ,EAAA,MAChBA,IAAYR,EAAO,WAAW,iBAAiBA,EAAO,QAAQ,QAAQ;AAAA,UAC9D,CAAC,EAAE,WAAAQ,EAAA,MACXA,IAAYR,EAAO,QAAQ,QAAQA,EAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAAQ,EAAA,MAChBA,IAAYR,EAAO,WAAW,iBAAiBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI3DS,IAAYV,EAAO;AAAA;AAAA;AAAA,qBAGXC,EAAO,OAAO,OAAO;AAAA;AAAA,eAE3BA,EAAO,QAAQ,QAAQ;AAAA,UAC5BA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQrBA,EAAO,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA,kBAInBA,EAAO,OAAO,KAAK;AAAA;AAAA,GAIxBU,IAAeX,EAAO;AAAA;AAAA;AAAA;AAAA,eAIpBC,EAAO,WAAW,KAAK;AAAA,UAC5BA,EAAO,QAAQ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASvBA,EAAO,WAAW,YAAY;AAAA;AAAA;"}

package/dist/esm/components/bik-copilot/CopilotPanel.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { CopilotPanelProps } from './model';
+/**
+ * Chat panel used by the copilot. Fully presentational: it renders the
+ * transcript it is given and reports user intent through callbacks, so it works
+ * against any backend.
+ */
+export declare const CopilotPanel: React.FC<CopilotPanelProps>;
+export default CopilotPanel;