@jupyter/chat 0.18.1 → 0.19.0-alpha.0

package/style/chat.css

@@ -2,20 +2,18 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-.jp-chat-message:not(.jp-chat-message-stacked) {
-  padding: 1em 1em 0;
-}
 
-.jp-chat-message:not(:first-child, .jp-chat-message-stacked) {
-  border-top: 1px solid var(--jp-border-color2);
+.jp-chat-rendered-markdown {
+  position: relative;
 }
 
-.jp-chat-message.jp-chat-message-stacked {
-  padding: 0 1em;
+.jp-chat-rendered-markdown hr {
+  color: #00000026;
+  background-color: transparent;
 }
 
-.jp-chat-rendered-markdown {
-  position: relative;
+.jp-chat-rendered-markdown .jp-RenderedHTMLCommon > :last-child {
+  margin-bottom: 0;
 }
 
 /*
@@ -38,7 +36,7 @@
   overflow-x: auto;
   white-space: pre;
   margin: 0;
-  padding: 4px 2px 0 6px;
+  padding: 4px 6px;
   border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
 }
 
@@ -53,7 +51,7 @@
 }
 
 .jp-chat-toolbar {
-  display: none;
+  visibility: hidden;
   position: absolute;
   right: 2px;
   top: 2px;
@@ -67,107 +65,13 @@
 }
 
 .jp-chat-rendered-markdown:hover .jp-chat-toolbar {
-  display: inherit;
+  visibility: visible;
 }
 
 .jp-chat-toolbar > .jp-ToolbarButtonComponent {
   margin-top: 0;
 }
 
-.jp-chat-writers {
-  display: flex;
-  flex-wrap: wrap;
-  position: sticky;
-  bottom: 0;
-  padding: 8px;
-  background-color: var(--jp-layout-color0);
-  border-top: 1px solid var(--jp-border-color2);
-  z-index: 1;
-}
-
-.jp-chat-writers-content {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-
-.jp-chat-writer-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.jp-chat-writer-name {
-  color: var(--jp-ui-font-color1);
-  font-weight: 500;
-}
-
-.jp-chat-writer-separator {
-  color: var(--jp-ui-font-color2);
-}
-
-.jp-chat-writing-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.jp-chat-writing-text {
-  color: var(--jp-ui-font-color2);
-}
-
-/* Animated typing indicator */
-.jp-chat-typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 2px 4px;
-}
-
-.jp-chat-typing-dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: var(--jp-brand-color1);
-  animation: jp-chat-typing-bounce 1.4s infinite ease-in-out;
-}
-
-.jp-chat-typing-dot:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.jp-chat-typing-dot:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-.jp-chat-typing-dot:nth-child(3) {
-  animation-delay: 0s;
-}
-
-/* Keyframe animations */
-@keyframes jp-chat-typing-bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-
-  40% {
-    transform: scale(1.2);
-    opacity: 1;
-  }
-}
-
-.jp-chat-writers > div {
-  display: flex;
-  align-items: center;
-  gap: 0.2em;
-  white-space: pre;
-  padding-left: 0.5em;
-}
-
 .jp-chat-navigation {
   position: absolute;
   right: 10px;
@@ -197,40 +101,8 @@
   bottom: 120px;
 }
 
-.jp-chat-attachments {
-  display: flex;
-  gap: 4px;
-  flex-wrap: wrap;
-  min-height: 1.5em;
-  padding: 4px 0;
-}
-
-.jp-chat-attachment {
-  border: solid 1px;
-  border-radius: 10px;
-  margin: 0 0.2em;
-  padding: 0 0.3em;
-  align-content: center;
-  background-color: var(--jp-border-color3);
-  flex-shrink: 0;
-}
-
-.jp-chat-attachment .jp-chat-attachment-clickable:hover {
-  cursor: pointer;
-}
-
-.jp-chat-command-name {
-  font-weight: normal;
-  margin: 5px;
-}
-
-.jp-chat-command-description {
-  color: gray;
-  margin: 5px;
-}
-
 .jp-chat-mention {
-  border-radius: 10px;
-  padding: 0 0.2em;
-  background-color: var(--jp-brand-color4);
+  border-radius: 4px;
+  padding: 2px 0;
+  font-weight: bold;
 }

package/style/input.css

@@ -42,64 +42,6 @@
   white-space: nowrap;
 }
 
-/*
- * INPUT TEXT FIELD
- */
-.jp-chat-input-component {
-  border: 1px solid var(--jp-ui-font-color3);
-  border-radius: 4px;
-}
-
-.jp-chat-input-textfield .jp-chat-input-component::before,
-.jp-chat-input-textfield .jp-chat-input-component::after {
-  border-bottom: unset !important;
-}
-
-/* Use the textfield label below the input. */
-.jp-chat-input-textfield .jp-chat-input-component {
-  padding-top: 8px !important;
-  padding-bottom: 15px !important;
-  background-color: unset !important;
-}
-
-.jp-chat-input-textfield label {
-  top: unset;
-  left: unset;
-  bottom: 0;
-  right: 0;
-  color: var(--jp-ui-font-color2) !important;
-}
-
-/*
- * INPUT TOOLBAR
- */
-.jp-chat-input-toolbar {
-  gap: 1px;
-  align-self: flex-end;
-  min-height: unset !important;
-  margin-bottom: 4px;
-}
-
-.jp-chat-input-toolbar .jp-chat-tooltipped-wrap button {
-  border-radius: 0;
-  min-width: unset;
-}
-
-.jp-chat-input-toolbar .jp-chat-tooltipped-wrap:first-child button {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-
-.jp-chat-input-toolbar .jp-chat-tooltipped-wrap:last-child button {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
-.jp-chat-input-toolbar .jp-chat-attach-button,
-.jp-chat-input-toolbar .jp-chat-cancel-button {
-  padding: 4px;
-}
-
 .jp-chat-input-toolbar .jp-chat-send-include-opener {
   padding: 4px 0;
 }

package/lib/components/messages/writers.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { IUser } from '../../types';
-/**
- * The writers component props.
- */
-type writersProps = {
-    /**
-     * The list of users currently writing.
-     */
-    writers: IUser[];
-};
-/**
- * The writers component, displaying the current writers.
- */
-export declare function WritingUsersList(props: writersProps): JSX.Element | null;
-export {};

package/lib/components/messages/writers.js

@@ -1,39 +0,0 @@
-/*
- * Copyright (c) Jupyter Development Team.
- * Distributed under the terms of the Modified BSD License.
- */
-import { Box, Typography } from '@mui/material';
-import React, { useMemo } from 'react';
-import { Avatar } from '../avatar';
-const WRITERS_CLASS = 'jp-chat-writers';
-/**
- * Animated typing indicator component
- */
-const TypingIndicator = () => (React.createElement(Box, { className: "jp-chat-typing-indicator" },
-    React.createElement("span", { className: "jp-chat-typing-dot" }),
-    React.createElement("span", { className: "jp-chat-typing-dot" }),
-    React.createElement("span", { className: "jp-chat-typing-dot" })));
-/**
- * The writers component, displaying the current writers.
- */
-export function WritingUsersList(props) {
-    const { writers } = props;
-    // Don't render if no writers
-    if (writers.length === 0) {
-        return null;
-    }
-    const writersText = writers.length > 1 ? ' are writing' : ' is writing';
-    const writingUsers = useMemo(() => writers.map((writer, index) => {
-        var _a, _b;
-        return (React.createElement(Box, { key: writer.username || index, className: "jp-chat-writer-item" },
-            React.createElement(Avatar, { user: writer, small: true }),
-            React.createElement(Typography, { variant: "body2", className: "jp-chat-writer-name" }, (_b = (_a = writer.display_name) !== null && _a !== void 0 ? _a : writer.name) !== null && _b !== void 0 ? _b : (writer.username || 'User undefined')),
-            index < writers.length - 1 && (React.createElement(Typography, { variant: "body2", className: "jp-chat-writer-separator" }, index < writers.length - 2 ? ', ' : ' and '))));
-    }), [writers]);
-    return (React.createElement(Box, { className: `${WRITERS_CLASS}` },
-        React.createElement(Box, { className: "jp-chat-writers-content" },
-            writingUsers,
-            React.createElement(Box, { className: "jp-chat-writing-status" },
-                React.createElement(Typography, { variant: "body2", className: "jp-chat-writing-text" }, writersText),
-                React.createElement(TypingIndicator, null)))));
-}

package/src/components/messages/writers.tsx

@@ -1,81 +0,0 @@
-/*
- * Copyright (c) Jupyter Development Team.
- * Distributed under the terms of the Modified BSD License.
- */
-
-import { Box, Typography } from '@mui/material';
-import React, { useMemo } from 'react';
-
-import { Avatar } from '../avatar';
-import { IUser } from '../../types';
-
-const WRITERS_CLASS = 'jp-chat-writers';
-
-/**
- * The writers component props.
- */
-type writersProps = {
-  /**
-   * The list of users currently writing.
-   */
-  writers: IUser[];
-};
-
-/**
- * Animated typing indicator component
- */
-const TypingIndicator = (): JSX.Element => (
-  <Box className="jp-chat-typing-indicator">
-    <span className="jp-chat-typing-dot"></span>
-    <span className="jp-chat-typing-dot"></span>
-    <span className="jp-chat-typing-dot"></span>
-  </Box>
-);
-
-/**
- * The writers component, displaying the current writers.
- */
-export function WritingUsersList(props: writersProps): JSX.Element | null {
-  const { writers } = props;
-
-  // Don't render if no writers
-  if (writers.length === 0) {
-    return null;
-  }
-
-  const writersText = writers.length > 1 ? ' are writing' : ' is writing';
-
-  const writingUsers: JSX.Element[] = useMemo(
-    () =>
-      writers.map((writer, index) => (
-        <Box key={writer.username || index} className="jp-chat-writer-item">
-          <Avatar user={writer} small />
-          <Typography variant="body2" className="jp-chat-writer-name">
-            {writer.display_name ??
-              writer.name ??
-              (writer.username || 'User undefined')}
-          </Typography>
-          {index < writers.length - 1 && (
-            <Typography variant="body2" className="jp-chat-writer-separator">
-              {index < writers.length - 2 ? ', ' : ' and '}
-            </Typography>
-          )}
-        </Box>
-      )),
-    [writers]
-  );
-
-  return (
-    <Box className={`${WRITERS_CLASS}`}>
-      <Box className="jp-chat-writers-content">
-        {writingUsers}
-        <Box className="jp-chat-writing-status">
-          <Typography variant="body2" className="jp-chat-writing-text">
-            {writersText}
-          </Typography>
-          <TypingIndicator />
-        </Box>
-      </Box>
-    </Box>
-  );
-}