Repository: LAION-AI/Open-Assistant
File: website/src/components/Chat/PluginsChooser.tsx (TypeScript)

Code before:
      const plugin: PluginEntry = await post(API_ROUTES.GET_PLUGIN_CONFIG, {
        arg: { plugin: newPlugins[selectedForEditPluginIndex!] },
      });
      // disable all existing plugins and enable new one
      newPlugins.forEach((plugin) => (plugin.enabled = false));
      newPlugins[selectedForEditPluginIndex!].enabled = true;
      newPlugins[selectedForEditPluginIndex!].plugin_config = plugin.plugin_config;
      setValue("plugins", newPlugins, { shouldDirty: true });
    }
    onClose();
  }, [onClose, control, plugins, selectedForEditPluginIndex]);

  const handlePluginAdd = useCallback(() => {
    const newPlugin: PluginEntry = {
      url: "",
      enabled: false,
    };
    setValue("plugins", [...plugins, newPlugin]);
    handlePluginEdit(plugins.length);
  }, [setValue, plugins, handlePluginEdit]);

  return (
    <FormControl ref={containerRef}>
      <Menu placement="auto">
        <MenuButton as={Button} pr="3" rightIcon={<Cog />} size="lg" width="100%">
          {plugins && activePluginIndex > -1 && plugins[activePluginIndex]?.enabled ? (
            <Box display="flex" justifyContent="flex-start" gap={2}>
              <Image
                src={plugins[activePluginIndex]?.plugin_config?.logo_url}
                alt="Plugins"
                width="25px"
                height="25px"
                marginRight="5px"
              />
              <Text mt="4px" fontSize="sm" isTruncated>
                {plugins[activePluginIndex]?.plugin_config?.name_for_human}
              </Text>
            </Box>
          ) : (
            <Box display="flex" justifyContent="center" gap={2}>
              <AttachmentIcon boxSize="5" />
              {t("plugins")}
            </Box>
          )}
        </MenuButton>
        <Box position="fixed" zIndex="1">
          <MenuList left="-150px" position="absolute" w="280px">
            <RadioGroup value={plugins?.findIndex((plugin) => plugin.enabled).toString()}>
              {plugins?.map((plugin, index) => (
                <MenuItem key={index}>
                  <Radio value={index.toString()} onClick={() => handlePluginSelect(index)}>

Review comment (suggestion):
```suggestion
          {activePluginIndex > -1 && plugins[activePluginIndex]?.enabled ? (
```

Code after:
      const plugin: PluginEntry = await post(API_ROUTES.GET_PLUGIN_CONFIG, {
        arg: { plugin: newPlugins[selectedForEditPluginIndex!] },
      });
      // disable all existing plugins and enable new one
      newPlugins.forEach((plugin) => (plugin.enabled = false));
      newPlugins[selectedForEditPluginIndex!].enabled = true;
      newPlugins[selectedForEditPluginIndex!].plugin_config = plugin.plugin_config;
      setValue("plugins", newPlugins, { shouldDirty: true });
    }
    onClose();
  }, [onClose, control, plugins, selectedForEditPluginIndex]);

  const handlePluginAdd = useCallback(() => {
    const newPlugin: PluginEntry = {
      url: "",
      enabled: false,
    };
    setValue("plugins", [...plugins, newPlugin]);
    handlePluginEdit(plugins.length);
  }, [setValue, plugins, handlePluginEdit]);

  return (
    <FormControl ref={containerRef}>
      <Menu placement="auto">
        <MenuButton as={Button} pr="3" rightIcon={<Cog />} size="lg" width="100%">
          {activePluginIndex > -1 && plugins[activePluginIndex]?.enabled ? (
            <Box display="flex" justifyContent="flex-start" gap={2}>
              <Image
                src={plugins[activePluginIndex]?.plugin_config?.logo_url}
                alt="Plugins"
                width="25px"
                height="25px"
                marginRight="5px"
              />
              <Text mt="4px" fontSize="sm" isTruncated>
                {plugins[activePluginIndex]?.plugin_config?.name_for_human}
              </Text>
            </Box>
          ) : (
            <Box display="flex" justifyContent="center" gap={2}>
              <AttachmentIcon boxSize="5" />
              {t("plugins")}
            </Box>
          )}
        </MenuButton>
        <Box position="fixed" zIndex="1">
          <MenuList left="-150px" position="absolute" w="280px">
            <RadioGroup value={plugins?.findIndex((plugin) => plugin.enabled).toString()}>
              {plugins?.map((plugin, index) => (
                <MenuItem key={index}>
                  <Radio value={index.toString()} onClick={() => handlePluginSelect(index)}>