Plugin runtime (#2050)

* feat: plugin run (#1950)

* feat: plugin run

* fix

* ui

* fix

* change user input type

* fix

* fix

* temp

* split out plugin chat

* perf: chatbox

* perf: chatbox

* fix: plugin runtime (#2032)

* fix: plugin runtime

* fix

* fix build

* fix build

* perf: chat send prompt

* perf: chat log ux

* perf: chatbox context and share page plugin runtime

* perf: plugin run time config

* fix: ts

* feat: doc

* perf: isPc check

* perf: variable input render

* feat: app search

* fix: response box height

* fix: phone ui

* perf: lock

* perf: plugin route

* fix: chat (#2049)

---------

Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

packages/web/components/common/MySelect/MultipleSelect.tsx

@@ -81,7 +81,6 @@ const MultipleSelect = <T = any,>({
           borderRadius={'md'}
           border={'base'}
           userSelect={'none'}
-          minH={'40px'}
           cursor={'pointer'}
           _active={{
             transform: 'none'

packages/web/components/common/MySelect/index.tsx

@@ -1,4 +1,11 @@
-import React, { useRef, forwardRef, useMemo } from 'react';
+import React, {
+  useRef,
+  forwardRef,
+  useMemo,
+  useEffect,
+  useImperativeHandle,
+  ForwardedRef
+} from 'react';
 import {
   Menu,
   MenuList,
@@ -28,17 +35,21 @@ export type SelectProps<T = any> = ButtonProps & {
   onchange?: (val: T) => void;
 };
 
-const MySelect = <T = any,>({
-  placeholder,
-  value,
-  width = '100%',
-  list = [],
-  onchange,
-  isLoading = false,
-  ...props
-}: SelectProps<T>) => {
-  const ref = useRef<HTMLButtonElement>(null);
-  const { Loading } = useLoading();
+const MySelect = <T = any,>(
+  {
+    placeholder,
+    value,
+    width = '100%',
+    list = [],
+    onchange,
+    isLoading = false,
+    ...props
+  }: SelectProps<T>,
+  ref: ForwardedRef<{
+    focus: () => void;
+  }>
+) => {
+  const ButtonRef = useRef<HTMLButtonElement>(null);
   const menuItemStyles: MenuItemProps = {
     borderRadius: 'sm',
     py: 2,
@@ -54,6 +65,12 @@ const MySelect = <T = any,>({
   const { isOpen, onOpen, onClose } = useDisclosure();
   const selectItem = useMemo(() => list.find((item) => item.value === value), [list, value]);
 
+  useImperativeHandle(ref, () => ({
+    focus() {
+      onOpen();
+    }
+  }));
+
   return (
     <Box
       css={css({
@@ -72,7 +89,7 @@ const MySelect = <T = any,>({
       >
         <MenuButton
           as={Button}
-          ref={ref}
+          ref={ButtonRef}
           width={width}
           px={3}
           rightIcon={<ChevronDownIcon />}
@@ -98,7 +115,7 @@ const MySelect = <T = any,>({
         <MenuList
           className={props.className}
           minW={(() => {
-            const w = ref.current?.clientWidth;
+            const w = ButtonRef.current?.clientWidth;
             if (w) {
               return `${w}px !important`;
             }
@@ -152,4 +169,6 @@ const MySelect = <T = any,>({
   );
 };
 
-export default MySelect;
+export default forwardRef(MySelect) as <T>(
+  props: SelectProps<T> & { ref?: React.Ref<HTMLSelectElement> }
+) => JSX.Element;