mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-19 15:41:31 +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