mirror of
https://github.com/coaidev/coai.git
synced 2025-06-01 03:10:20 +09:00
feat: support for individual collapsing and expanding of specific models in the model marketplace (#105)
This commit is contained in:
parent
a6af18c910
commit
dbee793f12
@ -5,7 +5,13 @@ import {
|
|||||||
CardTitle,
|
CardTitle,
|
||||||
} from "@/components/ui/card.tsx";
|
} from "@/components/ui/card.tsx";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import React, { Dispatch, useMemo, useReducer, useState } from "react";
|
import React, {
|
||||||
|
Dispatch,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useReducer,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
import { Model as RawModel } from "@/api/types.tsx";
|
import { Model as RawModel } from "@/api/types.tsx";
|
||||||
import { Input } from "@/components/ui/input.tsx";
|
import { Input } from "@/components/ui/input.tsx";
|
||||||
import {
|
import {
|
||||||
@ -438,11 +444,17 @@ function MarketItem({
|
|||||||
}: MarketItemProps) {
|
}: MarketItemProps) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const [stackedFilled, setStackedFilled] = useState<boolean>(false);
|
||||||
|
|
||||||
const checked = useMemo(
|
const checked = useMemo(
|
||||||
(): boolean => model.id.trim().length > 0 && model.name.trim().length > 0,
|
(): boolean => model.id.trim().length > 0 && model.name.trim().length > 0,
|
||||||
[model],
|
[model],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setStackedFilled(stacked);
|
||||||
|
}, [stacked]);
|
||||||
|
|
||||||
const Actions = ({ stacked }: { stacked?: boolean }) => (
|
const Actions = ({ stacked }: { stacked?: boolean }) => (
|
||||||
<div className={`market-row`}>
|
<div className={`market-row`}>
|
||||||
{!stacked && <div className={`grow`} />}
|
{!stacked && <div className={`grow`} />}
|
||||||
@ -491,6 +503,18 @@ function MarketItem({
|
|||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size={`icon`}
|
||||||
|
variant={`outline`}
|
||||||
|
onClick={() => setStackedFilled(!stackedFilled)}
|
||||||
|
>
|
||||||
|
{!stackedFilled ? (
|
||||||
|
<Minimize className={`h-4 w-4`} />
|
||||||
|
) : (
|
||||||
|
<Maximize className={`h-4 w-4`} />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
size={`icon`}
|
size={`icon`}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
@ -505,7 +529,7 @@ function MarketItem({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return !stacked ? (
|
return stackedFilled ? (
|
||||||
<div
|
<div
|
||||||
className={cn("market-item", !checked && "error")}
|
className={cn("market-item", !checked && "error")}
|
||||||
{...props}
|
{...props}
|
||||||
@ -1001,7 +1025,7 @@ function Market() {
|
|||||||
onClick={() => setStacked(!stacked)}
|
onClick={() => setStacked(!stacked)}
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
icon={stacked ? <Minimize /> : <Maximize />}
|
icon={!stacked ? <Minimize /> : <Maximize />}
|
||||||
className={`h-4 w-4`}
|
className={`h-4 w-4`}
|
||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -191,9 +191,7 @@ function General({ data, dispatch, onChange }: CompProps<GeneralState>) {
|
|||||||
/>
|
/>
|
||||||
</ParagraphItem>
|
</ParagraphItem>
|
||||||
<ParagraphItem>
|
<ParagraphItem>
|
||||||
<Label>
|
<Label>{t("admin.system.backend")}</Label>
|
||||||
<Require /> {t("admin.system.backend")}
|
|
||||||
</Label>
|
|
||||||
<Input
|
<Input
|
||||||
value={data.backend}
|
value={data.backend}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
|
Loading…
Reference in New Issue
Block a user