mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance chat setup options and improve UI responsiveness

Browse Source
This commit is contained in:
kwaroran
2024-11-14 21:42:56 +09:00
parent 75efc36211
commit a862ffe0e3
3 changed files with 209 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/lang/en.ts
View File

@@ -182,13 +182,39 @@ export const languageEnglish = {
inputName: "Lastly, Input your Nickname.",
welcome: "Welcome to RisuAI! Here, I will guide you to setup. First, What may I call you?",
welcome2: "Hello {username}! before we start, I will ask you some questions. You can change these settings later in settings.\n\nFirst select the AI provider.",
openAIProvider: "OpenAI GPT is a high quality AI model, but it is paid and filtered.",
openrouterProvider: "Openrouter has a lot of models, some of them unfiltered and some of them free, but it is not as good as OpenAI.",
hordeProvider: "Horde is a free provider, but the response time is long and the quality is low.",
setProviderLater: "There are other providers, but you can set it later in settings. select this if you want to set it later.",
setupOpenAI: "To use OpenAI, you need to get an API key. \n1. go to https://beta.openai.com/ \n2. login with your account \n3. go to https://beta.openai.com/account/api-keys \n4. click 'Create New API Key' and name your key whatever you want. \n5. copy the key in the website.\n6. go back to RisuAI\n7. paste it, and click send button.",
setupOpenrouter: "To use Openrouter, you need to get an API key. \n1. go to https://openrouter.ai/keys\n2. click 'Create Key'\n3. set key name whatever you want.\n4. copy the key in the website\n5. go back to RisuAI\n6. paste it, and click send button.",
allDone: "All Done! please wait a moment.",
setupLaterMessage: "Welcome {username}! do you want me to guide you to setup or do it yourself?",
setupMessageOption1: "Guide me to setup",
setupMessageOption1Desc: "Recommended for new users",
setupMessageOption2: "I will setup myself",
claudeDesc: "Claude is a AI model made by Antropic, competitor to OpenAI. its better than GPT if you want to use it in other languages than English.",
openAIDesc: "OpenAI GPT is a high quality AI model, but it is paid and filtered, and weak in other than English.",
chooseChatType: "Great! Now select the chat language.",
chooseChatTypeOption1: "Full English",
chooseChatTypeOption1Desc: "This will make AI to use English and input/output in English. Recommended for English speakers.",
chooseChatTypeOption2: "English Processing",
chooseChatTypeOption2Desc: "This will make AI to use English internaly, but input/output will be in your language. Recommended for non-English speakers.",
chooseChatTypeOption3: "No Language Focused",
chooseChatTypeOption3Desc: "This will make AI to use your language internaly, but this could make quality lower.",
chooseCheapOrMemory: "By the way, do you prefer memory or cheapness?",
chooseCheapOrMemoryOption1: "Memory",
chooseCheapOrMemoryOption1Desc: "This will make AI to remember more, but it will quite expensive.",
chooseCheapOrMemoryOption2: "Cheap",
chooseCheapOrMemoryOption2Desc: "This will make AI to remember less, but it will be cheaper.",
chooseCheapOrMemoryOption3: "Balanced",
chooseCheapOrMemoryOption3Desc: "This will make AI to remember more than cheap, but less than memory.",
chooseCheapOrMemoryOption4: "Unlimited",
chooseCheapOrMemoryOption4Desc: "This will make AI to remember almost everything, but it will be very expensive.",
finally: "Finally, do you want to enable advanced tools?",
finallyOption1: "Yes",
finallyOption1Desc: "This will enable advanced tools, but it will make the UI more complex. Recommended for advanced users.",
finallyOption2: "No",
finallyOption2Desc: "This will disable advanced tools, and make the UI more simple. Recommended for new users.",
},
confirm: "Confirm",
goback: "Go Back",

3
src/lib/ChatScreens/DefaultChatScreen.svelte
View File

@@ -464,7 +464,7 @@
}}
oninput={()=>{updateInputSizeAll();updateInputTransateMessage(false)}}
style:height={inputHeight}
></textarea>
></textarea>
{:else}
<AdvancedChatEditor
bind:value={messageInput}
@@ -749,6 +749,7 @@
updateInputSizeAll()
}
}}>
<ImagePlusIcon />
<span class="ml-2">{language.postFile}</span>
</div>

206
src/lib/Others/WelcomeRisu.svelte
View File

@@ -10,8 +10,10 @@
let step = $state(0)
let provider = $state('')
let input = $state('')
let chatLang = $state(0)
let chatMemorySelection = $state(0)
if(step === 0){
{
const browserLang = navigator.language
const browserLangShort = browserLang.split('-')[0]
const usableLangs = ['de', 'en', 'ko', 'cn', 'vi', 'zh-Hant']
@@ -41,18 +43,18 @@
}
break
}
case 3:{
case 4:{
if(provider === 'openai'){
if(input.length > 0 && input.startsWith('sk-')){
DBState.db.openAIKey = input
step = 10
step = 5
input = ''
}
}
if(provider === 'openrouter'){
if(input.length > 0 && input.startsWith('sk-')){
DBState.db.openrouterKey = input
step = 10
step = 5
input = ''
}
}
@@ -66,20 +68,83 @@
DBState.db = setPreset(DBState.db, prebuiltPresets.OAI2)
DBState.db.textTheme = 'highcontrast'
updateTextThemeAndCSS()
switch(chatMemorySelection){
case 0:{
DBState.db.maxContext = 16000
DBState.db.maxResponse = 1000
break
}
case 1:{
DBState.db.maxContext = 8000
DBState.db.maxResponse = 500
break
}
case 2:{
DBState.db.maxContext = 12000
DBState.db.maxResponse = 800
break
}
case 3:{
DBState.db.maxContext = 100000
DBState.db.maxResponse = 1000
break
}
}
if(provider === 'claude'){
DBState.db.aiModel = 'claude-3-5-sonnet-20241022'
DBState.db.subModel = 'claude-3-5-sonnet-20241022'
}
if(provider === 'openai'){
DBState.db.aiModel = 'gpt4o-chatgpt'
DBState.db.subModel = 'gpt4o-chatgpt'
}
if(provider === 'openrouter'){
DBState.db.aiModel = 'openrouter'
DBState.db.subModel = 'openrouter'
DBState.db.openrouterRequestModel = 'risu/free'
DBState.db.maxContext = 6000
}
if(provider === 'horde'){
DBState.db.aiModel = 'horde:::auto'
DBState.db.subModel = 'horde:::auto'
}
if(provider === 'openai'){
DBState.db.maxContext = 4000
if(chatLang !== 0){
switch(DBState.db.language){
case 'de':{
DBState.db.translator = 'de'
break
}
case 'en':{
DBState.db.translator = 'en'
break
}
case 'ko':{
DBState.db.translator = 'ko'
break
}
case 'cn':{
DBState.db.translator = 'zh'
break
}
case 'vi':{
DBState.db.translator = 'vi'
break
}
case 'zh-Hant':{
DBState.db.translator = 'zh-TW'
break
}
}
}
if(chatLang === 1){
DBState.db.autoTranslate = true
DBState.db.translatorType = 'google'
DBState.db.useAutoTranslateInput = true
}
DBState.db.didFirstSetup = true
}, 1000);
}
@@ -136,16 +201,43 @@
<Chat name="Risu" message={language.setup.welcome} isLastMemory={false} />
{#if step >= 2}
<Chat name={DBState.db.username} message={DBState.db.username} isLastMemory={false} />
<Chat name="Risu" message={language.setup.welcome2.replace('{username}', DBState.db.username)} isLastMemory={false} />
<Chat name="Risu" message={language.setup.setupLaterMessage.replace('{username}', DBState.db.username)} isLastMemory={false} />
{/if}
{#if step === 2}
<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
<button class="border-l-blue-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1 col-span-2" onclick={() => {
step = 3
}}>
<h1 class="text-2xl font-bold text-start">{language.setup.setupMessageOption1}</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.setupMessageOption1Desc}</span>
</button>
<button class="border-l-gray-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
provider = 'later'
step = 10
}}>
<h1 class="text-md font-bold text-start text-gray-500">{language.setup.setupMessageOption2}</h1>
</button>
</div>
{/if}
{#if step >= 3}
<Chat name={DBState.db.username} message={language.setup.setupMessageOption1} isLastMemory={false} />
<Chat name="Risu" message={language.setup.welcome2.replace('{username}', DBState.db.username)} isLastMemory={false} />
{/if}
{#if step === 3}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<button class="border-l-blue-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
provider = 'openai'
step = 3
step = 4
}}>
<h1 class="text-2xl font-bold text-start">OpenAI</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.openAIProvider}</span>
<span class="mt-2 text-textcolor2 text-start">{language.setup.openAIDesc}</span>
</button>
<button class="border-l-gray-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
provider = 'claude'
step = 4
}}>
<h1 class="text-2xl font-bold text-start">Claude</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.claudeDesc}</span>
</button>
<button class="border-l-red-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
provider = 'horde'
@@ -156,21 +248,14 @@
</button>
<button class="border-l-green-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
provider = 'openrouter'
step = 3
step = 4
}}>
<h1 class="text-2xl font-bold text-start">OpenRouter</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.openrouterProvider}</span>
</button>
<button class="border-l-gray-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
provider = 'later'
step = 10
}}>
<h1 class="text-2xl font-bold text-start">Setup Later</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.setProviderLater}</span>
</button>
</div>
{/if}
{#if step >= 3}
{#if step >= 4}
<Chat name={DBState.db.username} message={provider} isLastMemory={false} />
{#if provider === 'openai'}
<Chat name="Risu" message={language.setup.setupOpenAI} isLastMemory={false} />
@@ -179,11 +264,78 @@
<Chat name="Risu" message={language.setup.setupOpenrouter} isLastMemory={false} />
{/if}
{/if}
{#if step >= 5}
<Chat name={DBState.db.username} message="<HIDDEN>" isLastMemory={false} />
<Chat name="Risu" message={language.setup.chooseChatType} isLastMemory={false} />
{/if}
{#if step === 5}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<button class="border-l-blue-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
chatLang = 0
step = 6
}}>
<h1 class="text-2xl font-bold text-start">{language.setup.chooseChatTypeOption1}</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.chooseChatTypeOption1Desc}</span>
</button>
<button class="border-l-green-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
chatLang = 1
step = 6
}}>
<h1 class="text-2xl font-bold text-start">{language.setup.chooseChatTypeOption2}</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.chooseChatTypeOption2Desc}</span>
</button>
<button class="border-l-red-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
chatLang = 2
step = 6
}}>
<h1 class="text-2xl font-bold text-start">{language.setup.chooseChatTypeOption3}</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.chooseChatTypeOption3Desc}</span>
</button>
</div>
{/if}
{#if step >= 6}
<Chat name={DBState.db.username} message={
language.setup[`chooseChatTypeOption${chatLang+1}`]
} isLastMemory={false} />
<Chat name="Risu" message={language.setup.chooseCheapOrMemory} isLastMemory={false} />
{/if}
{#if step === 6}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<button class="border-l-blue-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
chatMemorySelection = 0
step = 10
}}>
<h1 class="text-2xl font-bold text-start">{language.setup.chooseCheapOrMemoryOption1}</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.chooseCheapOrMemoryOption1Desc}</span>
</button>
<button class="border-l-green-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
chatMemorySelection = 1
step = 10
}}>
<h1 class="text-2xl font-bold text-start">{language.setup.chooseCheapOrMemoryOption2}</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.chooseCheapOrMemoryOption2Desc}</span>
</button>
<button class="border-l-red-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
chatMemorySelection = 2
step = 10
}}>
<h1 class="text-2xl font-bold text-start">{language.setup.chooseCheapOrMemoryOption3}</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.chooseCheapOrMemoryOption3Desc}</span>
</button>
<button class="border-l-yellow-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
chatMemorySelection = 3
step = 10
}}>
<h1 class="text-2xl font-bold text-start">{language.setup.chooseCheapOrMemoryOption4}</h1>
<span class="mt-2 text-textcolor2 text-start">{language.setup.chooseCheapOrMemoryOption4Desc}</span>
</button>
</div>
{/if}
{#if step === 10}
<Chat name="Risu" message={language.setup.allDone} isLastMemory={false} />
{/if}
<div class="flex items-end mb-2 w-full mt-auto ">
<input class="flex-grow text-textcolor p-2 min-w-0 bg-transparent input-text text-xl ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
<div class="flex items-stretch mb-2 w-full mt-auto">
<textarea class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border border-r-0 bg-transparent rounded-md rounded-r-none input-text text-xl flex-grow ml-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full"
bind:value={input}
onkeydown={(e) => {
if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey) && !e.isComposing){
@@ -192,11 +344,13 @@
}
}}
style:height={'44px'}
/>
<div onclick={send}
class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
></textarea>
<button
onclick={send}
class="flex justify-center border-y border-r rounded-r-md border-darkborderc items-center text-gray-100 p-2 peer-focus:border-textcolor hover:bg-blue-500 transition-colors"
>
<Send />
</div>
</button>
</div>
{/if}
</div>