jupyter-chat-components 0.4.1 → 0.5.0

package/lib/components/error.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IComponentProps } from '../token';
+export interface IErrorProps extends IComponentProps {
+    errorMessage: string;
+    title?: string;
+}
+export declare const ErrorMessage: React.FC<IErrorProps>;

package/lib/components/error.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { errorIcon } from '../icons';
+export const ErrorMessage = ({ errorMessage, title = 'Error' }) => {
+    return (React.createElement("div", { className: "jp-ai-error-message" },
+        React.createElement("div", { className: "jp-ai-error-icon" },
+            React.createElement(errorIcon.react, { tag: "span", width: "18px", height: "18px" })),
+        React.createElement("div", { className: "jp-ai-error-body" },
+            React.createElement("div", { className: "jp-ai-error-title" }, title),
+            React.createElement("div", { className: "jp-ai-error-text" }, errorMessage))));
+};

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './error';
 export * from './inline-diff';
 export * from './message-queue';
 export * from './tool-call';

package/lib/components/index.js

@@ -1,3 +1,4 @@
+export * from './error';
 export * from './inline-diff';
 export * from './message-queue';
 export * from './tool-call';

package/lib/factory.js

@@ -1,7 +1,7 @@
 import { nullTranslator } from '@jupyterlab/translation';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
-import { GroupedToolCalls, InlineDiff, MessageQueue, ToolCall } from './components';
+import { GroupedToolCalls, InlineDiff, MessageQueue, ToolCall, ErrorMessage } from './components';
 import { ComponentRegistry } from './registry';
 /**
  * The default mime type for the extension.
@@ -94,5 +94,6 @@ export class RendererFactory {
         this.registry.add('grouped-tool-calls', GroupedToolCalls);
         this.registry.add('inline-diff', InlineDiff);
         this.registry.add('message-queue', MessageQueue);
+        this.registry.add('error', ErrorMessage);
     }
 }

package/lib/icons.d.ts

@@ -0,0 +1,2 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+export declare const errorIcon: LabIcon;

package/lib/icons.js

@@ -0,0 +1,5 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+export const errorIcon = new LabIcon({
+    name: 'jupyter-chat:error',
+    svgstr: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>'
+});

package/lib/index.d.ts

@@ -8,4 +8,5 @@ export * from './token';
 export * from './factory';
 export * from './registry';
 export * from './components';
+export * from './icons';
 export default factory;

package/lib/index.js

@@ -20,4 +20,5 @@ export * from './token';
 export * from './factory';
 export * from './registry';
 export * from './components';
+export * from './icons';
 export default factory;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-chat-components",
-    "version": "0.4.1",
+    "version": "0.5.0",
     "description": "Components to displayed in jupyter chat",
     "keywords": [
         "jupyter",
@@ -61,6 +61,7 @@
         "@jupyterlab/rendermime": "^4.5.0",
         "@jupyterlab/rendermime-interfaces": "^3.8.0",
         "@jupyterlab/translation": "^4.5.0",
+        "@jupyterlab/ui-components": "^4.5.0",
         "@lumino/coreutils": "^2.2.2",
         "@lumino/widgets": "^2.1.0",
         "diff": "^8.0.0"

package/src/components/error.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { IComponentProps } from '../token';
+import { errorIcon } from '../icons';
+
+export interface IErrorProps extends IComponentProps {
+  errorMessage: string;
+  title?: string;
+}
+
+export const ErrorMessage: React.FC<IErrorProps> = ({
+  errorMessage,
+  title = 'Error'
+}) => {
+  return (
+    <div className="jp-ai-error-message">
+      <div className="jp-ai-error-icon">
+        <errorIcon.react tag="span" width="18px" height="18px" />
+      </div>
+      <div className="jp-ai-error-body">
+        <div className="jp-ai-error-title">{title}</div>
+        <div className="jp-ai-error-text">{errorMessage}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './error';
 export * from './inline-diff';
 export * from './message-queue';
 export * from './tool-call';

package/src/factory.tsx

@@ -12,7 +12,8 @@ import {
   GroupedToolCalls,
   InlineDiff,
   MessageQueue,
-  ToolCall
+  ToolCall,
+  ErrorMessage
 } from './components';
 
 import { ComponentRegistry } from './registry';
@@ -162,6 +163,7 @@ export class RendererFactory implements IComponentsRendererFactory {
     this.registry.add('grouped-tool-calls', GroupedToolCalls);
     this.registry.add('inline-diff', InlineDiff);
     this.registry.add('message-queue', MessageQueue);
+    this.registry.add('error', ErrorMessage);
   }
 
   createRenderer = (options: IRenderMime.IRendererOptions) => {

package/src/icons.ts

@@ -0,0 +1,7 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+
+export const errorIcon = new LabIcon({
+  name: 'jupyter-chat:error',
+  svgstr:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>'
+});

package/src/index.ts

@@ -32,5 +32,6 @@ export * from './token';
 export * from './factory';
 export * from './registry';
 export * from './components';
+export * from './icons';
 
 export default factory;

package/style/base.css

@@ -644,3 +644,44 @@ details[open].jp-ai-tool-call-item summary::after,
 .jp-chat-message-queue-bubble:hover .jp-chat-message-queue-remove {
   opacity: 1;
 }
+
+/* Error Component Styling */
+.jp-ai-error-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color1);
+  border-left: 4px solid var(--jp-error-color1);
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin: 8px 0;
+  box-shadow: var(--jp-elevation-z2);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-ai-error-icon {
+  color: var(--jp-error-color1);
+}
+
+.jp-ai-error-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.jp-ai-error-title {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 600;
+  color: var(--jp-error-color1);
+}
+
+.jp-ai-error-text {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  word-break: break-word;
+  white-space: pre-wrap;
+  color: var(--jp-ui-font-color2);
+  line-height: 1.4;
+}