mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-18 06:22:28 +03:00
Merge pull request #3 from vidluther/remove-unused-ai-settings-component
Remove AISettings.svelte
This commit is contained in:
Vid Luther
GitHub
commit
a0fcef2b53
@ -1,310 +0,0 @@
|
||||
<script lang="ts">
|
||||
import InfoMessage from './InfoMessage.svelte';
|
||||
import Select from './Select.svelte';
|
||||
import SelectItem from './SelectItem.svelte';
|
||||
import Spacer from './Spacer.svelte';
|
||||
import TextBox from './TextBox.svelte';
|
||||
import WelcomeSigninAction from './WelcomeSigninAction.svelte';
|
||||
import { AIService, GitAIConfigKey, KeyOption } from '$lib/ai/service';
|
||||
import { OpenAIModelName, AnthropicModelName, ModelKind } from '$lib/ai/types';
|
||||
import { GitConfigService } from '$lib/backend/gitConfigService';
|
||||
import RadioButton from '$lib/components/RadioButton.svelte';
|
||||
import SectionCard from '$lib/components/SectionCard.svelte';
|
||||
import { UserService } from '$lib/stores/user';
|
||||
import { getContext } from '$lib/utils/context';
|
||||
import { onMount, tick } from 'svelte';
|
||||
|
||||
const gitConfigService = getContext(GitConfigService);
|
||||
const aiService = getContext(AIService);
|
||||
const userService = getContext(UserService);
|
||||
const user = userService.user;
|
||||
|
||||
let initialized = false;
|
||||
|
||||
let modelKind: ModelKind | undefined;
|
||||
let openAIKeyOption: KeyOption | undefined;
|
||||
let anthropicKeyOption: KeyOption | undefined;
|
||||
let openAIKey: string | undefined;
|
||||
let openAIModelName: OpenAIModelName | undefined;
|
||||
let anthropicKey: string | undefined;
|
||||
let anthropicModelName: AnthropicModelName | undefined;
|
||||
let diffLengthLimit: number | undefined;
|
||||
|
||||
function setConfiguration(key: GitAIConfigKey, value: string | undefined) {
|
||||
if (!initialized) return;
|
||||
|
||||
gitConfigService.set(key, value || '');
|
||||
}
|
||||
|
||||
$: setConfiguration(GitAIConfigKey.ModelProvider, modelKind);
|
||||
|
||||
$: setConfiguration(GitAIConfigKey.OpenAIKeyOption, openAIKeyOption);
|
||||
$: setConfiguration(GitAIConfigKey.OpenAIModelName, openAIModelName);
|
||||
$: setConfiguration(GitAIConfigKey.OpenAIKey, openAIKey);
|
||||
|
||||
$: setConfiguration(GitAIConfigKey.AnthropicKeyOption, anthropicKeyOption);
|
||||
$: setConfiguration(GitAIConfigKey.AnthropicModelName, anthropicModelName);
|
||||
$: setConfiguration(GitAIConfigKey.AnthropicKey, anthropicKey);
|
||||
$: setConfiguration(GitAIConfigKey.DiffLengthLimit, diffLengthLimit?.toString());
|
||||
|
||||
onMount(async () => {
|
||||
modelKind = await aiService.getModelKind();
|
||||
|
||||
openAIKeyOption = await aiService.getOpenAIKeyOption();
|
||||
openAIModelName = await aiService.getOpenAIModleName();
|
||||
openAIKey = await aiService.getOpenAIKey();
|
||||
|
||||
anthropicKeyOption = await aiService.getAnthropicKeyOption();
|
||||
anthropicModelName = await aiService.getAnthropicModelName();
|
||||
anthropicKey = await aiService.getAnthropicKey();
|
||||
|
||||
diffLengthLimit = await aiService.getDiffLengthLimit();
|
||||
|
||||
// Ensure reactive declarations have finished running before we set initialized to true
|
||||
await tick();
|
||||
|
||||
initialized = true;
|
||||
});
|
||||
|
||||
$: if (form) form.modelKind.value = modelKind;
|
||||
|
||||
const keyOptions = [
|
||||
{
|
||||
name: 'Use GitButler API',
|
||||
value: KeyOption.ButlerAPI
|
||||
},
|
||||
{
|
||||
name: 'Your own key',
|
||||
value: KeyOption.BringYourOwn
|
||||
}
|
||||
];
|
||||
|
||||
const openAIModelOptions = [
|
||||
{
|
||||
name: 'GPT 3.5 Turbo',
|
||||
value: OpenAIModelName.GPT35Turbo
|
||||
},
|
||||
{
|
||||
name: 'GPT 4',
|
||||
value: OpenAIModelName.GPT4
|
||||
},
|
||||
{
|
||||
name: 'GPT 4 Turbo',
|
||||
value: OpenAIModelName.GPT4Turbo
|
||||
},
|
||||
{
|
||||
name: 'GPT 4 Omni',
|
||||
value: OpenAIModelName.GPT4o
|
||||
}
|
||||
];
|
||||
|
||||
const anthropicModelOptions = [
|
||||
{
|
||||
name: 'Sonnet',
|
||||
value: AnthropicModelName.Sonnet
|
||||
},
|
||||
{
|
||||
name: 'Opus',
|
||||
value: AnthropicModelName.Opus
|
||||
},
|
||||
{
|
||||
name: 'Haiku',
|
||||
value: AnthropicModelName.Haiku
|
||||
}
|
||||
];
|
||||
|
||||
let form: HTMLFormElement;
|
||||
|
||||
function onFormChange(form: HTMLFormElement) {
|
||||
const formData = new FormData(form);
|
||||
modelKind = formData.get('modelKind') as ModelKind;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- <div class="ai-settings-wrap"> -->
|
||||
<p class="text-base-body-13 ai-settings__text">
|
||||
GitButler supports multiple providers for its AI powered features. We currently support models
|
||||
from OpenAI and Anthropic either proxied through the GitButler API, or in a bring your own key
|
||||
configuration.
|
||||
</p>
|
||||
|
||||
{#if !$user}
|
||||
<InfoMessage>
|
||||
<svelte:fragment slot="title">You must be logged in to use the GitButler API</svelte:fragment>
|
||||
</InfoMessage>
|
||||
{/if}
|
||||
|
||||
<form class="git-radio" bind:this={form} on:change={(e) => onFormChange(e.currentTarget)}>
|
||||
<SectionCard
|
||||
roundedBottom={false}
|
||||
orientation="row"
|
||||
labelFor="open-ai"
|
||||
bottomBorder={modelKind != ModelKind.OpenAI}
|
||||
>
|
||||
<svelte:fragment slot="title">Open AI</svelte:fragment>
|
||||
<svelte:fragment slot="actions">
|
||||
<RadioButton name="modelKind" id="open-ai" value={ModelKind.OpenAI} />
|
||||
</svelte:fragment>
|
||||
</SectionCard>
|
||||
{#if modelKind == ModelKind.OpenAI}
|
||||
<SectionCard
|
||||
hasTopRadius={false}
|
||||
roundedTop={false}
|
||||
roundedBottom={false}
|
||||
orientation="row"
|
||||
topDivider
|
||||
>
|
||||
<div class="inputs-group">
|
||||
<Select
|
||||
items={keyOptions}
|
||||
bind:selectedItemId={openAIKeyOption}
|
||||
itemId="value"
|
||||
labelId="name"
|
||||
label="Do you want to provide your own key?"
|
||||
>
|
||||
<SelectItem slot="template" let:item>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
</Select>
|
||||
|
||||
{#if openAIKeyOption == KeyOption.ButlerAPI}
|
||||
<InfoMessage filled outlined={false} style="pop" icon="ai">
|
||||
<svelte:fragment slot="title">
|
||||
GitButler uses OpenAI API for commit messages and branch names
|
||||
</svelte:fragment>
|
||||
</InfoMessage>
|
||||
{/if}
|
||||
|
||||
{#if openAIKeyOption == KeyOption.BringYourOwn}
|
||||
<TextBox label="API Key" bind:value={openAIKey} required placeholder="sk-..." />
|
||||
|
||||
<Select
|
||||
items={openAIModelOptions}
|
||||
bind:selectedItemId={openAIModelName}
|
||||
itemId="value"
|
||||
labelId="name"
|
||||
label="Model Version"
|
||||
>
|
||||
<SelectItem slot="template" let:item>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
</Select>
|
||||
{:else if !$user}
|
||||
<WelcomeSigninAction prompt="A user is required to make use of the GitButler API" />
|
||||
{/if}
|
||||
</div>
|
||||
</SectionCard>
|
||||
{/if}
|
||||
|
||||
<SectionCard
|
||||
roundedTop={false}
|
||||
roundedBottom={false}
|
||||
orientation="row"
|
||||
labelFor="anthropic"
|
||||
bottomBorder={modelKind != ModelKind.Anthropic}
|
||||
>
|
||||
<svelte:fragment slot="title">Anthropic</svelte:fragment>
|
||||
<svelte:fragment slot="actions">
|
||||
<RadioButton name="modelKind" id="anthropic" value={ModelKind.Anthropic} />
|
||||
</svelte:fragment>
|
||||
</SectionCard>
|
||||
{#if modelKind == ModelKind.Anthropic}
|
||||
<SectionCard
|
||||
hasTopRadius={false}
|
||||
roundedTop={false}
|
||||
roundedBottom={false}
|
||||
orientation="row"
|
||||
topDivider
|
||||
>
|
||||
<div class="inputs-group">
|
||||
<Select
|
||||
items={keyOptions}
|
||||
bind:selectedItemId={anthropicKeyOption}
|
||||
itemId="value"
|
||||
labelId="name"
|
||||
label="Do you want to provide your own key?"
|
||||
>
|
||||
<SelectItem slot="template" let:item>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
</Select>
|
||||
|
||||
{#if anthropicKeyOption == KeyOption.ButlerAPI}
|
||||
<InfoMessage filled outlined={false} style="pop" icon="ai">
|
||||
<svelte:fragment slot="title">
|
||||
GitButler uses OpenAI API for commit messages and branch names
|
||||
</svelte:fragment>
|
||||
</InfoMessage>
|
||||
{/if}
|
||||
|
||||
{#if anthropicKeyOption == KeyOption.BringYourOwn}
|
||||
<TextBox
|
||||
label="API Key"
|
||||
bind:value={anthropicKey}
|
||||
required
|
||||
placeholder="sk-ant-api03-..."
|
||||
/>
|
||||
|
||||
<Select
|
||||
items={anthropicModelOptions}
|
||||
bind:selectedItemId={anthropicModelName}
|
||||
itemId="value"
|
||||
labelId="name"
|
||||
label="Model Version"
|
||||
>
|
||||
<SelectItem slot="template" let:item>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
</Select>
|
||||
{:else if !$user}
|
||||
<WelcomeSigninAction prompt="A user is required to make use of the GitButler API" />
|
||||
{/if}
|
||||
</div>
|
||||
</SectionCard>
|
||||
{/if}
|
||||
|
||||
<SectionCard roundedTop={false} orientation="row" disabled={true}>
|
||||
<svelte:fragment slot="title">Custom Endpoint</svelte:fragment>
|
||||
<svelte:fragment slot="actions">
|
||||
<RadioButton disabled={true} name="modelKind" />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="caption">Support for custom AI endpoints is coming soon!</svelte:fragment
|
||||
>
|
||||
</SectionCard>
|
||||
</form>
|
||||
|
||||
<Spacer />
|
||||
|
||||
<SectionCard orientation="row">
|
||||
<svelte:fragment slot="title">Amount of provided context</svelte:fragment>
|
||||
<svelte:fragment slot="caption">
|
||||
How many characters of your git diff should be provided to AI
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="actions">
|
||||
<TextBox
|
||||
type="number"
|
||||
width={80}
|
||||
textAlign="center"
|
||||
value={diffLengthLimit?.toString()}
|
||||
minVal={100}
|
||||
on:input={(e) => {
|
||||
diffLengthLimit = parseInt(e.detail);
|
||||
}}
|
||||
placeholder="5000"
|
||||
/>
|
||||
</svelte:fragment>
|
||||
</SectionCard>
|
||||
|
||||
<style>
|
||||
.ai-settings__text {
|
||||
color: var(--clr-text-2);
|
||||
margin-bottom: var(--size-12);
|
||||
}
|
||||
|
||||
.inputs-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-16);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user