Add optional configurable message footer

[dlqqq]

Description

• Adds a new IJaiMessageFooter token that is optionally requested by the main @jupyter-ai/core:plugin plugin.
• When provided by another plugin, this renders a custom message footer component under each message. The footer component takes a single prop message, which takes the type AiService.ChatMessage.
• Adds developer documentation for details on how to implement this.
• Closes Add frontend plugin to allow for a custom React component to be rendered under each message #867

Demo

Testing instructions

To reproduce the above demo, add this test_plugin.tsx file under packages/jupyter-ai/src:

import React from 'react';
import {
  JupyterFrontEnd,
  JupyterFrontEndPlugin
} from '@jupyterlab/application';
import { IJaiMessageFooter, IJaiMessageFooterProps } from './tokens';

export const footerPlugin: JupyterFrontEndPlugin<IJaiMessageFooter> = {
  id: '@your-org/your-package:custom-footer',
  autoStart: true,
  requires: [],
  provides: IJaiMessageFooter,
  activate: (app: JupyterFrontEnd): IJaiMessageFooter => {
    return {
      component: MessageFooter
    };
  }
};

function MessageFooter(props: IJaiMessageFooterProps) {
  if (props.message.type !== 'agent' && props.message.type !== 'agent-stream') {
    return null;
  }

  return (
    <div>This is a test footer that renders under each agent message.</div>
  );
}

Then, in packages/jupyter-ai/src/index.ts, import this plugin & default-export it:

// index.ts

...

import { footerPlugin } from './test_plugin';

...

export default [plugin, statusItemPlugin, completionPlugin, footerPlugin];