Claude

请以JavaScript专家身份，帮我改良附件的chat web app，需求如下。 1. 目前每次对话都是一个新的开始，希望改成可以记住之前的对话内容。 2. 在输入贴上一段文字后只能显示在同一行，改成维持被复制文字的格式，可以在聊天容器多行显示。

我来帮你改进这个聊天应用。我们需要修改几个关键部分来实现这些功能。

主要改进包括：

对话历史记忆功能：

修改了API请求体结构，加入了历史对话内容
每次请求会包含最近的10条对话作为上下文
添加了历史记录指示器，显示是否在继续之前的对话

文本格式保持：

将input元素改为textarea，支持多行输入
添加了自动高度调整功能
设置了white-space: pre-wrap来保持文本格式
优化了消息显示样式，支持更好的换行和格式展示

其他改进：

优化了消息容器的样式，限制了最大宽度
改进了换行处理（Shift+Enter用于换行，Enter发送）
添加了textarea的最大高度限制和垂直调整功能

要使用这个改进版本，只需要替换原有的index.html文件即可。新版本会保持所有原有功能，同时提供更好的对话连续性和文本格式支持。

需要注意的是，由于使用了localStorage来存储对话历史，数据会持续保存在浏览器中，直到用户主动清除或使用清除对话功能。如果对话历史变得太大，你可能需要考虑定期清理或限制存储的数量。

要测试这些改进，你可以：

输入多行文本，检查格式是否保持
关闭并重新打开页面，查看对话历史是否正确加载
测试长对话，确认上下文是否正确维护

需要其他调整或有任何问题都可以继续询问。

请给我完整的代码。

我会给你一个完整的、包含所有功能的代码版本。

这个完整版本包含了所有改进：

对话历史记忆：

使用 localStorage 保存对话历史
每次加载时显

Claude’s response was limited as it hit the maximum length allowed at this time.

输入框的多行文字在显示视窗中似乎被强迫向右对齐，我希望能维持原先输入相对应的位置和空白，因为当我贴上一段python代码时尤其重要。

我明白你的需求。看来是消息显示的样式需要调整，让文本保持原有的格式和对齐方式。我会修改相关的 CSS 样式。

主要改进包括：

消息显示格式：

将用户消息改为左对齐（原来是右对齐）
使用等宽字体显示代码
保持原始的空白和缩进

代码块处理：

添加了代码块自动检测
为代码块添加特殊样式
保持代码的格式和缩进

输入区改进：

使用等宽字体
添加 Tab 键支持（插入 4 个空格）
保持空白字符和换行

其他改进：

添加了 HTML 转义功能，防止 XSS
改进了 marked 配置，更好地处理换行
优化了代码块的视觉样式

这些改变应该能让你的代码保持正确的格式和缩进。现在当你粘贴 Python 代码时：

缩进会被保持
空白行会被保留
代码会使用等宽字体显示
可以使用 Tab 键进行缩进

要测试这些改进，你可以：

粘贴一段带缩进的 Python 代码
检查显示是否保持了原有的格式
尝试使用 Tab 键添加缩进
验证长行是否正确换行

如果你发现还有任何格式问题，请告诉我，我可以进一步调整。

Claude can make mistakes.
Please double-check responses.

Complete Chat Web Application

<!DOCTYPE html>
<html>
<!-- 前面的 head 部分和其他样式保持不变 -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<title>PaLM</title>
  <style>
    /* ... 其他样式保持不变 ... */

    .user, .bot {
      margin-bottom: 5px;
      word-wrap: break-word;
      padding: 8px;
      border-radius: 5px;
      white-space: pre-wrap;
      max-width: 80%;
      font-family: monospace; /* 使用等宽字体以更好地显示代码 */
    }

    .user {
      background-color: #007bff;
      color: #fff;
      margin-left: auto;
      text-align: left; /* 改为左对齐 */
    }

    .bot {
      text-align: left;
      background-color: #f2f2f2;
      color: #333;
      margin-right: auto;
    }

    /* 添加代码块特殊样式 */
    .user pre, .bot pre {
      background-color: rgba(0, 0, 0, 0.1);
      padding: 8px;
      border-radius: 4px;
      margin: 4px 0;
      white-space: pre;
      overflow-x: auto;
    }

    .user pre {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .user code, .bot code {
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
      font-size: 0.9em;
    }

    /* 调整输入框样式 */
    #user-input {
      flex-grow: 1;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 3px;
      min-height: 20px;
      max-height: 150px;
      resize: vertical;
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace; /* 使用等宽字体 */
      font-size: inherit;
      line-height: 1.4;
      white-space: pre-wrap;
      margin-right: 10px;
      tab-size: 4; /* 设置 Tab 键宽度 */
    }

    /* ... 其他样式保持不变 ... */
  </style>
</head>
<!-- body 部分和 HTML 结构保持不变 -->
<body>
  <!-- ... HTML 结构保持不变 ... -->

  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    // ... 其他 JavaScript 代码保持不变 ...

    // 修改显示消息的函数，改进代码处理
    function displayMessage(message, sender, timestamp) {
      const messageElement = document.createElement('div');
      messageElement.classList.add(sender);
      
      if (sender === 'bot') {
        // 配置 marked 以保持换行
        marked.setOptions({
          breaks: true,
          gfm: true
        });
        message = marked.parse(message);
      } else {
        // 对用户消息进行特殊处理，检测并包装代码块
        message = formatUserMessage(message);
      }
      
      messageElement.innerHTML = message;
      chatContainer.appendChild(messageElement);

      const timestampElement = document.createElement('div');
      timestampElement.classList.add('timestamp');
      timestampElement.innerText = timestamp;
      chatContainer.appendChild(timestampElement);

      const lineElement = document.createElement('hr');
      chatContainer.appendChild(lineElement);

      chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    // 添加新函数：格式化用户消息
    function formatUserMessage(message) {
      // 检测是否包含代码块特征（多行缩进或特定语言结构）
      const hasCodeBlock = /\n\s{4}|\n\t|^def\s|^class\s|^import\s|^from\s.*import/.test(message);
      
      if (hasCodeBlock) {
        return `<pre><code>${escapeHtml(message)}</code></pre>`;
      }
      
      // 保持普通消息的换行和空格
      return escapeHtml(message);
    }

    // 添加新函数：HTML 转义
    function escapeHtml(text) {
      const div = document.createElement('div');
      div.textContent = text;
      return div.innerHTML;
    }

    // 改进文本区域处理
    userInput.addEventListener('keydown', function(event) {
      if (event.key === 'Tab') {
        event.preventDefault();
        const start = this.selectionStart;
        const end = this.selectionEnd;
        
        // 插入 4 个空格作为缩进
        this.value = this.value.substring(0, start) + '    ' + this.value.substring(end);
        
        // 将光标移动到插入后的位置
        this.selectionStart = this.selectionEnd = start + 4;
      }
    });

    // ... 其他 JavaScript 代码保持不变 ...
  </script>
</body>
</html>