sk/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(StyledSelect): reexport the <select> component with styled

Browse source
This commit is contained in:
WanQuanXie 2024-05-08 12:06:53 +08:00
parent aacde5a7a5
commit 0828045400
2 changed files with 53 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

53
ui/components/SettingsDialog.tsx
View file

@ -2,6 +2,7 @@ import { Dialog, Transition } from '@headlessui/react';
import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react'; import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react';
import React, { Fragment, useEffect, useState } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import { StyledInput } from './common/StyledInput'; import { StyledInput } from './common/StyledInput';
import { StyledSelect } from './common/StyledSelect';
interface SettingsType { interface SettingsType {
chatModelProviders: { chatModelProviders: {
@ -170,7 +171,7 @@ const SettingsDialog = ({
<p className="text-white/70 text-sm"> <p className="text-white/70 text-sm">
Chat model Provider Chat model Provider
</p> </p>
<select <StyledSelect
value={selectedChatModelProvider ?? undefined} value={selectedChatModelProvider ?? undefined}
onChange={(e) => { onChange={(e) => {
setSelectedChatModelProvider(e.target.value); setSelectedChatModelProvider(e.target.value);
@ -178,29 +179,27 @@ const SettingsDialog = ({
config.chatModelProviders[e.target.value][0], config.chatModelProviders[e.target.value][0],
); );
}} }}
className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
> >
{Object.keys(config.chatModelProviders).map( {Object.keys(config.chatModelProviders).map(
(provider) => ( (provider) => (
<option key={provider} value={provider}> <StyledSelect.Option key={provider} value={provider}>
{provider.charAt(0).toUpperCase() + {provider.charAt(0).toUpperCase() +
provider.slice(1)} provider.slice(1)}
</option> </StyledSelect.Option>
), ),
)} )}
</select> </StyledSelect>
</div> </div>
)} )}
{selectedChatModelProvider && {selectedChatModelProvider &&
selectedChatModelProvider != 'custom_openai' && ( selectedChatModelProvider != 'custom_openai' && (
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
<p className="text-white/70 text-sm">Chat Model</p> <p className="text-white/70 text-sm">Chat Model</p>
<select <StyledSelect
value={selectedChatModel ?? undefined} value={selectedChatModel ?? undefined}
onChange={(e) => onChange={(e) =>
setSelectedChatModel(e.target.value) setSelectedChatModel(e.target.value)
} }
className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
> >
{config.chatModelProviders[ {config.chatModelProviders[
selectedChatModelProvider selectedChatModelProvider
@ -211,21 +210,21 @@ const SettingsDialog = ({
config.chatModelProviders[ config.chatModelProviders[
selectedChatModelProvider selectedChatModelProvider
].map((model) => ( ].map((model) => (
<option key={model} value={model}> <StyledSelect.Option key={model} value={model}>
{model} {model}
</option> </StyledSelect.Option>
)) ))
) : ( ) : (
<option value="" disabled> <StyledSelect.Option value="" disabled>
No models available No models available
</option> </StyledSelect.Option>
) )
) : ( ) : (
<option value="" disabled> <StyledSelect.Option value="" disabled>
Invalid provider, please check backend logs Invalid provider, please check backend logs
</option> </StyledSelect.Option>
)} )}
</select> </StyledSelect>
</div> </div>
)} )}
{selectedChatModelProvider && {selectedChatModelProvider &&
@ -276,7 +275,7 @@ const SettingsDialog = ({
<p className="text-white/70 text-sm"> <p className="text-white/70 text-sm">
Embedding model Provider Embedding model Provider
</p> </p>
<select <StyledSelect
value={selectedEmbeddingModelProvider ?? undefined} value={selectedEmbeddingModelProvider ?? undefined}
onChange={(e) => { onChange={(e) => {
setSelectedEmbeddingModelProvider(e.target.value); setSelectedEmbeddingModelProvider(e.target.value);
@ -284,28 +283,26 @@ const SettingsDialog = ({
config.embeddingModelProviders[e.target.value][0], config.embeddingModelProviders[e.target.value][0],
); );
}} }}
className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
> >
{Object.keys(config.embeddingModelProviders).map( {Object.keys(config.embeddingModelProviders).map(
(provider) => ( (provider) => (
<option key={provider} value={provider}> <StyledSelect.Option key={provider} value={provider}>
{provider.charAt(0).toUpperCase() + {provider.charAt(0).toUpperCase() +
provider.slice(1)} provider.slice(1)}
</option> </StyledSelect.Option>
), ),
)} )}
</select> </StyledSelect>
</div> </div>
)} )}
{selectedEmbeddingModelProvider && ( {selectedEmbeddingModelProvider && (
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
<p className="text-white/70 text-sm">Embedding Model</p> <p className="text-white/70 text-sm">Embedding Model</p>
<select <StyledSelect
value={selectedEmbeddingModel ?? undefined} value={selectedEmbeddingModel ?? undefined}
onChange={(e) => onChange={(e) =>
setSelectedEmbeddingModel(e.target.value) setSelectedEmbeddingModel(e.target.value)
} }
className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
> >
{config.embeddingModelProviders[ {config.embeddingModelProviders[
selectedEmbeddingModelProvider selectedEmbeddingModelProvider
@ -316,21 +313,21 @@ const SettingsDialog = ({
config.embeddingModelProviders[ config.embeddingModelProviders[
selectedEmbeddingModelProvider selectedEmbeddingModelProvider
].map((model) => ( ].map((model) => (
<option key={model} value={model}> <StyledSelect.Option key={model} value={model}>
{model} {model}
</option> </StyledSelect.Option>
)) ))
) : ( ) : (
<option value="" disabled selected> <StyledSelect.Option value="" disabled selected>
No embedding models available No embedding models available
</option> </StyledSelect.Option>
) )
) : ( ) : (
<option value="" disabled selected> <StyledSelect.Option value="" disabled selected>
Invalid provider, please check backend logs Invalid provider, please check backend logs
</option> </StyledSelect.Option>
)} )}
</select> </StyledSelect>
</div> </div>
)} )}
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">

28
ui/components/common/StyledSelect.tsx Normal file
View file

@ -0,0 +1,28 @@
import { cn } from '@/lib/utils';
import type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react';
export interface StyledSelectProps
extends SelectHTMLAttributes<HTMLSelectElement> {}
export const StyledSelect = function StyledSelect({
className,
...restProps
}: StyledSelectProps) {
return (
<select
className={cn(
'bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm',
className,
)}
{...restProps}
/>
);
};
interface StyledSelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {}
StyledSelect.Option = function StyledSelectOption(
props: StyledSelectOptionProps,
) {
return <option {...props} />;
};