LLMの返答でコードブロックを受け取ったとき、```の右横のpythonみたいな文字列が会話履歴に表示されてしまう

Issue分析結果:

[
  {
    "file_path": "src/components/chatLog.tsx",
    "reason": "チャットログを表示するコンポーネントであり、コードブロックの表示にも関係している可能性が高いため"
  },
  {
    "file_path": "src/components/codeLog.tsx",
    "reason": "コードログを表示するコンポーネントであり、コードブロックの表示に直接関係している可能性が高いため"
  },
  {
    "file_path": "src/features/messages/messages.ts",
    "reason": "メッセージの処理や変換を行うファイルであり、コードブロックの処理に関係している可能性があるため"
  },
  {
    "file_path": "src/components/assistantText.tsx",
    "reason": "AIアシスタントのテキスト表示を担当するコンポーネントであり、コードブロックの表示にも影響を与える可能性があるため"
  },
  {
    "file_path": "src/pages/index.tsx",
    "reason": "アプリケーションのメインページであり、チャットログやコードログの表示を制御している可能性が高いため"
  },
  {
    "file_path": "src/features/chat/aiChatFactory.ts",
    "reason": "AIとのチャット機能を提供するファイルであり、AIの応答にコードブロックが含まれる可能性があるため"
  },
  {
    "file_path": "src/styles/globals.css",
    "reason": "グローバルなスタイル設定を行うファイルであり、コードブロックの表示スタイルに影響を与える可能性があるため"
  },
  {
    "file_path": "src/components/menu.tsx",
    "reason": "UIコンポーネントを提供するファイルであり、チャットログやコードログの表示に関連している可能性があるため"
  },
  {
    "file_path": "src/features/chat/openAiChat.ts",
    "reason": "OpenAI APIとの通信を行うファイルであり、AIの応答にコードブロックが含まれる可能性があるため"
  },
  {
    "file_path": "src/features/chat/anthropicChat.ts",
    "reason": "Anthropic APIとの通信を行うファイルであり、AIの応答にコードブロックが含まれる可能性があるため"
  }
]

コード改善案:

このIssueを解決するには、コードブロックの言語指定部分を削除する処理を追加する必要があります。主に src/components/chatLog.tsx と src/components/codeLog.tsx ファイルを修正します。

src/components/chatLog.tsx の修正:

const Chat = ({ role, message, characterName }: { role: string; message: string; characterName: string; }) => {
  const roleColor = 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.replace(/```(\w+)?\n/g, '').replace(/```$/g, '')}
          </code>
        </pre>
      ) : (
        // ... (残りのコードは変更なし)
      )}
    </div>
  );
};

src/components/codeLog.tsx の修正:

const Chat = ({ role, message, prevRole, nextRole }: { role: string; message: string; prevRole: string; nextRole: string; }) => {
  // ... (前半のコードは変更なし)

  if (role === "code") {
    // 改行文字でメッセージを分割
    const messageLines = message.split('\n\n');
    return (
      <div className={`mx-auto ${!same_as_next_role && 'mb-16'}`}>
        <div className={`px-24 ${!same_as_prev_role && 'pt-16 rounded-t-8'} ${bgColor} ${!same_as_next_role && 'rounded-b-8 pb-16'}`}>
        {messageLines.map((line, index) =>
          <div key={index} className={`typography-16 font-bold ${textColor}`} style={{ whiteSpace: 'pre-wrap', minHeight: '1em' }}>
            {line.replace(/```(\w+)?\n/g, '').replace(/```$/g, '')}
          </div>
        )}
        </div>
      </div>
    );
  } else if (role === "output" || role === "executing") {
    // ... (残りのコードは変更なし)
  }
};

これらの変更により、コードブロックの言語指定部分（python など）が削除されます。`replace(/(\w+)?\n/g, '')は開始タグを、replace(/``$/g, '') は終了タグを削除します。

これらの修正を適用することで、LLMの返答でコードブロックを受け取ったときに、```の右横のプログラミング言語を指定している部分が会話履歴に表示されなくなります。

tegnike / aituber-kit

LLMの返答でコードブロックを受け取ったとき、```の右横のpythonみたいな文字列が会話履歴に表示されてしまう #95

Issue分析結果:

コード改善案: