feat: add context for data communication

[lvisei]

import type { CodeBlockComponent } from '@antv/gpt-vis';
import { GPTVisLite, useGPTVisContext, withChartCode } from '@antv/gpt-vis';
import React, { useCallback, useMemo, useState } from 'react';

/**
 * 自定义代码块渲染器
 */
const MyUIRenderer: CodeBlockComponent = ({ children }) => {
  const context = useGPTVisContext();
  console.log('context: ', context);
  return null;
};
const customRenderers = { 'my-ui': MyUIRenderer };
const components = {
  code: withChartCode({
    languageRenderers: customRenderers, // register custom block renderer
  }),
};

export default () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    console.log('handleClick');
    setCount((pre) => pre + 1);
    // do something
  }, []);
  const context = useMemo(() => ({ count: count, onClick: handleClick }), [count]);

  return (
    <>
      <p>count: {count}</p>
      <GPTVisLite context={context} components={components}>
        {content}
      </GPTVisLite>
    </>
  );
};

[changeset-bot]

🦋 Changeset detected

Latest commit: 77e60a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@antv/gpt-vis	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🎊 PR Preview 77e60a7 has been successfully built and deployed to https://antvis-GPT-Vis-preview-pr-61.surge.sh

🕐 Build time: 14.431s

_{🤖 By surge-preview}