Skip to content

Commit

Permalink
fix: improve error handling chat conversation + ollama warning (#507)
Browse files Browse the repository at this point in the history 
* fix: improve error handling and function calls

* fix: ollama tools warning
  • Loading branch information
@paulclindo
paulclindo authored Oct 18, 2024
1 parent d51a155 commit 7f6081e
Show file tree
Hide file tree
Showing 5 changed files with 189 additions and 163 deletions.
248 changes: 154 additions & 94 deletions apps/shinkai-desktop/src/components/chat/chat-action-bar/chat-config-action-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@ import { useTranslation } from '@shinkai_network/shinkai-i18n';
import { extractJobIdFromInbox } from '@shinkai_network/shinkai-message-ts/utils/inbox_name_handler';
import { useUpdateChatConfig } from '@shinkai_network/shinkai-node-state/v2/mutations/updateChatConfig/useUpdateChatConfig';
import { useGetChatConfig } from '@shinkai_network/shinkai-node-state/v2/queries/getChatConfig/useGetChatConfig';
import { useGetLLMProviders } from '@shinkai_network/shinkai-node-state/v2/queries/getLLMProviders/useGetLLMProviders';
import {
Alert,
Button,
Form,
Popover,
PopoverContent,
PopoverTrigger,
Tooltip,
TooltipContent,
TooltipPortal,
TooltipProvider,
TooltipTrigger,
} from '@shinkai_network/shinkai-ui';
Expand All @@ -28,7 +31,9 @@ import {
Switch,
Textarea,
} from '@shinkai_network/shinkai-ui';
import { cn } from '@shinkai_network/shinkai-ui/utils';
import { Settings2 } from 'lucide-react';
import { InfoCircleIcon } from 'primereact/icons/infocircle';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { UseFormReturn } from 'react-hook-form';
Expand All @@ -37,6 +42,7 @@ import { toast } from 'sonner';
import { z } from 'zod';

import { useAuth } from '../../../store/auth';
import { useSettings } from '../../../store/settings';
import { actionButtonClassnames } from '../conversation-footer';

export const chatConfigFormSchema = z.object({
Expand Down Expand Up @@ -293,70 +299,73 @@ export function UpdateChatConfigActionBar() {
};

return (
<Popover
onOpenChange={(open) => {
if (open) {
form.reset({
stream: chatConfig?.stream,
customPrompt: chatConfig?.custom_prompt ?? '',
temperature: chatConfig?.temperature,
topP: chatConfig?.top_p,
topK: chatConfig?.top_k,
});
}
}}
>
<TooltipProvider delayDuration={0}>
<Tooltip>
<PopoverTrigger asChild>
<TooltipTrigger asChild>
<button className={actionButtonClassnames} type="button">
<Settings2 className="h-full w-full" />
</button>
</TooltipTrigger>
</PopoverTrigger>
<PopoverContent
align="end"
className="min-w-[380px] bg-gray-300 px-6 py-7 text-xs"
side="top"
>
<h2 className="leading-1 text-gray-80 mb-5 text-xs uppercase">
Chat Settings
</h2>
<div className="flex items-center gap-2">
<ToolsDisabledAlert streamActive={form.watch('stream')} />
<Popover
onOpenChange={(open) => {
if (open) {
form.reset({
stream: chatConfig?.stream,
customPrompt: chatConfig?.custom_prompt ?? '',
temperature: chatConfig?.temperature,
topP: chatConfig?.top_p,
topK: chatConfig?.top_k,
});
}
}}
>
<TooltipProvider delayDuration={0}>
<Tooltip>
<PopoverTrigger asChild>
<TooltipTrigger asChild>
<button className={actionButtonClassnames} type="button">
<Settings2 className="h-full w-full" />
</button>
</TooltipTrigger>
</PopoverTrigger>
<PopoverContent
align="end"
className="min-w-[380px] bg-gray-300 px-6 py-7 text-xs"
side="top"
>
<h2 className="leading-1 text-gray-80 mb-5 text-xs uppercase">
Chat Settings
</h2>

<Form {...form}>
<form
className="flex w-full flex-col justify-between gap-10 overflow-hidden"
onSubmit={form.handleSubmit(onSubmit)}
>
<ChatConfigForm form={form} />
<div className="flex items-center justify-end gap-2">
<PopoverClose asChild>
<Button
className="h-9 min-w-[100px] gap-2 rounded-xl"
size="sm"
variant="outline"
>
<span>{t('common.cancel')}</span>
</Button>
</PopoverClose>
<PopoverClose asChild>
<Button
className="h-9 min-w-[100px] gap-2 rounded-xl"
size="sm"
type={'submit'}
>
<span>{t('common.save')}</span>
</Button>
</PopoverClose>
</div>
</form>
</Form>
</PopoverContent>
<TooltipContent>Chat Settings</TooltipContent>
</Tooltip>
</TooltipProvider>
</Popover>
<Form {...form}>
<form
className="flex w-full flex-col justify-between gap-10 overflow-hidden"
onSubmit={form.handleSubmit(onSubmit)}
>
<ChatConfigForm form={form} />
<div className="flex items-center justify-end gap-2">
<PopoverClose asChild>
<Button
className="h-9 min-w-[100px] gap-2 rounded-xl"
size="sm"
variant="outline"
>
<span>{t('common.cancel')}</span>
</Button>
</PopoverClose>
<PopoverClose asChild>
<Button
className="h-9 min-w-[100px] gap-2 rounded-xl"
size="sm"
type={'submit'}
>
<span>{t('common.save')}</span>
</Button>
</PopoverClose>
</div>
</form>
</Form>
</PopoverContent>
<TooltipContent>Chat Settings</TooltipContent>
</Tooltip>
</TooltipProvider>
</Popover>
</div>
);
}
export function CreateChatConfigActionBar({
Expand All @@ -365,37 +374,88 @@ export function CreateChatConfigActionBar({
form: UseFormReturn<ChatConfigFormSchemaType>;
}) {
return (
<Popover>
<TooltipProvider delayDuration={0}>
<Tooltip>
<PopoverTrigger asChild>
<TooltipTrigger asChild>
<button className={actionButtonClassnames} type="button">
<Settings2 className="h-full w-full" />
</button>
</TooltipTrigger>
</PopoverTrigger>
<PopoverContent
align="end"
className="min-w-[380px] bg-gray-300 px-6 py-7 text-xs"
side="top"
>
<h2 className="leading-1 text-gray-80 mb-5 text-xs uppercase">
Chat Settings
</h2>
<div className="flex items-center gap-2">
<ToolsDisabledAlert streamActive={form.watch('stream')} />
<Popover>
<TooltipProvider delayDuration={0}>
<Tooltip>
<PopoverTrigger asChild>
<TooltipTrigger asChild>
<button className={actionButtonClassnames} type="button">
<Settings2 className="h-full w-full" />
</button>
</TooltipTrigger>
</PopoverTrigger>
<PopoverContent
align="end"
className="min-w-[380px] bg-gray-300 px-6 py-7 text-xs"
side="top"
>
<h2 className="leading-1 text-gray-80 mb-5 text-xs uppercase">
Chat Settings
</h2>

<Form {...form}>
<form
className="flex w-full flex-col justify-between gap-10 overflow-hidden"
// onSubmit={form.handleSubmit(onSubmit)}
>
<ChatConfigForm form={form} />
</form>
</Form>
</PopoverContent>
<TooltipContent>Chat Settings</TooltipContent>
</Tooltip>
</TooltipProvider>
</Popover>
<Form {...form}>
<form
className="flex w-full flex-col justify-between gap-10 overflow-hidden"
// onSubmit={form.handleSubmit(onSubmit)}
>
<ChatConfigForm form={form} />
</form>
</Form>
</PopoverContent>
<TooltipContent>Chat Settings</TooltipContent>
</Tooltip>
</TooltipProvider>
</Popover>
</div>
);
}

const useSelectedAIModel = () => {
const defaultAgentId = useSettings((state) => state.defaultAgentId);
const auth = useAuth((state) => state.auth);

const { llmProviders } = useGetLLMProviders({
nodeAddress: auth?.node_address ?? '',
token: auth?.api_v2_key ?? '',
});
const selectedProvider = llmProviders?.find(
(provider) => provider.id === defaultAgentId,
);
return selectedProvider;
};

const ToolsDisabledAlert = ({ streamActive }: { streamActive?: boolean }) => {
const selectedAIModel = useSelectedAIModel();

const isOllamaProvider =
selectedAIModel?.model?.split(':')?.[0] === 'ollama' && streamActive;

return isOllamaProvider ? (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Alert
className={cn(
'cursor-pointer [&>svg]:static [&>svg~*]:pl-0',
'flex w-full items-center gap-2 rounded-lg px-3 py-1.5',
)}
variant="info"
>
<InfoCircleIcon className="h-3.5 w-3.5 shrink-0" />
<span className="whitespace-nowrap text-xs">Tools disabled</span>
</Alert>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>
Turn off streaming in chat config to allow tool usage (Ollama
limitation).
</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
) : null;
};
62 changes: 4 additions & 58 deletions apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import { useGetChatConversationWithPagination } from '@shinkai_network/shinkai-n
import { useGetLLMProviders } from '@shinkai_network/shinkai-node-state/v2/queries/getLLMProviders/useGetLLMProviders';
import { useGetWorkflowSearch } from '@shinkai_network/shinkai-node-state/v2/queries/getWorkflowSearch/useGetWorkflowSearch';
import {
Alert,
Button,
ChatInputArea,
Form,
Expand All @@ -56,7 +55,6 @@ import { cn } from '@shinkai_network/shinkai-ui/utils';
import { partial } from 'filesize';
import { AnimatePresence, motion } from 'framer-motion';
import { Paperclip, SendIcon, X, XIcon } from 'lucide-react';
import { InfoCircleIcon } from 'primereact/icons/infocircle';
import { useEffect, useMemo, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import { useForm, useWatch } from 'react-hook-form';
Expand Down Expand Up @@ -84,7 +82,7 @@ import { streamingSupportedModels } from './constants';
import { useSetJobScope } from './context/set-job-scope-context';

export const actionButtonClassnames =
'bg-gray-350 inline-flex h-[30px] w-[30px] cursor-pointer items-center justify-center gap-1.5 truncate border border-gray-200 px-[7px] py-1.5 text-left text-xs rounded-lg font-normal text-gray-50 hover:bg-gray-300 hover:text-white';
'shrink-0 bg-gray-350 inline-flex h-[30px] w-[30px] cursor-pointer items-center justify-center gap-1.5 truncate border border-gray-200 px-[7px] py-1.5 text-left text-xs rounded-lg font-normal text-gray-50 hover:bg-gray-300 hover:text-white';
export type ChatConversationLocationState = {
files: File[];
agentName: string;
Expand Down Expand Up @@ -385,10 +383,7 @@ function ConversationEmptyFooter() {
<PromptSelectionActionBar />
<WorkflowSelectionActionBar />
</div>
<div className="flex items-center gap-2">
<ToolsDisabledAlert />
<CreateChatConfigActionBar form={chatConfigForm} />
</div>
<CreateChatConfigActionBar form={chatConfigForm} />
</div>

<ChatInputArea
Expand Down Expand Up @@ -777,10 +772,8 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
<PromptSelectionActionBar />
<WorkflowSelectionActionBar />
</div>
<div className="flex items-center gap-2">
<ToolsDisabledAlert />
<UpdateChatConfigActionBar />
</div>

<UpdateChatConfigActionBar />
</div>

<ChatInputArea
Expand Down Expand Up @@ -1033,50 +1026,3 @@ function useFirstMessageWorkflow() {

return firstMessageWorkflow;
}

const useSelectedAIModel = () => {
const defaultAgentId = useSettings((state) => state.defaultAgentId);
const auth = useAuth((state) => state.auth);

const { llmProviders } = useGetLLMProviders({
nodeAddress: auth?.node_address ?? '',
token: auth?.api_v2_key ?? '',
});
const selectedProvider = llmProviders?.find(
(provider) => provider.id === defaultAgentId,
);
return selectedProvider;
};

const ToolsDisabledAlert = () => {
const selectedAIModel = useSelectedAIModel();

const isOllamaProvider = selectedAIModel?.model?.split(':')?.[0] === 'ollama';

return isOllamaProvider ? (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Alert
className={cn(
'cursor-pointer [&>svg]:static [&>svg~*]:pl-0',
'flex w-full items-center gap-2 rounded-lg px-3 py-1.5',
)}
variant="info"
>
<InfoCircleIcon className="h-3.5 w-3.5 shrink-0" />
<span className="whitespace-nowrap text-xs">Tools disabled</span>
</Alert>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>
Turn off streaming in chat config to allow tool usage (Ollama
limitation).
</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
) : null;
};
Loading

0 comments on commit 7f6081e

Please sign in to comment.