@cnt-dev/chat-ui 0.1.0

package/resources/chatui/themes/base/ChatBox.less

@@ -0,0 +1,702 @@
+/* Theme Parameter Toolbox: https://sdk.openui5.org/test-resources/sap/m/demokit/theming/webapp/index.html */
+
+.cnetChatBox {
+	display: flex;
+	flex-direction: row;
+	box-sizing: border-box;
+	position: relative;
+	min-width: 32rem;
+	min-height: 24rem;
+	background-color: @sapUiGroupContentBackground;
+	color: @sapUiBaseText;
+	border: 1px solid @sapUiGroupContentBorderColor;
+	border-radius: 0.5rem;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	overflow: hidden;
+}
+
+.cnetChatBox-sidebar {
+	flex: 0 0 16rem;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	background-color: @sapUiListBackground;
+	border-right: 1px solid @sapUiGroupContentBorderColor;
+}
+
+.cnetChatBox-sidebar-header {
+	flex: 0 0 auto;
+	padding: 0.75rem 1rem 0.5rem;
+	border-bottom: 1px solid @sapUiGroupContentBorderColor;
+}
+
+.cnetChatBox-sidebar-title {
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: @sapUiContentLabelColor;
+}
+
+.cnetChatBox-conversations {
+	flex: 1 1 auto;
+	overflow-y: auto;
+	padding: 0.4rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.cnetChatBox-conversations-empty {
+	padding: 1rem 0.5rem;
+	color: @sapUiContentLabelColor;
+	font-size: 0.85rem;
+	font-style: italic;
+	text-align: center;
+}
+
+.cnetChatBox-conversation {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: 0.35rem;
+	padding: 0.5rem 0.6rem;
+	border: 1px solid transparent;
+	border-radius: 0.4rem;
+	cursor: pointer;
+	transition: background-color 0.15s ease, border-color 0.15s ease;
+	outline: none;
+}
+
+.cnetChatBox-conversation:hover,
+.cnetChatBox-conversation:focus-visible {
+	background-color: @sapUiListHoverBackground;
+}
+
+.cnetChatBox-conversation--active {
+	background-color: @sapUiListSelectionBackgroundColor;
+	border-color: @sapUiListSelectionBorderColor;
+}
+
+.cnetChatBox-conversation--active:hover {
+	background-color: @sapUiListSelectionBackgroundColor;
+}
+
+.cnetChatBox-conversation-body {
+	flex: 1 1 auto;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.1rem;
+}
+
+.cnetChatBox-conversation-title {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: @sapUiBaseText;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cnetChatBox-conversation-snippet {
+	font-size: 0.75rem;
+	color: @sapUiContentLabelColor;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cnetChatBox-conversation-time {
+	font-size: 0.7rem;
+	color: @sapUiContentLabelColor;
+	margin-top: 0.1rem;
+}
+
+.cnetChatBox-conversation-remove {
+	flex: 0 0 auto;
+	background: transparent;
+	border: none;
+	color: @sapUiContentLabelColor;
+	cursor: pointer;
+	font-size: 1rem;
+	line-height: 1;
+	padding: 0.1rem 0.35rem;
+	border-radius: 0.25rem;
+	opacity: 0;
+	transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.cnetChatBox-conversation:hover .cnetChatBox-conversation-remove,
+.cnetChatBox-conversation:focus-within .cnetChatBox-conversation-remove,
+.cnetChatBox-conversation--active .cnetChatBox-conversation-remove {
+	opacity: 1;
+}
+
+.cnetChatBox-conversation-remove:hover,
+.cnetChatBox-conversation-remove:focus-visible {
+	background-color: @sapUiButtonHoverBackground;
+	color: @sapUiButtonTextColor;
+	outline: none;
+}
+
+.cnetChatBox-main {
+	flex: 1 1 auto;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.cnetChatBox-header {
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.5rem 0.75rem;
+	border-bottom: 1px solid @sapUiGroupContentBorderColor;
+	background-color: @sapUiListBackground;
+}
+
+.cnetChatBox-header-title {
+	flex: 1 1 auto;
+	min-width: 0;
+	font-size: 0.95rem;
+	font-weight: 600;
+	color: @sapUiBaseText;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cnetChatBox-newChatButton {
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	padding: 0.3rem 0.75rem;
+	background-color: @sapUiButtonEmphasizedBackground;
+	color: @sapUiButtonEmphasizedTextColor;
+	border: none;
+	border-radius: 0.4rem;
+	cursor: pointer;
+	font-family: inherit;
+	font-size: 0.85rem;
+	line-height: 1.2;
+	transition: background-color 0.15s ease;
+}
+
+.cnetChatBox-newChatButton:hover:not(:disabled) {
+	background-color: @sapUiButtonEmphasizedHoverBackground;
+}
+
+.cnetChatBox-newChatButton:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 2px @sapUiFieldFocusBorderColor;
+}
+
+.cnetChatBox-newChatButton:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.cnetChatBox-newChatButton .cnetChatBox-icon {
+	font-size: 0.95rem;
+}
+
+.cnetChatBox-textarea:disabled {
+	cursor: wait;
+	opacity: 0.6;
+}
+
+.cnetChatBox-messages {
+	flex: 1 1 auto;
+	overflow-y: auto;
+	padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	scroll-behavior: smooth;
+}
+
+.cnetChatBox-empty {
+	margin: auto;
+	padding: 1.5rem;
+	color: @sapUiContentLabelColor;
+	text-align: center;
+	font-style: italic;
+}
+
+.cnetChatBox-message {
+	display: flex;
+	max-width: 100%;
+}
+
+.cnetChatBox-message--user {
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.cnetChatBox-message--assistant {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.cnetChatBox-bubble {
+	max-width: 85%;
+	padding: 0.55rem 0.85rem;
+	border-radius: 0.75rem;
+	line-height: 1.4;
+	word-wrap: break-word;
+	white-space: pre-wrap;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.cnetChatBox-message--user .cnetChatBox-bubble {
+	background-color: @sapUiButtonEmphasizedBackground;
+	color: @sapUiButtonEmphasizedTextColor;
+	border-bottom-right-radius: 0.15rem;
+}
+
+.cnetChatBox-message--assistant .cnetChatBox-bubble {
+	background-color: @sapUiListBackground;
+	color: @sapUiBaseText;
+	border: 1px solid @sapUiListBorderColor;
+	border-bottom-left-radius: 0.15rem;
+	white-space: normal;
+}
+
+.cnetChatBox-bubble p {
+	margin: 0 0 0.5rem 0;
+}
+
+.cnetChatBox-bubble p:last-child {
+	margin-bottom: 0;
+}
+
+.cnetChatBox-bubble h1,
+.cnetChatBox-bubble h2,
+.cnetChatBox-bubble h3,
+.cnetChatBox-bubble h4,
+.cnetChatBox-bubble h5,
+.cnetChatBox-bubble h6 {
+	margin: 0.4rem 0 0.3rem 0;
+	font-weight: bold;
+	line-height: 1.25;
+}
+
+.cnetChatBox-bubble ul {
+	margin: 0.25rem 0 0.5rem 1.25rem;
+	padding: 0;
+}
+
+.cnetChatBox-bubble code {
+	font-family: @sapUiFontMonospaceFamily;
+	font-size: 0.9em;
+	background-color: @sapUiFieldBackground;
+	padding: 0.05rem 0.3rem;
+	border-radius: 0.25rem;
+}
+
+.cnetChatBox-bubble pre {
+	margin: 0.4rem 0;
+	padding: 0.6rem;
+	background-color: @sapUiFieldBackground;
+	border: 1px solid @sapUiFieldBorderColor;
+	border-radius: 0.35rem;
+	overflow-x: auto;
+}
+
+.cnetChatBox-bubble pre code {
+	background: transparent;
+	padding: 0;
+}
+
+.cnetChatBox-table {
+	border-collapse: collapse;
+	margin: 0.4rem 0;
+	font-size: 0.95em;
+}
+
+.cnetChatBox-table th,
+.cnetChatBox-table td {
+	border: 1px solid @sapUiListBorderColor;
+	padding: 0.25rem 0.5rem;
+	text-align: left;
+}
+
+.cnetChatBox-table th {
+	background-color: @sapUiListHeaderBackground;
+}
+
+.cnetChatBox-actions {
+	display: flex;
+	gap: 0.25rem;
+	margin-top: 0.15rem;
+	padding-left: 0.15rem;
+	opacity: 0;
+	transition: opacity 0.15s ease;
+}
+
+.cnetChatBox-message:hover .cnetChatBox-actions,
+.cnetChatBox-message:focus-within .cnetChatBox-actions {
+	opacity: 1;
+}
+
+.cnetChatBox-bubble--pending + .cnetChatBox-actions {
+	display: none;
+}
+
+.cnetChatBox-action {
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: 0.35rem;
+	padding: 0.15rem 0.35rem;
+	color: @sapUiContentLabelColor;
+	cursor: pointer;
+	line-height: 1;
+	transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.cnetChatBox-action:hover,
+.cnetChatBox-action:focus-visible {
+	background-color: @sapUiButtonHoverBackground;
+	color: @sapUiButtonTextColor;
+	outline: none;
+}
+
+.cnetChatBox-action--done {
+	color: @sapUiPositiveText;
+}
+
+.cnetChatBox-action .cnetChatBox-icon {
+	font-size: 0.85rem;
+}
+
+.cnetChatBox-message--assistant .cnetChatBox-bubble.cnetChatBox-bubble--rich {
+	max-width: 100%;
+	width: 100%;
+	padding: 0.35rem;
+	background-color: @sapUiListBackground;
+	overflow: hidden;
+}
+
+.cnetChatBox-bubble--rich > .sapUiVlt,
+.cnetChatBox-bubble--rich > * {
+	max-width: 100%;
+}
+
+.cnetChatBox-bubble--pending .cnetChatBox-dots {
+	display: inline-flex;
+	gap: 0.25rem;
+	align-items: center;
+	height: 1em;
+}
+
+.cnetChatBox-bubble--pending .cnetChatBox-dots span {
+	display: inline-block;
+	width: 0.4rem;
+	height: 0.4rem;
+	border-radius: 50%;
+	background-color: @sapUiContentLabelColor;
+	opacity: 0.4;
+	animation: cnetChatBoxDots 1.2s infinite ease-in-out;
+}
+
+.cnetChatBox-bubble--pending .cnetChatBox-dots span:nth-child(2) { animation-delay: 0.2s; }
+.cnetChatBox-bubble--pending .cnetChatBox-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes cnetChatBoxDots {
+	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+	30% { opacity: 1; transform: translateY(-2px); }
+}
+
+.cnetChatBox-inputArea {
+	display: flex;
+	flex-direction: column;
+	padding: 0.5rem 0.75rem 0.75rem;
+	border-top: 1px solid @sapUiGroupContentBorderColor;
+	background-color: @sapUiListBackground;
+}
+
+.cnetChatBox-composer {
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+	padding: 0.5rem 0.5rem 0.4rem;
+	background-color: @sapUiFieldBackground;
+	border: 1px solid @sapUiFieldBorderColor;
+	border-radius: 0.75rem;
+	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cnetChatBox-composer:focus-within {
+	border-color: @sapUiFieldFocusBorderColor;
+	box-shadow: 0 0 0 1px @sapUiFieldFocusBorderColor;
+}
+
+.cnetChatBox-attachmentsPending {
+	display: none;
+	flex-wrap: wrap;
+	gap: 0.4rem;
+}
+
+.cnetChatBox-attachmentsPending--hasItems {
+	display: flex;
+}
+
+.cnetChatBox-fileinput {
+	display: none;
+}
+
+.cnetChatBox-textarea {
+	resize: none;
+	min-height: 1.75rem;
+	max-height: 10rem;
+	padding: 0.25rem 0.35rem;
+	font-family: inherit;
+	font-size: inherit;
+	color: @sapUiFieldTextColor;
+	background-color: transparent;
+	border: none;
+	outline: none;
+	line-height: 1.4;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.cnetChatBox-composerBar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+}
+
+.cnetChatBox-composerBar-left {
+	display: flex;
+	align-items: center;
+	gap: 0.15rem;
+}
+
+.cnetChatBox-toolButton {
+	flex: 0 0 auto;
+	width: 1.9rem;
+	height: 1.9rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background-color: transparent;
+	color: @sapUiContentLabelColor;
+	border: none;
+	border-radius: 0.4rem;
+	cursor: pointer;
+	transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.cnetChatBox-toolButton:hover:not(:disabled),
+.cnetChatBox-toolButton:focus-visible {
+	background-color: @sapUiButtonHoverBackground;
+	color: @sapUiButtonTextColor;
+	outline: none;
+}
+
+.cnetChatBox-send {
+	flex: 0 0 auto;
+	width: 2rem;
+	height: 2rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background-color: @sapUiButtonEmphasizedBackground;
+	color: @sapUiButtonEmphasizedTextColor;
+	border: none;
+	border-radius: 0.5rem;
+	cursor: pointer;
+	transition: background-color 0.15s ease;
+}
+
+.cnetChatBox-send:hover:not(:disabled) {
+	background-color: @sapUiButtonEmphasizedHoverBackground;
+}
+
+.cnetChatBox-send:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 2px @sapUiFieldFocusBorderColor;
+}
+
+.cnetChatBox-send:disabled,
+.cnetChatBox-toolButton:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.cnetChatBox-icon {
+	font-size: 1rem;
+	line-height: 1;
+}
+
+.cnetChatBox-attachments {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem;
+}
+
+.cnetChatBox-message--user .cnetChatBox-bubble .cnetChatBox-attachments {
+	margin-bottom: 0.35rem;
+}
+
+.cnetChatBox-message--user .cnetChatBox-bubble .cnetChatBox-attachments:last-child {
+	margin-bottom: 0;
+}
+
+.cnetChatBox-attachment {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	max-width: 14rem;
+	padding: 0.25rem 0.4rem;
+	background-color: @sapUiFieldBackground;
+	border: 1px solid @sapUiFieldBorderColor;
+	border-radius: 0.35rem;
+	color: @sapUiFieldTextColor;
+	font-size: 0.85rem;
+	line-height: 1.2;
+}
+
+.cnetChatBox-attachment--image {
+	padding: 0.2rem;
+}
+
+.cnetChatBox-attachment-thumb {
+	max-width: 6rem;
+	max-height: 4rem;
+	border-radius: 0.25rem;
+	display: block;
+	object-fit: cover;
+}
+
+.cnetChatBox-attachment-icon {
+	color: @sapUiContentLabelColor;
+}
+
+.cnetChatBox-attachment-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cnetChatBox-attachment-remove {
+	background: transparent;
+	border: none;
+	color: @sapUiContentLabelColor;
+	cursor: pointer;
+	font-size: 1rem;
+	line-height: 1;
+	padding: 0 0.15rem;
+	border-radius: 0.2rem;
+}
+
+.cnetChatBox-attachment-remove:hover,
+.cnetChatBox-attachment-remove:focus-visible {
+	background-color: @sapUiButtonHoverBackground;
+	color: @sapUiButtonTextColor;
+	outline: none;
+}
+
+.cnetChatBox-dropOverlay {
+	position: absolute;
+	inset: 0;
+	display: none;
+	align-items: center;
+	justify-content: center;
+	background-color: fade(@sapUiHighlight, 15%);
+	border: 2px dashed @sapUiHighlight;
+	border-radius: 0.5rem;
+	pointer-events: none;
+	z-index: 2;
+}
+
+.cnetChatBox--dragOver .cnetChatBox-dropOverlay {
+	display: flex;
+}
+
+.cnetChatBox-dropLabel {
+	padding: 0.5rem 1rem;
+	background-color: @sapUiGroupContentBackground;
+	color: @sapUiHighlight;
+	border-radius: 0.35rem;
+	font-weight: bold;
+}
+
+.cnetChatBox-bubble-text {
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+.cnetChatBox-message--user .cnetChatBox-bubble.cnetChatBox-bubble--editing {
+	background-color: @sapUiFieldBackground;
+	color: @sapUiFieldTextColor;
+	border: 1px solid @sapUiFieldBorderColor;
+	max-width: 32rem;
+	min-width: 16rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+	padding: 0.5rem;
+}
+
+.cnetChatBox-editTextarea {
+	resize: vertical;
+	min-height: 2.5rem;
+	max-height: 12rem;
+	padding: 0.35rem 0.5rem;
+	font-family: inherit;
+	font-size: inherit;
+	color: @sapUiFieldTextColor;
+	background-color: @sapUiFieldBackground;
+	border: 1px solid @sapUiFieldBorderColor;
+	border-radius: 0.35rem;
+	outline: none;
+	line-height: 1.35;
+}
+
+.cnetChatBox-editTextarea:focus {
+	border-color: @sapUiFieldFocusBorderColor;
+	box-shadow: 0 0 0 1px @sapUiFieldFocusBorderColor;
+}
+
+.cnetChatBox-editActions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.35rem;
+}
+
+.cnetChatBox-editCancel,
+.cnetChatBox-editSave {
+	padding: 0.25rem 0.75rem;
+	border-radius: 0.35rem;
+	border: 1px solid transparent;
+	cursor: pointer;
+	font-family: inherit;
+	font-size: inherit;
+	line-height: 1.35;
+}
+
+.cnetChatBox-editCancel {
+	background-color: transparent;
+	color: @sapUiButtonTextColor;
+	border-color: @sapUiButtonBorderColor;
+}
+
+.cnetChatBox-editCancel:hover {
+	background-color: @sapUiButtonHoverBackground;
+}
+
+.cnetChatBox-editSave {
+	background-color: @sapUiButtonEmphasizedBackground;
+	color: @sapUiButtonEmphasizedTextColor;
+}
+
+.cnetChatBox-editSave:hover {
+	background-color: @sapUiButtonEmphasizedHoverBackground;
+}

package/resources/chatui/themes/base/library-RTL.css

@@ -0,0 +1,3 @@
+.sapUiAccKeysHighlighDom:first-letter{text-decoration:underline 20% black}.cnetChatBox{display:flex;flex-direction:row;box-sizing:border-box;position:relative;min-width:32rem;min-height:24rem;background-color:#fff;color:#000;border:1px solid #000;border-radius:0.5rem;font-family:"72","72full",Arial,Helvetica,sans-serif;font-size:.875rem;overflow:hidden}.cnetChatBox-sidebar{flex:0 0 16rem;display:flex;flex-direction:column;min-height:0;background-color:#fff;border-left:1px solid #000}.cnetChatBox-sidebar-header{flex:0 0 auto;padding:0.75rem 1rem 0.5rem;border-bottom:1px solid #000}.cnetChatBox-sidebar-title{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:#000}.cnetChatBox-conversations{flex:1 1 auto;overflow-y:auto;padding:0.4rem;display:flex;flex-direction:column;gap:0.25rem}.cnetChatBox-conversations-empty{padding:1rem 0.5rem;color:#000;font-size:0.85rem;font-style:italic;text-align:center}.cnetChatBox-conversation{position:relative;display:flex;align-items:flex-start;gap:0.35rem;padding:0.5rem 0.6rem;border:1px solid transparent;border-radius:0.4rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;outline:none}.cnetChatBox-conversation:hover,.cnetChatBox-conversation:focus-visible{background-color:#ec8b46}.cnetChatBox-conversation--active{background-color:#8fb5ff;border-color:#000}.cnetChatBox-conversation--active:hover{background-color:#8fb5ff}.cnetChatBox-conversation-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0.1rem}.cnetChatBox-conversation-title{font-size:0.85rem;font-weight:600;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cnetChatBox-conversation-snippet{font-size:0.75rem;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cnetChatBox-conversation-time{font-size:0.7rem;color:#000;margin-top:0.1rem}.cnetChatBox-conversation-remove{flex:0 0 auto;background:transparent;border:none;color:#000;cursor:pointer;font-size:1rem;line-height:1;padding:0.1rem 0.35rem;border-radius:0.25rem;opacity:0;transition:opacity .15s ease,background-color .15s ease}.cnetChatBox-conversation:hover .cnetChatBox-conversation-remove,.cnetChatBox-conversation:focus-within .cnetChatBox-conversation-remove,.cnetChatBox-conversation--active .cnetChatBox-conversation-remove{opacity:1}.cnetChatBox-conversation-remove:hover,.cnetChatBox-conversation-remove:focus-visible{background-color:#ec8b46;color:#000;outline:none}.cnetChatBox-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.cnetChatBox-header{flex:0 0 auto;display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem;border-bottom:1px solid #000;background-color:#fff}.cnetChatBox-header-title{flex:1 1 auto;min-width:0;font-size:0.95rem;font-weight:600;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cnetChatBox-newChatButton{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.4rem;padding:0.3rem 0.75rem;background-color:#fff;color:#000;border:none;border-radius:0.4rem;cursor:pointer;font-family:inherit;font-size:0.85rem;line-height:1.2;transition:background-color .15s ease}.cnetChatBox-newChatButton:hover:not(:disabled){background-color:#f2f2f2}.cnetChatBox-newChatButton:focus-visible{outline:none;box-shadow:0 0 0 2px #000}.cnetChatBox-newChatButton:disabled{cursor:not-allowed;opacity:0.5}.cnetChatBox-newChatButton .cnetChatBox-icon{font-size:0.95rem}.cnetChatBox-textarea:disabled{cursor:wait;opacity:0.6}.cnetChatBox-messages{flex:1 1 auto;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.75rem;scroll-behavior:smooth}.cnetChatBox-empty{margin:auto;padding:1.5rem;color:#000;text-align:center;font-style:italic}.cnetChatBox-message{display:flex;max-width:100%}.cnetChatBox-message--user{flex-direction:column;align-items:flex-end}.cnetChatBox-message--assistant{flex-direction:column;align-items:flex-start}.cnetChatBox-bubble{max-width:85%;padding:0.55rem 0.85rem;border-radius:0.75rem;line-height:1.4;word-wrap:break-word;white-space:pre-wrap;box-shadow:0 1px 2px rgba(0,0,0,0.05)}.cnetChatBox-message--user .cnetChatBox-bubble{background-color:#fff;color:#000;border-bottom-left-radius:0.15rem}.cnetChatBox-message--assistant .cnetChatBox-bubble{background-color:#fff;color:#000;border:1px solid #585858;border-bottom-right-radius:0.15rem;white-space:normal}.cnetChatBox-bubble p{margin:0 0 0.5rem 0}.cnetChatBox-bubble p:last-child{margin-bottom:0}.cnetChatBox-bubble h1,.cnetChatBox-bubble h2,.cnetChatBox-bubble h3,.cnetChatBox-bubble h4,.cnetChatBox-bubble h5,.cnetChatBox-bubble h6{margin:0.4rem 0 0.3rem 0;font-weight:bold;line-height:1.25}.cnetChatBox-bubble ul{margin:0.25rem 1.25rem 0.5rem 0;padding:0}.cnetChatBox-bubble code{font-family:Lucida Console;font-size:0.9em;background-color:#fff;padding:0.05rem 0.3rem;border-radius:0.25rem}.cnetChatBox-bubble pre{margin:0.4rem 0;padding:0.6rem;background-color:#fff;border:1px solid #000;border-radius:0.35rem;overflow-x:auto}.cnetChatBox-bubble pre code{background:transparent;padding:0}.cnetChatBox-table{border-collapse:collapse;margin:0.4rem 0;font-size:0.95em}.cnetChatBox-table th,.cnetChatBox-table td{border:1px solid #585858;padding:0.25rem 0.5rem;text-align:left}.cnetChatBox-table th{background-color:#fff}.cnetChatBox-actions{display:flex;gap:0.25rem;margin-top:0.15rem;padding-right:0.15rem;opacity:0;transition:opacity 0.15s ease}.cnetChatBox-message:hover .cnetChatBox-actions,.cnetChatBox-message:focus-within .cnetChatBox-actions{opacity:1}.cnetChatBox-bubble--pending+.cnetChatBox-actions{display:none}.cnetChatBox-action{background:transparent;border:1px solid transparent;border-radius:0.35rem;padding:0.15rem 0.35rem;color:#000;cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease}.cnetChatBox-action:hover,.cnetChatBox-action:focus-visible{background-color:#ec8b46;color:#000;outline:none}.cnetChatBox-action--done{color:#b5e7a8}.cnetChatBox-action .cnetChatBox-icon{font-size:0.85rem}.cnetChatBox-message--assistant .cnetChatBox-bubble.cnetChatBox-bubble--rich{max-width:100%;width:100%;padding:0.35rem;background-color:#fff;overflow:hidden}.cnetChatBox-bubble--rich>.sapUiVlt,.cnetChatBox-bubble--rich>*{max-width:100%}.cnetChatBox-bubble--pending .cnetChatBox-dots{display:inline-flex;gap:0.25rem;align-items:center;height:1em}.cnetChatBox-bubble--pending .cnetChatBox-dots span{display:inline-block;width:0.4rem;height:0.4rem;border-radius:50%;background-color:#000;opacity:0.4;animation:cnetChatBoxDots 1.2s infinite ease-in-out}.cnetChatBox-bubble--pending .cnetChatBox-dots span:nth-child(2){animation-delay:0.2s}.cnetChatBox-bubble--pending .cnetChatBox-dots span:nth-child(3){animation-delay:0.4s}@keyframes cnetChatBoxDots{0%,60%,100%{opacity:0.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}.cnetChatBox-inputArea{display:flex;flex-direction:column;padding:0.5rem 0.75rem 0.75rem;border-top:1px solid #000;background-color:#fff}.cnetChatBox-composer{display:flex;flex-direction:column;gap:0.35rem;padding:0.5rem 0.5rem 0.4rem;background-color:#fff;border:1px solid #000;border-radius:0.75rem;transition:border-color .15s ease,box-shadow .15s ease}.cnetChatBox-composer:focus-within{border-color:#000;box-shadow:0 0 0 1px #000}.cnetChatBox-attachmentsPending{display:none;flex-wrap:wrap;gap:0.4rem}.cnetChatBox-attachmentsPending--hasItems{display:flex}.cnetChatBox-fileinput{display:none}.cnetChatBox-textarea{resize:none;min-height:1.75rem;max-height:10rem;padding:0.25rem 0.35rem;font-family:inherit;font-size:inherit;color:#000;background-color:transparent;border:none;outline:none;line-height:1.4;width:100%;box-sizing:border-box}.cnetChatBox-composerBar{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.cnetChatBox-composerBar-left{display:flex;align-items:center;gap:0.15rem}.cnetChatBox-toolButton{flex:0 0 auto;width:1.9rem;height:1.9rem;display:inline-flex;align-items:center;justify-content:center;background-color:transparent;color:#000;border:none;border-radius:0.4rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}.cnetChatBox-toolButton:hover:not(:disabled),.cnetChatBox-toolButton:focus-visible{background-color:#ec8b46;color:#000;outline:none}.cnetChatBox-send{flex:0 0 auto;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background-color:#fff;color:#000;border:none;border-radius:0.5rem;cursor:pointer;transition:background-color .15s ease}.cnetChatBox-send:hover:not(:disabled){background-color:#f2f2f2}.cnetChatBox-send:focus-visible{outline:none;box-shadow:0 0 0 2px #000}.cnetChatBox-send:disabled,.cnetChatBox-toolButton:disabled{cursor:not-allowed;opacity:0.5}.cnetChatBox-icon{font-size:1rem;line-height:1}.cnetChatBox-attachments{display:flex;flex-wrap:wrap;gap:0.4rem}.cnetChatBox-message--user .cnetChatBox-bubble .cnetChatBox-attachments{margin-bottom:0.35rem}.cnetChatBox-message--user .cnetChatBox-bubble .cnetChatBox-attachments:last-child{margin-bottom:0}.cnetChatBox-attachment{display:inline-flex;align-items:center;gap:0.35rem;max-width:14rem;padding:0.25rem 0.4rem;background-color:#fff;border:1px solid #000;border-radius:0.35rem;color:#000;font-size:0.85rem;line-height:1.2}.cnetChatBox-attachment--image{padding:0.2rem}.cnetChatBox-attachment-thumb{max-width:6rem;max-height:4rem;border-radius:0.25rem;display:block;object-fit:cover}.cnetChatBox-attachment-icon{color:#000}.cnetChatBox-attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cnetChatBox-attachment-remove{background:transparent;border:none;color:#000;cursor:pointer;font-size:1rem;line-height:1;padding:0 0.15rem;border-radius:0.2rem}.cnetChatBox-attachment-remove:hover,.cnetChatBox-attachment-remove:focus-visible{background-color:#ec8b46;color:#000;outline:none}.cnetChatBox-dropOverlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background-color:rgba(236,139,70,0.15);border:2px dashed #ec8b46;border-radius:0.5rem;pointer-events:none;z-index:2}.cnetChatBox--dragOver .cnetChatBox-dropOverlay{display:flex}.cnetChatBox-dropLabel{padding:0.5rem 1rem;background-color:#fff;color:#ec8b46;border-radius:0.35rem;font-weight:bold}.cnetChatBox-bubble-text{white-space:pre-wrap;word-wrap:break-word}.cnetChatBox-message--user .cnetChatBox-bubble.cnetChatBox-bubble--editing{background-color:#fff;color:#000;border:1px solid #000;max-width:32rem;min-width:16rem;display:flex;flex-direction:column;gap:0.4rem;padding:0.5rem}.cnetChatBox-editTextarea{resize:vertical;min-height:2.5rem;max-height:12rem;padding:0.35rem 0.5rem;font-family:inherit;font-size:inherit;color:#000;background-color:#fff;border:1px solid #000;border-radius:0.35rem;outline:none;line-height:1.35}.cnetChatBox-editTextarea:focus{border-color:#000;box-shadow:0 0 0 1px #000}.cnetChatBox-editActions{display:flex;justify-content:flex-end;gap:0.35rem}.cnetChatBox-editCancel,.cnetChatBox-editSave{padding:0.25rem 0.75rem;border-radius:0.35rem;border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:inherit;line-height:1.35}.cnetChatBox-editCancel{background-color:transparent;color:#000;border-color:#000}.cnetChatBox-editCancel:hover{background-color:#ec8b46}.cnetChatBox-editSave{background-color:#fff;color:#000}.cnetChatBox-editSave:hover{background-color:#f2f2f2}
+/* Inline theming parameters */
+#sap-ui-theme-chatui{background-image:url('data:text/plain;utf-8,%7B%7D')}

package/resources/chatui/themes/base/library-parameters.json

@@ -0,0 +1 @@
+{}