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

Code before:
  Stack,
  Textarea,
  useDisclosure,
} from "@chakra-ui/react";
import { Cog, Edit, Plus } from "lucide-react";
import { AttachmentIcon, WarningIcon, CheckCircleIcon, CloseIcon } from "@chakra-ui/icons";
import { ChangeEvent, useCallback, useMemo, useEffect, useState, useRef } from "react";
import { useTranslation } from "next-i18next";
import { Controller, useFormContext } from "react-hook-form";
import { ChatConfigFormData } from "src/types/Chat";
import { useChatContext } from "./ChatContext";
import { PluginEntry } from "src/types/Chat";
import { get, post } from "src/lib/api";
import { API_ROUTES } from "src/lib/routes";

export const PluginsChooser = ({ plugins }: { plugins: PluginEntry[] }) => {
  const { t } = useTranslation("chat");
  const { control, register, reset, setValue } = useFormContext<ChatConfigFormData>();
  const [selectedForEditPluginIndex, setSelectedForEditPluginIndex] = useState<number | null>(null);
  const { isOpen, onOpen, onClose } = useDisclosure();

  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);

  const activePluginIndex = useMemo(() => {
    return plugins?.findIndex((plugin) => plugin.enabled) ?? -1;
  }, [plugins]);

  const handlePluginSelect = useCallback(
    (index: number) => {
      const selectedIndex = plugins.findIndex((plugin) => plugin.enabled);
      const newPlugins = plugins.map((plugin, i) => ({
        ...plugin,
        enabled: selectedIndex === index ? false : i === index,
      }));
      setValue("plugins", newPlugins, { shouldDirty: true });
    },
    [setValue, plugins]
  );

  const handlePluginEdit = useCallback(
    (index: number) => {
      setSelectedForEditPluginIndex(index);
      onOpen();
    },
    [onOpen]
  );

  const handlePluginRemove = useCallback(
    (index) => {
      const updatedPlugins = plugins.filter((_, idx) => idx !== index);

Review comment (suggestion):
Since you alreay has a fall back `|| []`, I don't think we need `?` and `?? - 1` here anymore
```suggestion
    return plugins.findIndex((plugin) => plugin.enabled);
```

Code after:
  Stack,
  Textarea,
  useDisclosure,
} from "@chakra-ui/react";
import { Cog, Edit, Plus } from "lucide-react";
import { AttachmentIcon, WarningIcon, CheckCircleIcon, CloseIcon } from "@chakra-ui/icons";
import { ChangeEvent, useCallback, useMemo, useEffect, useState, useRef } from "react";
import { useTranslation } from "next-i18next";
import { Controller, useFormContext } from "react-hook-form";
import { ChatConfigFormData } from "src/types/Chat";
import { useChatContext } from "./ChatContext";
import { PluginEntry } from "src/types/Chat";
import { get, post } from "src/lib/api";
import { API_ROUTES } from "src/lib/routes";

export const PluginsChooser = ({ plugins }: { plugins: PluginEntry[] }) => {
  const { t } = useTranslation("chat");
  const { control, register, reset, setValue } = useFormContext<ChatConfigFormData>();
  const [selectedForEditPluginIndex, setSelectedForEditPluginIndex] = useState<number | null>(null);
  const { isOpen, onOpen, onClose } = useDisclosure();

  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);

  const activePluginIndex = useMemo(() => {
    return plugins.findIndex((plugin) => plugin.enabled);
  }, [plugins]);

  const handlePluginSelect = useCallback(
    (index: number) => {
      const selectedIndex = plugins.findIndex((plugin) => plugin.enabled);
      const newPlugins = plugins.map((plugin, i) => ({
        ...plugin,
        enabled: selectedIndex === index ? false : i === index,
      }));
      setValue("plugins", newPlugins, { shouldDirty: true });
    },
    [setValue, plugins]
  );

  const handlePluginEdit = useCallback(
    (index: number) => {
      setSelectedForEditPluginIndex(index);
      onOpen();
    },
    [onOpen]
  );

  const handlePluginRemove = useCallback(
    (index) => {
      const updatedPlugins = plugins.filter((_, idx) => idx !== index);