Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

会話一覧の最新化 #59

Merged
merged 1 commit into from
Sep 4, 2023
Merged

会話一覧の最新化 #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ const items = [
},
];

const getLabelByPath = (path: string) => {
const getLabelByPath = (_path: string) => {
// MEMO: /chat/:chatId の path の場合に件名が表示されないため、以下の実装としている
const path = '/' + _path.split('/')[1];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これそうなんすよねぇ〜自分も気になってました。タイトルが出せると良いのにと。Issue 化しておきます！

return items.find((i) => i.to === path)?.label || '';
};

Expand Down
18 changes: 14 additions & 4 deletions packages/web/src/hooks/useChat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@ import {
UnrecordedMessage,
ToBeRecordedMessage,
Chat,
ListChatsResponse,
} from 'generative-ai-use-cases-jp';
import { useEffect, useMemo } from 'react';
import { v4 as uuid } from 'uuid';
import useChatApi from './useChatApi';
import useConversation from './useConversation';
import { KeyedMutator } from 'swr';

const useChatState = create<{
chats: {
Expand All @@ -28,7 +31,11 @@ const useChatState = create<{
chat: Chat
) => void;
clear: (id: string, systemContext: string) => void;
post: (id: string, content: string) => void;
post: (
id: string,
content: string,
mutateListChat: KeyedMutator<ListChatsResponse>
) => void;
Comment on lines +34 to +38
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ZsutandとSWRの相性問題があり、Zsutandの中でSWRを実行するとエラーになってしまうので、Mutate関数を渡す実装にしました。

}>((set, get) => {
const { createChat, createMessages, predictStream, predictTitle } =
useChatApi();
Expand Down Expand Up @@ -172,7 +179,7 @@ const useChatState = create<{
clear: (id: string, systemContext: string) => {
initChat(id, [{ role: 'system', content: systemContext }], undefined);
},
post: async (id: string, content: string) => {
post: async (id: string, content: string, mutateListChat) => {
setLoading(id, true);

const unrecordedUserMessage: UnrecordedMessage = {
Expand Down Expand Up @@ -229,7 +236,9 @@ const useChatState = create<{

// タイトルが空文字列だった場合、タイトルを予測して設定
if (get().chats[id].chat?.title === '') {
updateTitle(id);
updateTitle(id).then(() => {
mutateListChat();
});
}

const toBeRecordedMessages = addMessageIdsToUnrecordedMessages(id);
Expand All @@ -249,6 +258,7 @@ const useChat = (id: string, systemContext?: string, chatId?: string) => {
useChatApi().listMessages(chatId);
const { data: chatData, isLoading: isLoadingChat } =
useChatApi().findChatById(chatId);
const { mutate: mutateConversations } = useConversation();

useEffect(() => {
// 新規チャットの場合
Expand Down Expand Up @@ -277,7 +287,7 @@ const useChat = (id: string, systemContext?: string, chatId?: string) => {
messages: filteredMessages,
isEmpty: filteredMessages.length === 0,
postChat: (content: string) => {
post(id, content);
post(id, content, mutateConversations);
},
};
};
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/hooks/useConversation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import useChatApi from './useChatApi';

const useConversation = () => {
const { listChats } = useChatApi();
const { data, isLoading } = listChats();
const { data, isLoading, mutate } = listChats();

return {
loading: isLoading,
conversations: data ? data.chats : [],
mutate,
};
};

Expand Down
19 changes: 13 additions & 6 deletions packages/web/src/pages/PromptTamplatePageBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useCallback, useEffect } from 'react';
import { BaseProps } from '../@types/common';
import useChat from '../hooks/useChat';
import Card from '../components/Card';
import { PiDotsThree } from 'react-icons/pi';
import Markdown from '../components/Markdown';
import InputChatContent from '../components/InputChatContent';
import ButtonCopy from '../components/ButtonCopy';
Expand Down Expand Up @@ -109,13 +108,21 @@ const PromptTamplatePageBase: React.FC<Props> = (props) => {
</div>
) : (
<>
<Markdown>{message.content}</Markdown>
<Markdown>
{message.content +
`${
loading &&
idx === messages.length - 1 &&
messages[idx].content !== ''
? '▍'
: ''
}`}
</Markdown>
{loading &&
message.role === 'assistant' &&
idx === messages.length - 1 && (
<div className="animate-pulse text-2xl text-gray-700">
<PiDotsThree />
</div>
idx === messages.length - 1 &&
messages[idx].content === '' && (
<div className="animate-pulse text-gray-700">▍</div>
Comment on lines +111 to +125
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Loading表示の修正を入れ忘れていたので、こちらも修正しました。

)}
<div className="flex justify-end">
<ButtonCopy
Expand Down