内部专用AI助手（Chrome边栏扩展）-AI Chatbot Side Panel

这是一个基于Chrome浏览器的AI聊天扩展程序，名为"AI Chatbot Extension"。该扩展使用Chrome的侧边栏功能提供一个现代化的聊天界面，允许用户与基于Azure OpenAI API的GPT-4o模型进行交互。
此扩展以聊天对话的形式，为用户提供了一个便捷的工作方式，可以在浏览工作网页的同时随时访问强大的AI助手，特别适合需要频繁使用AI服务进行特定内容查询、生成或图像分析的日常工作场景。
（此项目为企业内部定制项目，服务于企业内部的已授权团队成员。）
- 智能对话：通过Azure OpenAI的GPT-4o模型提供自然、流畅的对话体验，支持上下文记忆，使对话更加连贯。
- 图像分析：用户可以直接粘贴图片到聊天界面，AI能够识别并分析图片内容，特别适合UI设计审查和图像内容识别。
- Markdown渲染：AI回复支持完整的Markdown格式，包括文本样式、列表、表格等，使回复内容更加结构化和易读。
- 代码块优化：自动识别代码片段并提供语法高亮显示，配备便捷的复制按钮，支持一键复制代码。
- 历史记录管理：可配置的聊天历史记录系统，用户可自定义保存的历史记录数量和上下文大小，平衡记忆能力与性能需求。
- 个性化配置：提供直观的设置界面，允许用户自定义API密钥、历史记录设置等参数。
- 时间感知：根据当前时间自动生成相应的问候语，增强用户体验的个性化。
- 图像预览与放大：支持图片预览功能，点击可放大查看图片细节，提升用户查看体验。
此扩展完美实现了现代化UI设计和强大的AI聊天机器人功能，为用户提供了一个随时可用的智能助手，为企业内部日常工作的查询和引导提供即时支持。

本项目采用模块化架构实现，主要包含以下关键组件：
- UI界面实现：通过HTML、CSS构建现代化聊天界面，利用CSS Flexbox和Grid实现响应式布局，确保在Chrome侧边栏中的良好显示效果。界面包括聊天消息区、输入框、配置模态框等组件。
- DOM操作与事件处理：使用原生JavaScript进行DOM操作，通过事件委托模式处理用户交互，包括消息发送、图片粘贴和配置更改等操作。
- AI通信模块：通过Fetch API实现与Azure OpenAI服务的通信，构建请求头部和消息格式，处理响应数据并展示在界面中。支持文本和图像的多模态交互。
- 存储管理：利用Chrome Storage API实现配置和聊天历史的持久化存储，区分sync和local存储类型，确保用户数据的安全性和可访问性。
- Markdown渲染：集成Marked.js库处理AI回复中的Markdown格式，增强了文本展示的丰富度，特别是对代码块的处理添加了复制功能和语法高亮。
- 图像处理：使用FileReader API和Data URL实现图像的粘贴、预览和发送功能，支持点击放大查看细节。
- 日志系统：自定义Logger模块记录应用运行状态，便于调试和问题排查，支持不同级别的日志记录。
- Chrome扩展集成：遵循Manifest V3规范开发，利用后台服务、内容脚本和侧边栏API实现浏览器扩展功能，确保与Chrome浏览器的无缝集成。
整体实现采用了现代JavaScript特性和最佳实践，确保代码的可维护性和性能表现。