(
49 | null
50 | );
51 |
52 | // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
53 | const [codeToolbarDefns, setCodeToolbarDefns] = useState<
54 | Array<[HTMLDivElement, CodeToolbarProps]>
55 | >([]);
56 |
57 | useEffect(() => {
58 | const renderContent = async () => {
59 | const renderer = await MarkdownRenderer.renderContent({
60 | content: markdownStr,
61 | rmRegistry
62 | });
63 |
64 | const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
65 |
66 | // Attach CodeToolbar root element to each block
67 | const preBlocks = renderer.node.querySelectorAll('pre');
68 | preBlocks.forEach(preBlock => {
69 | const codeToolbarRoot = document.createElement('div');
70 | preBlock.parentNode?.insertBefore(
71 | codeToolbarRoot,
72 | preBlock.nextSibling
73 | );
74 | newCodeToolbarDefns.push([
75 | codeToolbarRoot,
76 | { model: model, content: preBlock.textContent || '' }
77 | ]);
78 | });
79 |
80 | setCodeToolbarDefns(newCodeToolbarDefns);
81 | setRenderedContent(renderer.node);
82 |
83 | // Resolve the rendered promise.
84 | props.rendered.resolve();
85 | };
86 |
87 | renderContent();
88 | }, [markdownStr, rmRegistry]);
89 |
90 | return (
91 |
92 | {renderedContent &&
93 | (appendContent ? (
94 |
node && node.appendChild(renderedContent)} />
95 | ) : (
96 |
node && node.replaceChildren(renderedContent)} />
97 | ))}
98 |
99 | {
100 | // Render a `CodeToolbar` element underneath each code block.
101 | // We use ReactDOM.createPortal() so each `CodeToolbar` element is able
102 | // to use the context in the main React tree.
103 | codeToolbarDefns.map(codeToolbarDefn => {
104 | const [codeToolbarRoot, codeToolbarProps] = codeToolbarDefn;
105 | return createPortal(
106 | ,
107 | codeToolbarRoot
108 | );
109 | })
110 | }
111 |
112 | );
113 | }
114 |
115 | export const MessageRenderer = React.memo(MessageRendererBase);
116 |
--------------------------------------------------------------------------------
/scripts/bump_version.py:
--------------------------------------------------------------------------------
1 | # Copyright (c) Jupyter Development Team.
2 | # Distributed under the terms of the Modified BSD License.
3 |
4 | import json
5 | from pathlib import Path
6 |
7 | import click
8 | from jupyter_releaser.util import get_version, run
9 | from pkg_resources import parse_version # type: ignore
10 |
11 | LERNA_CMD = "jlpm run lerna version --no-push --force-publish --no-git-tag-version"
12 |
13 | VERSION_SPEC = ["major", "minor", "release", "next", "patch"]
14 |
15 |
16 | def increment_version(current, spec):
17 | curr = parse_version(current)
18 |
19 | if spec == "major":
20 | spec = f"{curr.major + 1}.0.0.a0"
21 |
22 | elif spec == "minor":
23 | spec = f"{curr.major}.{curr.minor + 1}.0.a0"
24 |
25 | elif spec == "release":
26 | p, x = curr.pre
27 | if p == "a":
28 | p = "b"
29 | elif p == "b":
30 | p = "rc"
31 | elif p == "rc":
32 | p = None
33 | suffix = f"{p}0" if p else ""
34 | spec = f"{curr.major}.{curr.minor}.{curr.micro}{suffix}"
35 |
36 | elif spec == "next":
37 | spec = f"{curr.major}.{curr.minor}."
38 | if curr.pre:
39 | p, x = curr.pre
40 | spec += f"{curr.micro}{p}{x + 1}"
41 | else:
42 | spec += f"{curr.micro + 1}"
43 |
44 | elif spec == "patch":
45 | spec = f"{curr.major}.{curr.minor}."
46 | if curr.pre:
47 | spec += f"{curr.micro}"
48 | else:
49 | spec += f"{curr.micro + 1}"
50 | else:
51 | raise ValueError("Unknown version spec")
52 |
53 | return spec
54 |
55 |
56 | @click.command()
57 | @click.option("--force", default=False, is_flag=True)
58 | @click.option("--skip-if-dirty", default=False, is_flag=True)
59 | @click.argument("spec", nargs=1)
60 | def bump(force, skip_if_dirty, spec):
61 | status = run("git status --porcelain").strip()
62 | if len(status) > 0:
63 | if skip_if_dirty:
64 | return
65 | raise Exception("Must be in a clean git state with no untracked files")
66 |
67 | current = get_version()
68 |
69 | if spec in VERSION_SPEC:
70 | version = parse_version(increment_version(current, spec))
71 | else:
72 | version = parse_version(spec)
73 |
74 | # convert the Python version
75 | js_version = f"{version.major}.{version.minor}.{version.micro}"
76 | if version.pre:
77 | p, x = version.pre
78 | p = p.replace("a", "alpha").replace("b", "beta")
79 | js_version += f"-{p}.{x}"
80 |
81 | # bump the JS packages
82 | lerna_cmd = f"{LERNA_CMD} {js_version}"
83 | if force:
84 | lerna_cmd += " --yes"
85 | run(lerna_cmd)
86 |
87 | HERE = Path(__file__).parent.parent.resolve()
88 |
89 | # bump the Python packages
90 | for version_file in HERE.glob("python/**/_version.py"):
91 | content = version_file.read_text().splitlines()
92 | variable, current = content[0].split(" = ")
93 | if variable != "__version__":
94 | raise ValueError(
95 | f"Version file {version_file} has unexpected content;"
96 | f" expected __version__ assignment in the first line, found {variable}"
97 | )
98 | current = current.strip("'\"")
99 | if spec in VERSION_SPEC:
100 | version_spec = increment_version(current, spec)
101 | else:
102 | version_spec = spec
103 | version_file.write_text(f'__version__ = "{version_spec}"\n')
104 |
105 | # bump the local package.json file
106 | path = HERE.joinpath("package.json")
107 | if path.exists():
108 | with path.open(mode="r") as f:
109 | data = json.load(f)
110 |
111 | data["version"] = js_version
112 |
113 | with path.open(mode="w") as f:
114 | json.dump(data, f, indent=2)
115 |
116 | else:
117 | raise FileNotFoundError(f"Could not find package.json under dir {path!s}")
118 |
119 |
120 | if __name__ == "__main__":
121 | bump()
122 |
--------------------------------------------------------------------------------
/ui-tests/tests/user-mention.spec.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Jupyter Development Team.
3 | * Distributed under the terms of the Modified BSD License.
4 | */
5 |
6 | import {
7 | expect,
8 | galata,
9 | IJupyterLabPageFixture,
10 | test
11 | } from '@jupyterlab/galata';
12 | import { User } from '@jupyterlab/services';
13 | import { openChat, sendMessage, USER } from './test-utils';
14 |
15 | const FILENAME = 'my-chat.chat';
16 |
17 | test.use({
18 | mockUser: USER
19 | });
20 |
21 | test.describe('#user-mention', () => {
22 | let guestPage: IJupyterLabPageFixture;
23 | test.beforeEach(
24 | async ({ baseURL, browser, page, tmpPath, waitForApplication }) => {
25 | await page.filebrowser.contents.uploadContent('{}', 'text', FILENAME);
26 | // Create a new user.
27 | const user2: Partial
= {
28 | identity: {
29 | username: 'jovyan_2',
30 | name: 'jovyan_2',
31 | display_name: 'jovyan_2',
32 | initials: 'JP',
33 | color: 'var(--jp-collaborator-color2)'
34 | }
35 | };
36 |
37 | // Create a new page for guest.
38 | const { page: newPage } = await galata.newPage({
39 | baseURL: baseURL!,
40 | browser,
41 | mockUser: user2,
42 | tmpPath,
43 | waitForApplication
44 | });
45 | await newPage.evaluate(() => {
46 | // Acknowledge any dialog
47 | window.galata.on('dialog', d => {
48 | d?.resolve();
49 | });
50 | });
51 | guestPage = newPage;
52 | }
53 | );
54 |
55 | test.afterEach(async ({ page }) => {
56 | guestPage.close();
57 | if (await page.filebrowser.contents.fileExists(FILENAME)) {
58 | await page.filebrowser.contents.deleteFile(FILENAME);
59 | }
60 | });
61 |
62 | test('should open chat command with guest user', async ({ page }) => {
63 | const chatPanel = await openChat(page, FILENAME);
64 |
65 | // Send a message from guest to make sure users are populated
66 | await sendMessage(guestPage, FILENAME, 'Hello from guest');
67 |
68 | // Check mentions on main page
69 | const input = chatPanel
70 | .locator('.jp-chat-input-container')
71 | .getByRole('combobox');
72 | const chatCommandName = page.locator('.jp-chat-command-name');
73 | await input.press('@');
74 | await expect(chatCommandName).toHaveCount(1);
75 | expect(await chatCommandName.nth(0).textContent()).toBe('@jovyan_2');
76 | });
77 |
78 | test('should format mention in message', async ({ page }) => {
79 | const chatPanel = await openChat(page, FILENAME);
80 |
81 | // Send a message from guest.
82 | await sendMessage(guestPage, FILENAME, 'test');
83 |
84 | const input = chatPanel
85 | .locator('.jp-chat-input-container')
86 | .getByRole('combobox');
87 | const sendButton = chatPanel.locator(
88 | '.jp-chat-input-container .jp-chat-send-button'
89 | );
90 | const chatCommandName = page.locator('.jp-chat-command-name');
91 |
92 | await input.press('@');
93 | await chatCommandName.nth(0).click();
94 |
95 | await expect(input).toContainText('@jovyan_2');
96 | await sendButton.click();
97 |
98 | const message = chatPanel.locator('.jp-chat-messages-container').nth(0);
99 | await expect(message).toBeAttached();
100 | expect(message.locator('.jp-chat-mention')).toBeAttached();
101 | expect(message.locator('.jp-chat-mention')).toContainText('@jovyan_2');
102 | });
103 |
104 | test('should not be case sensitive', async ({ page }) => {
105 | const chatPanel = await openChat(page, FILENAME);
106 |
107 | // Send a message from guest.
108 | await sendMessage(guestPage, FILENAME, 'test');
109 |
110 | const input = chatPanel
111 | .locator('.jp-chat-input-container')
112 | .getByRole('combobox');
113 | const chatCommandName = page.locator('.jp-chat-command-name');
114 |
115 | await input.pressSequentially('@JO');
116 | await expect(chatCommandName).toHaveCount(1);
117 | expect(await chatCommandName.nth(0).textContent()).toBe('@jovyan_2');
118 | });
119 | });
120 |
--------------------------------------------------------------------------------
/packages/jupyter-chat/src/components/mui-extras/tooltipped-button.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Jupyter Development Team.
3 | * Distributed under the terms of the Modified BSD License.
4 | */
5 |
6 | import {
7 | Button,
8 | ButtonOwnProps,
9 | ButtonProps,
10 | SxProps,
11 | TooltipProps
12 | } from '@mui/material';
13 | import React from 'react';
14 |
15 | import { ContrastingTooltip } from './contrasting-tooltip';
16 |
17 | export const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
18 |
19 | export const DEFAULT_BUTTON_PROPS: Partial = {
20 | size: 'small',
21 | variant: 'contained'
22 | };
23 |
24 | export const DEFAULT_BUTTON_SX = {
25 | minWidth: '24px',
26 | width: '24px',
27 | height: '24px',
28 | lineHeight: 0,
29 | '&:disabled': {
30 | opacity: 0.5
31 | }
32 | };
33 |
34 | export const INPUT_TOOLBAR_BUTTON_SX = {
35 | backgroundColor: 'var(--jp-brand-color1)',
36 | color: 'white',
37 | borderRadius: '4px',
38 | boxShadow: 'none',
39 | '&:hover': {
40 | backgroundColor: 'var(--jp-brand-color0)',
41 | boxShadow: 'none'
42 | },
43 | '&:disabled': {
44 | backgroundColor: 'var(--jp-border-color2)',
45 | color: 'var(--jp-ui-font-color3)',
46 | opacity: 0.5
47 | }
48 | };
49 |
50 | export type TooltippedButtonProps = {
51 | onClick: React.MouseEventHandler;
52 | tooltip: string;
53 | children: JSX.Element;
54 | inputToolbar?: boolean;
55 | disabled?: boolean;
56 | placement?: TooltipProps['placement'];
57 | /**
58 | * The offset of the tooltip popup.
59 | *
60 | * The expected syntax is defined by the Popper library:
61 | * https://popper.js.org/docs/v2/modifiers/offset/
62 | */
63 | offset?: [number, number];
64 | 'aria-label'?: string;
65 | /**
66 | * Props passed directly to the MUI `Button` component.
67 | */
68 | buttonProps?: ButtonProps;
69 | /**
70 | * Styles applied to the MUI `Button` component.
71 | */
72 | sx?: SxProps;
73 | };
74 |
75 | /**
76 | * A component that renders an MUI `Button` with a high-contrast tooltip
77 | * provided by `ContrastingTooltip`. This component differs from the MUI
78 | * defaults in the following ways:
79 | *
80 | * - Shows the tooltip on hover even if disabled.
81 | * - Renders the tooltip above the button by default.
82 | * - Renders the tooltip closer to the button by default.
83 | * - Lowers the opacity of the Button when disabled.
84 | * - Renders the Button with `line-height: 0` to avoid showing extra
85 | * vertical space in SVG icons.
86 | *
87 | * NOTE TO DEVS: Please keep this component's features synchronized with
88 | * features available to `TooltippedIconButton`.
89 | */
90 | export function TooltippedButton(props: TooltippedButtonProps): JSX.Element {
91 | return (
92 |
108 | {/*
109 | By default, tooltips never appear when the Button is disabled. The
110 | official way to support this feature in MUI is to wrap the child Button
111 | element in a `span` element.
112 |
113 | See: https://mui.com/material-ui/react-tooltip/#disabled-elements
114 | */}
115 |
116 |
130 |
131 |
132 | );
133 | }
134 |
--------------------------------------------------------------------------------
/python/jupyterlab-chat/README.md:
--------------------------------------------------------------------------------
1 | # jupyterlab_chat
2 |
3 | [](https://github.com/jupyterlab/jupyter-chat/actions/workflows/build.yml)[](https://mybinder.org/v2/gh/jupyterlab/jupyter-chat/main?urlpath=lab)
4 |
5 | A chat extension based on shared documents.
6 |
7 | This extension is composed of a Python package named `jupyterlab_chat`
8 | for the server extension and a NPM package named `jupyterlab-chat-extension`
9 | for the frontend extension.
10 |
11 | This extension registers a `YChat` shared document, and associate the document to a
12 | chat widget in the front end.
13 |
14 | 
15 |
16 | ## Requirements
17 |
18 | - JupyterLab >= 4.0.0
19 |
20 | ## Install
21 |
22 | To install the extension, execute:
23 |
24 | ```bash
25 | pip install jupyterlab_chat
26 | ```
27 |
28 | ## Uninstall
29 |
30 | To remove the extension, execute:
31 |
32 | ```bash
33 | pip uninstall jupyterlab_chat
34 | ```
35 |
36 | ## Troubleshoot
37 |
38 | If you are seeing the frontend extension, but it is not working, check
39 | that the server extension is enabled:
40 |
41 | ```bash
42 | jupyter server extension list
43 | ```
44 |
45 | If the server extension is installed and enabled, but you are not seeing
46 | the frontend extension, check the frontend extension is installed:
47 |
48 | ```bash
49 | jupyter labextension list
50 | ```
51 |
52 | ## Contributing
53 |
54 | ### Development install
55 |
56 | Note: You will need NodeJS to build the extension package.
57 |
58 | The `jlpm` command is JupyterLab's pinned version of
59 | [yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
60 | `yarn` or `npm` in lieu of `jlpm` below.
61 |
62 | ```bash
63 | # Clone the repo to your local environment
64 | # Change directory to the jupyterlab_chat directory
65 | # Install package in development mode
66 | pip install -e ".[test]"
67 | # Link your development version of the extension with JupyterLab
68 | jupyter labextension develop . --overwrite
69 | # Rebuild extension Typescript source after making changes
70 | jlpm build
71 | ```
72 |
73 | You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
74 |
75 | ```bash
76 | # Watch the source directory in one terminal, automatically rebuilding when needed
77 | jlpm watch
78 | # Run JupyterLab in another terminal
79 | jupyter lab
80 | ```
81 |
82 | With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
83 |
84 | By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
85 |
86 | ```bash
87 | jupyter lab build --minimize=False
88 | ```
89 |
90 | ### Development uninstall
91 |
92 | ```bash
93 | pip uninstall jupyterlab_chat
94 | ```
95 |
96 | In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
97 | command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
98 | folder is located. Then you can remove the symlink named `jupyterlab-chat-extension` within that folder.
99 |
100 | ### Testing the extension
101 |
102 | #### Frontend tests
103 |
104 | This extension is using [Jest](https://jestjs.io/) for JavaScript code testing.
105 |
106 | To execute them, execute:
107 |
108 | ```sh
109 | jlpm
110 | jlpm test
111 | ```
112 |
113 | #### Integration tests
114 |
115 | This extension uses [Playwright](https://playwright.dev/docs/intro) for the integration tests (aka user level tests).
116 | More precisely, the JupyterLab helper [Galata](https://github.com/jupyterlab/jupyterlab/tree/master/galata) is used to handle testing the extension in JupyterLab.
117 |
118 | More information are provided within the [ui-tests](../../ui-tests/README.md) README.
119 |
120 | ### Packaging the extension
121 |
122 | See [RELEASE](RELEASE.md)
123 |
--------------------------------------------------------------------------------
/python/jupyterlab-chat/RELEASE.md:
--------------------------------------------------------------------------------
1 | # Making a new release of jupyterlab_chat
2 |
3 | The extension can be published to `PyPI` and `npm` manually or using the [Jupyter Releaser](https://github.com/jupyter-server/jupyter_releaser).
4 |
5 | ## Manual release
6 |
7 | ### Python package
8 |
9 | This extension can be distributed as Python packages. All of the Python
10 | packaging instructions are in the `pyproject.toml` file to wrap your extension in a
11 | Python package. Before generating a package, you first need to install some tools:
12 |
13 | ```bash
14 | pip install build twine hatch
15 | ```
16 |
17 | Bump the version using `hatch`. By default this will create a tag.
18 | See the docs on [hatch-nodejs-version](https://github.com/agoose77/hatch-nodejs-version#semver) for details.
19 |
20 | ```bash
21 | hatch version
22 | ```
23 |
24 | Make sure to clean up all the development files before building the package:
25 |
26 | ```bash
27 | jlpm clean:all
28 | ```
29 |
30 | You could also clean up the local git repository:
31 |
32 | ```bash
33 | git clean -dfX
34 | ```
35 |
36 | To create a Python source package (`.tar.gz`) and the binary package (`.whl`) in the `dist/` directory, do:
37 |
38 | ```bash
39 | python -m build
40 | ```
41 |
42 | > `python setup.py sdist bdist_wheel` is deprecated and will not work for this package.
43 |
44 | Then to upload the package to PyPI, do:
45 |
46 | ```bash
47 | twine upload dist/*
48 | ```
49 |
50 | ### NPM package
51 |
52 | To publish the frontend part of the extension as a NPM package, do:
53 |
54 | ```bash
55 | npm login
56 | npm publish --access public
57 | ```
58 |
59 | ## Automated releases with the Jupyter Releaser
60 |
61 | The extension repository should already be compatible with the Jupyter Releaser.
62 |
63 | Check out the [workflow documentation](https://jupyter-releaser.readthedocs.io/en/latest/get_started/making_release_from_repo.html) for more information.
64 |
65 | Here is a summary of the steps to cut a new release:
66 |
67 | - Add tokens to the [Github Secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) in the repository:
68 | - `ADMIN_GITHUB_TOKEN` (with "public_repo" and "repo:status" permissions); see the [documentation](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
69 | - `NPM_TOKEN` (with "automation" permission); see the [documentation](https://docs.npmjs.com/creating-and-viewing-access-tokens)
70 | - Set up PyPI
71 |
72 | Using PyPI trusted publisher (modern way)
73 |
74 | - Set up your PyPI project by [adding a trusted publisher](https://docs.pypi.org/trusted-publishers/adding-a-publisher/)
75 | - The _workflow name_ is `publish-release.yml` and the _environment_ should be left blank.
76 | - Ensure the publish release job as `permissions`: `id-token : write` (see the [documentation](https://docs.pypi.org/trusted-publishers/using-a-publisher/))
77 |
78 | Using PyPI token (legacy way)
81 |
82 | - If the repo generates PyPI release(s), create a scoped PyPI [token](https://packaging.python.org/guides/publishing-package-distribution-releases-using-github-actions-ci-cd-workflows/#saving-credentials-on-github). We recommend using a scoped token for security reasons.
83 |
84 | - You can store the token as `PYPI_TOKEN` in your fork's `Secrets`.
85 |
86 | - Advanced usage: if you are releasing multiple repos, you can create a secret named `PYPI_TOKEN_MAP` instead of `PYPI_TOKEN` that is formatted as follows:
87 |
88 | ```text
89 | owner1/repo1,token1
90 | owner2/repo2,token2
91 | ```
92 |
93 | If you have multiple Python packages in the same repository, you can point to them as follows:
94 |
95 | ```text
96 | owner1/repo1/path/to/package1,token1
97 | owner1/repo1/path/to/package2,token2
98 | ```
99 |
100 |