jupyter-chat-components 0.2.0 → 0.4.0

package/style/base.css

@@ -222,6 +222,223 @@
   opacity: 0.5;
 }
 
+/* ACP-style Tool Calls */
+.jp-ai-tool-calls {
+  padding: 4px 0;
+  font-size: var(--jp-content-font-size1);
+  line-height: var(--jp-content-line-height);
+  margin-bottom: 4px;
+}
+
+.jp-ai-tool-call-item {
+  padding: 1px 0;
+  font-family: var(--jp-content-font-family);
+}
+
+.jp-ai-tool-call-item-in-progress,
+.jp-ai-tool-call-item-pending {
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-ai-tool-call-item-completed,
+.jp-ai-tool-call-item-failed {
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-ai-tool-call-item-completed .jp-ai-tool-call-item-icon {
+  color: var(--jp-success-color1, #388e3c);
+}
+
+.jp-ai-tool-call-item-failed .jp-ai-tool-call-item-icon {
+  color: var(--jp-error-color1, #d32f2f);
+}
+
+details.jp-ai-tool-call-item summary,
+.jp-ai-tool-call-item details summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+details.jp-ai-tool-call-item summary::-webkit-details-marker,
+.jp-ai-tool-call-item details summary::-webkit-details-marker {
+  display: none;
+}
+
+details.jp-ai-tool-call-item summary::after,
+.jp-ai-tool-call-item details summary::after {
+  content: '';
+  display: inline-block;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid currentcolor;
+  margin-left: 6px;
+  vertical-align: middle;
+  opacity: 0.5;
+}
+
+details[open].jp-ai-tool-call-item summary::after,
+.jp-ai-tool-call-item details[open] summary::after {
+  border-top: none;
+  border-bottom: 5px solid currentcolor;
+}
+
+.jp-ai-tool-call-item-detail {
+  margin: 2px 0 2px 20px;
+  font-size: var(--jp-code-font-size);
+  font-family: var(--jp-code-font-family);
+  color: var(--jp-ui-font-color2);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.jp-ai-tool-call-permission-buttons {
+  display: flex;
+  gap: 6px;
+  margin: 4px 0;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.jp-ai-tool-call-permission-tree {
+  color: var(--jp-ui-font-color2);
+  font-family: monospace;
+}
+
+.jp-ai-tool-call-permission-btn {
+  padding: 2px 6px;
+  font-size: var(--jp-ui-font-size1);
+  font-family: var(--jp-ui-font-family);
+  border-radius: 3px;
+  border: 1px solid var(--jp-border-color1);
+  cursor: pointer;
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-ai-tool-call-permission-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.jp-ai-tool-call-permission-btn:hover:not(:disabled) {
+  background: var(--jp-layout-color2);
+}
+
+.jp-ai-tool-call-permission-btn-allow-once,
+.jp-ai-tool-call-permission-btn-allow-always {
+  border-color: var(--jp-success-color1, #388e3c);
+  color: var(--jp-success-color1, #388e3c);
+}
+
+.jp-ai-tool-call-permission-btn-reject-once {
+  border-color: var(--jp-error-color1, #d32f2f);
+  color: var(--jp-error-color1, #d32f2f);
+}
+
+.jp-ai-tool-call-permission-label {
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-ai-tool-call-diff-container {
+  margin: 4px 0 4px 20px;
+}
+
+.jp-ai-tool-call-diff-block {
+  margin-bottom: 4px;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.jp-ai-tool-call-diff-header {
+  padding: 0 8px;
+  font-size: var(--jp-ui-font-size0);
+  font-family: var(--jp-code-font-family);
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-ai-tool-call-diff-header-clickable {
+  cursor: pointer;
+}
+
+.jp-ai-tool-call-diff-header-clickable:hover {
+  text-decoration: underline;
+}
+
+.jp-ai-tool-call-diff-content {
+  margin: 0;
+  padding: 0;
+  font-size: var(--jp-code-font-size);
+  font-family: var(--jp-code-font-family);
+  line-height: var(--jp-code-line-height);
+}
+
+.jp-ai-tool-call-diff-line {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 8px;
+  align-items: start;
+  padding: 0 8px;
+  min-height: calc(var(--jp-code-line-height) * 1em);
+}
+
+.jp-ai-tool-call-diff-line-prefix {
+  width: 1ch;
+  color: var(--jp-ui-font-color3);
+  user-select: none;
+  text-align: center;
+}
+
+.jp-ai-tool-call-diff-line-text {
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.jp-ai-tool-call-diff-line-text:empty::before {
+  content: '·';
+  opacity: 0.35;
+}
+
+.jp-ai-tool-call-diff-line.jp-mod-added {
+  background: color-mix(
+    in srgb,
+    var(--jp-success-color1, #388e3c) 15%,
+    transparent
+  );
+}
+
+.jp-ai-tool-call-diff-line.jp-mod-removed {
+  background: color-mix(
+    in srgb,
+    var(--jp-error-color1, #d32f2f) 15%,
+    transparent
+  );
+}
+
+.jp-ai-tool-call-diff-line.jp-mod-context {
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-ai-tool-call-diff-empty {
+  padding: 6px 8px;
+  color: var(--jp-ui-font-color2);
+  font-style: italic;
+}
+
+.jp-ai-tool-call-diff-toggle {
+  padding: 4px 8px 8px;
+  border: none;
+  background: none;
+  color: var(--jp-ui-font-color2);
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size0);
+  font-style: italic;
+  cursor: pointer;
+  text-align: left;
+}
+
 /* Inline Diff */
 .jp-ai-inline-diff-container {
   display: flex;
@@ -323,3 +540,61 @@
   color: var(--jp-ui-font-color1);
   text-decoration: underline;
 }
+
+/* Message Queue Styling */
+.jp-chat-message-queue {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  pointer-events: none;
+  width: 100%;
+}
+
+.jp-chat-message-queue-bubble {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 16px;
+  padding: 4px 28px 4px 12px;
+  pointer-events: auto;
+}
+
+.jp-chat-message-queue-text {
+  font-size: var(--jp-ui-font-size0);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jp-chat-message-queue-remove {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--jp-ui-font-color2);
+  font-size: 10px;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.jp-chat-message-queue-remove:hover {
+  background: var(--jp-layout-color3);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-chat-message-queue-bubble:hover .jp-chat-message-queue-remove {
+  opacity: 1;
+}