外部連携モード（WebSocket）のメンテナンス

locales/en/translation.json

@@ -63,7 +63,6 @@
  "ConversationHistoryReset": "Reset Conversation History",
  "NotConnectedToExternalAssistant": "Not connected to an external assistant.",
  "APIKeyNotEntered": "API key is not entered.",
- "CodeLog": "Code Log",
  "ChatLog": "Conversation Log",
  "EnterYourQuestion": "Enter your question here",
  "AnswerGenerating": "Answer Generating",

locales/ja/translation.json

@@ -64,7 +64,6 @@
  "ConversationHistoryReset": "会話履歴リセット",
  "NotConnectedToExternalAssistant": "外部アシスタントと接続されていません。",
  "APIKeyNotEntered": "APIキーが入力されていません。",
- "CodeLog": "コードログ",
  "ChatLog": "会話ログ",
  "EnterYourQuestion": "聞きたいことをいれてね",
  "AnswerGenerating": "回答生成中",

locales/ko/translation.json

@@ -63,7 +63,6 @@
  "ConversationHistoryReset": "대화 기록 재설정",
  "NotConnectedToExternalAssistant": "외부 어시스턴트와 연결되지 않았습니다.",
  "APIKeyNotEntered": "API 키가 입력되지 않았습니다.",
- "CodeLog": "코드 로그",
  "ChatLog": "대화 로그",
  "EnterYourQuestion": "질문을 입력하세요",
  "AnswerGenerating": "답변 생성중",

locales/zh/translation.json

@@ -63,7 +63,6 @@
  "ConversationHistoryReset": "重設聊天記錄",
  "NotConnectedToExternalAssistant": "未連接外部助理。",
  "APIKeyNotEntered": "尚未輸入 API 金鑰。",
- "CodeLog": "程式碼日誌",
  "ChatLog": "聊天記錄",
  "EnterYourQuestion": "在此輸入您的問題",
  "AnswerGenerating": "正在生成回答",

src/components/chatLog.tsx

@@ -28,20 +28,27 @@ export const ChatLog = () => {
  <div className="absolute w-col-span-7 max-w-full h-[100svh] pb-64 z-10">
  <div className="max-h-full px-16 pt-104 pb-64 overflow-y-auto scroll-hidden">
  {messages.map((msg, i) => {
+ const prevRole = i > 0 ? messages[i - 1].role : ''
+ const nextRole = i < messages.length - 1 ? messages[i + 1].role : ''
+
  return (
  <div key={i} ref={messages.length - 1 === i ? chatScrollRef : null}>
  {typeof msg.content === 'string' ? (
  <Chat
  role={msg.role}
  message={msg.content}
  characterName={characterName}
+ prevRole={prevRole}
+ nextRole={nextRole}
  />
  ) : (
  <>
  <Chat
  role={msg.role}
  message={msg.content[0].text}
  characterName={characterName}
+ prevRole={prevRole}
+ nextRole={nextRole}
  />
  <ChatImage
  role={msg.role}
@@ -62,36 +69,62 @@ const Chat = ({
  role,
  message,
  characterName,
+ prevRole,
+ nextRole,
 }: {
  role: string
  message: string
  characterName: string
+ prevRole: string
+ nextRole: string
 }) => {
  const roleColor =
- role !== 'user' ? 'bg-secondary text-white ' : 'bg-base text-primary'
+ role !== 'user' ? 'bg-secondary text-white' : 'bg-base text-primary'
  const roleText = role !== 'user' ? 'text-secondary' : 'text-primary'
  const offsetX = role === 'user' ? 'pl-40' : 'pr-40'
 
- return (
- <div className={`mx-auto max-w-[32rem] my-16 ${offsetX}`}>
- {role === 'code' ? (
- <pre className="whitespace-pre-wrap break-words bg-[#1F2937] text-white p-16 rounded-8">
- <code className="font-mono text-sm">{message}</code>
- </pre>
- ) : (
- <>
- <div
- className={`px-24 py-8 rounded-t-8 font-bold tracking-wider ${roleColor}`}
- >
- {role !== 'user' ? characterName || 'CHARACTER' : 'YOU'}
- </div>
- <div className="px-24 py-16 bg-white rounded-b-8">
- <div className={`typography-16 font-bold ${roleText}`}>
- {message}
+ const sameAsPrevRole = role === prevRole
+ const sameAsNextRole = role === nextRole
+
+ if (role === 'code') {
+ const messageLines = message.split('\n\n')
+ return (
+ <div
+ className={`mx-auto max-w-[32rem] ${!sameAsNextRole && 'mb-16'} ${offsetX}`}
+ >
+ <div
+ className={`px-24 ${!sameAsPrevRole && 'pt-16 rounded-t-8'} ${!sameAsNextRole && 'rounded-b-8 pb-16'} bg-[#1F2937] text-white`}
+ >
+ {messageLines.map((line, index) => (
+ <div
+ key={index}
+ className="typography-16 font-bold font-mono"
+ style={{ whiteSpace: 'pre-wrap', minHeight: '1em' }}
+ >
+ {line}
  </div>
- </div>
- </>
+ ))}
+ </div>
+ </div>
+ )
+ }
+
+ return (
+ <div
+ className={`mx-auto max-w-[32rem] ${!sameAsNextRole && 'mb-16'} ${offsetX}`}
+ >
+ {!sameAsPrevRole && (
+ <div
+ className={`px-24 py-8 rounded-t-8 font-bold tracking-wider ${roleColor}`}
+ >
+ {role !== 'user' ? characterName || 'CHARACTER' : 'YOU'}
+ </div>
  )}
+ <div
+ className={`px-24 py-16 bg-white ${sameAsNextRole ? '' : 'rounded-b-8'}`}
+ >
+ <div className={`typography-16 font-bold ${roleText}`}>{message}</div>
+ </div>
  </div>
  )
 }

src/components/form.tsx

@@ -5,7 +5,10 @@ import settingsStore from '@/features/stores/settings'
 import homeStore from '@/features/stores/home'
 import menuStore from '@/features/stores/menu'
 import slideStore from '@/features/stores/slide'
-import { handleSendChatFn } from '../features/chat/handlers'
+import {
+ handleSendChatFn,
+ handleReceiveTextFromWsFn,
+} from '../features/chat/handlers'
 import { MessageInputContainer } from './messageInputContainer'
 import useWebSocket from './useWebSocket'
 import useYoutube from './useYoutube'
@@ -26,9 +29,10 @@ export const Form = () => {
  NotConnectedToExternalAssistant: t('NotConnectedToExternalAssistant'),
  APIKeyNotEntered: t('APIKeyNotEntered'),
  })
+ const handleReceiveTextFromWs = handleReceiveTextFromWsFn()
 
  useYoutube({ handleSendChat })
- useWebSocket({ handleSendChat })
+ useWebSocket({ handleReceiveTextFromWs })
 
  useEffect(() => {
  // テキストと画像がそろったら、チャットを送信

src/components/menu.tsx

@@ -7,7 +7,6 @@ import settingsStore from '@/features/stores/settings'
 import slideStore from '@/features/stores/slide'
 import { AssistantText } from './assistantText'
 import { ChatLog } from './chatLog'
-import { CodeLog } from './codeLog'
 import { IconButton } from './iconButton'
 import Settings from './settings'
 import { Webcam } from './webcam'
@@ -118,14 +117,14 @@ export const Menu = () => {
  {showChatLog ? (
  <IconButton
  iconName="24/CommentOutline"
- label={webSocketMode ? t('CodeLog') : t('ChatLog')}
+ label={t('ChatLog')}
  isProcessing={false}
  onClick={() => setShowChatLog(false)}
  />
  ) : (
  <IconButton
  iconName="24/CommentFill"
- label={webSocketMode ? t('CodeLog') : t('ChatLog')}
+ label={t('ChatLog')}
  isProcessing={false}
  disabled={chatLog.length <= 0}
  onClick={() => setShowChatLog(true)}
@@ -208,7 +207,7 @@ export const Menu = () => {
  <div className="relative">
  {slideMode && slideVisible && <Slides markdown={markdownContent} />}
  </div>
- {webSocketMode ? showChatLog && <CodeLog /> : showChatLog && <ChatLog />}
+ {webSocketMode ? showChatLog && <ChatLog /> : showChatLog && <ChatLog />}
  {showSettings && <Settings onClickClose={() => setShowSettings(false)} />}
  {!showChatLog && assistantMessage && !slideVisible && (
  <AssistantText message={assistantMessage} />

src/components/settings/log.tsx

@@ -24,7 +24,7 @@ const Log = () => {
  </div>
  <TextButton
  onClick={() => {
- homeStore.setState({ chatLog: [], codeLog: [] })
+ homeStore.setState({ chatLog: [] })
  settingsStore.setState({ difyConversationId: '' })
  }}
  >
@@ -51,7 +51,6 @@ const Log = () => {
  value={value.content}
  onChange={(e) => {
  handleChangeChatLog(index, e.target.value)
- handleChangeCodeLog(index, e.target.value)
  }}
  ></input>
  ) : (
@@ -81,13 +80,3 @@ const handleChangeChatLog = (targetIndex: number, text: string) => {
 
  homeStore.setState({ chatLog: newChatLog })
 }
-
-const handleChangeCodeLog = (targetIndex: number, text: string) => {
- const hs = homeStore.getState()
-
- const newCodeLog = hs.codeLog.map((m, i) => {
- return i === targetIndex ? { role: m.role, content: text } : m
- })
-
- homeStore.setState({ chatLog: newCodeLog })
-}