♻️ refractor design rules

Author: farleyrunkel

CMakeLists.txt

@@ -11,10 +11,10 @@ set(CMAKE_CXX_STANDARD_REQUIRED ON)
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Widgets)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Widgets Network)
 
-# 包含 src 目录及其所有子目录
+# Include the src directory and all its subdirectories
 set(SRC_DIR "${CMAKE_SOURCE_DIR}/src")
 
-# 查找 src 目录下的所有直接子目录
+# Find all direct subdirectories under the src directory
 file(GLOB SUBDIRS RELATIVE ${SRC_DIR} ${SRC_DIR}/*)
 foreach(subdir ${SUBDIRS})
     if(IS_DIRECTORY ${SRC_DIR}/${subdir})
@@ -26,55 +26,50 @@ include_directories("external/json/include")
 include_directories("external/asio/asio/include")
 include_directories("external/ollama/include")
 
-# 设置主文件
+# Set the main file
 if(APPLE)
-    # 设置 macOS 上的应用图标
+    # Set the application icon on macOS
     set(MACOSX_BUNDLE_ICON_FILE icon.icns)
     set(app_icon_macos ${CMAKE_SOURCE_DIR}/resources/icon.icns)
-    # 输出图标路径以便调试
+    # Output icon path for debugging
     message(STATUS "Icon file path: ${app_icon_macos}")
 
-    # 确保图标文件路径正确
+    # Ensure the icon file path is correct
     if(NOT EXISTS ${app_icon_macos})
         message(FATAL_ERROR "Icon file not found: ${app_icon_macos}")
     else()
         message(STATUS "Icon file found: ${app_icon_macos}")
     endif()
-    
+
     set_source_files_properties(${app_icon_macos} PROPERTIES MACOSX_PACKAGE_LOCATION "Resources")
-    
-    # 设置 Info.plist 文件
+
+    # Set the Info.plist file
     set(MACOSX_BUNDLE_INFO_PLIST ${CMAKE_SOURCE_DIR}/resources/Info.plist)
 
     set(PROJECT_MAIN_FILE "src/main.mm")
 else()
     set(PROJECT_MAIN_FILE "src/main.cpp")
 endif()
 
-
-# 查找 src 目录下所有子目录中的所有源文件和头文件
+# Find all source and header files in all subdirectories under the src directory
 file(GLOB_RECURSE PROJECT_SOURCES
     "${SRC_DIR}/*/*.cpp"
     "${SRC_DIR}/*/*.h"
 )
 
-# 将主文件添加到 PROJECT_SOURCES
+# Add the main file to PROJECT_SOURCES
 list(APPEND PROJECT_SOURCES ${PROJECT_MAIN_FILE})
 
 if(APPLE)
     list(APPEND PROJECT_SOURCES ${app_icon_macos})
 endif()
 
-# 创建可执行文件
+# Create the executable
 if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
     qt_add_executable(qollama
         MANUAL_FINALIZATION
         ${PROJECT_SOURCES}
         resources/resources.qrc
-        src/objects/initializer.h src/objects/initializer.cpp
-        src/container/iscrollarea.h src/container/iscrollarea.cpp
-        src/buttons/ioverlaybutton.cpp
-        src/display/imessagebox.h src/display/imessagebox.cpp
     )
 else()
     if(ANDROID)
@@ -88,14 +83,14 @@ else()
     endif()
 endif()
 
-# 只在 Windows 上链接 ws2_32 库
+# Link ws2_32 library only on Windows
 if(WIN32)
     target_link_libraries(qollama PRIVATE Qt${QT_VERSION_MAJOR}::Widgets Qt${QT_VERSION_MAJOR}::Network ws2_32)
 else()
     target_link_libraries(qollama PRIVATE Qt${QT_VERSION_MAJOR}::Widgets Qt${QT_VERSION_MAJOR}::Network)
 endif()
 
-# 设置 macOS 下的一些属性
+# Set some properties on macOS
 if(${QT_VERSION} VERSION_LESS 6.1.0)
     set(BUNDLE_ID_OPTION MACOSX_BUNDLE_GUI_IDENTIFIER com.example.qollama)
 endif()
@@ -108,14 +103,11 @@ set_target_properties(qollama PROPERTIES
     WIN32_EXECUTABLE TRUE
 )
 
-
-
 if(APPLE)
     install(FILES ${app_icon_macos} DESTINATION ${CMAKE_INSTALL_PREFIX}/Contents/Resources)
     install(FILES ${MACOSX_BUNDLE_INFO_PLIST} DESTINATION ${CMAKE_INSTALL_PREFIX}/Contents)
 endif()
 
-
 include(GNUInstallDirs)
 install(TARGETS qollama
     BUNDLE DESTINATION .

design/README.md

@@ -1,41 +1,112 @@
+### UI Design Guidelines
 
-使用84, 210, 99 (一种亮绿色)作为主题色，你可以生成一组和谐的颜色，用于UI设计。这组颜色包括主色、浅色、深色、背景色、边框色和一些对比色。
+#### Color Palette
+- **Primary Color**:
+  - Bright Green: `#54D263` (84, 210, 99)
 
-以下是一个颜色盘：
+- **Light Shades**:
+  - Very Light Green: `#E7F8E9` (231, 248, 233)
+  - Light Green: `#A6E6B3` (166, 230, 179)
+  - Pale Green: `#78D999` (120, 217, 153)
 
-### 主题色 (Primary Color)
-- 亮绿色: `#54D263` (84, 210, 99)
+- **Dark Shades**:
+  - Dark Green: `#42A352` (66, 163, 82)
+  - Deeper Green: `#2D7B3C` (45, 123, 60)
+  - Deep Forest Green: `#1C562B` (28, 86, 43)
 
-### 浅色 (Light Shades)
-- 非常浅的绿色: `#E7F8E9` (231, 248, 233)
-- 浅绿色: `#A6E6B3` (166, 230, 179)
-- 淡绿色: `#78D999` (120, 217, 153)
+- **Contrast Colors**:
+  - Bright Orange: `#FFA726` (255, 167, 38)
+  - Bright Yellow: `#FFEB3B` (255, 235, 59)
+  - Bright Blue: `#29B6F6` (41, 182, 246)
 
-### 深色 (Dark Shades)
-- 深绿色: `#42A352` (66, 163, 82)
-- 更深的绿色: `#2D7B3C` (45, 123, 60)
-- 深森林绿: `#1C562B` (28, 86, 43)
+- **Neutral Colors**:
+  - White: `#FFFFFF` (255, 255, 255)
+  - Light Gray: `#F0F0F0` (240, 240, 240)
+  - Gray: `#BDBDBD` (189, 189, 189)
+  - Dark Gray: `#757575` (117, 117, 117)
+  - Black: `#212121` (33, 33, 33)
 
-### 对比色 (Contrast Colors)
-- 亮橙色: `#FFA726` (255, 167, 38)
-- 亮黄色: `#FFEB3B` (255, 235, 59)
-- 亮蓝色: `#29B6F6` (41, 182, 246)
+- **Background Colors**:
+  - Light Background: `#F5F5F5` (245, 245, 245)
+  - Neutral Background: `#E0E0E0` (224, 224, 224)
+  - Dark Background: `#BDBDBD` (189, 189, 189)
 
-### 中性色 (Neutral Colors)
-- 白色: `#FFFFFF` (255, 255, 255)
-- 淡灰色: `#F0F0F0` (240, 240, 240)
-- 灰色: `#BDBDBD` (189, 189, 189)
-- 深灰色: `#757575` (117, 117, 117)
-- 黑色: `#212121` (33, 33, 33)
+- **Border Colors**:
+  - Light Border: `#E0E0E0` (224, 224, 224)
+  - Neutral Border: `#9E9E9E` (158, 158, 158)
+  - Dark Border: `#616161` (97, 97, 97)
 
-### 背景色 (Background Colors)
-- 浅背景色: `#F5F5F5` (245, 245, 245)
-- 中性背景色: `#E0E0E0` (224, 224, 224)
-- 深背景色: `#BDBDBD` (189, 189, 189)
+#### Typography
+- **Font Family**:
+  - Use a legible and scalable font family such as Roboto, Open Sans, or Helvetica Neue for consistency across platforms.
 
-### 边框色 (Border Colors)
-- 浅边框色: `#E0E0E0` (224, 224, 224)
-- 中性边框色: `#9E9E9E` (158, 158, 158)
-- 深边框色: `#616161` (97, 97, 97)
+- **Font Sizes**:
+  - Headings: 24px - 32px
+  - Subheadings: 18px - 24px
+  - Body Text: 14px - 18px
+  - Button Text: 14px - 16px
 
-这些颜色搭配可以为你的UI设计提供多样性和和谐美。你可以根据不同的需求使用这些颜色来设计按钮、背景、文本和其他UI元素。
+- **Font Styles**:
+  - Use bold for headings and important text.
+  - Use italics or different font weights for emphasis.
+
+#### Layout
+- **Spacing**:
+  - Maintain consistent spacing between elements (padding and margins).
+  - Use grid systems or guidelines for alignment.
+
+- **Responsive Design**:
+  - Ensure the UI adapts to different screen sizes and orientations.
+  - Use media queries or adaptive layouts for responsiveness.
+
+- **Hierarchy**:
+  - Use visual hierarchy to guide user attention (size, color, contrast).
+  - Group related elements and use whitespace effectively.
+
+#### Interaction
+- **Buttons**:
+  - Use consistent button styles for primary actions (e.g., filled buttons for primary actions, outlined buttons for secondary actions).
+  - Provide visual feedback on button press (e.g., change in color, animation).
+
+- **Forms**:
+  - Use clear labels and placeholders for input fields.
+  - Validate input in real-time and provide helpful error messages.
+
+- **Navigation**:
+  - Use intuitive navigation patterns (e.g., top bar, side menu) for easy access to different sections.
+  - Highlight the current page or section in the navigation menu.
+
+#### Visuals
+- **Icons**:
+  - Use simple and recognizable icons for actions and navigation.
+  - Ensure icons are scalable and clear on different screen sizes.
+
+- **Images**:
+  - Optimize images for fast loading without compromising quality.
+  - Use images strategically to enhance content and visual appeal.
+
+- **Color Usage**:
+  - Maintain consistency in color usage throughout the UI.
+  - Use color sparingly for emphasis and visual hierarchy.
+
+#### Accessibility
+- **Contrast Ratio**:
+  - Ensure sufficient color contrast for readability (WCAG guidelines recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text).
+
+- **Keyboard Navigation**:
+  - Ensure all interactive elements are accessible via keyboard navigation.
+  - Use focus states to indicate keyboard focus.
+
+#### Branding
+- **Logo Usage**:
+  - Use the brand logo consistently and prominently.
+  - Ensure the logo is scalable and recognizable on different backgrounds.
+
+- **Color Palette**:
+  - Use the defined color palette for brand consistency.
+  - Avoid using colors that clash with the brand identity.
+
+#### Guidelines
+- **UI Style Guide**:
+  - Create and maintain a UI style guide for consistency in design elements, colors, typography, and interactions.
+  - Document UI patterns and best practices for reference by designers and developers.

src/container/IChatsScrollArea.cpp

@@ -0,0 +1,43 @@
+#include "ichatscrollarea.h"
+#include <QScrollBar>
+
+IChatScrollArea::IChatScrollArea(QWidget *parent)
+    : QScrollArea(parent), m_latestMessageWidget(nullptr),
+    m_chatContainer(new QWidget(this)) {
+    setupUI();
+}
+
+void IChatScrollArea::setupUI() {
+    setWidgetResizable(true);
+    setContentsMargins(0, 0, 0, 0);
+
+    QVBoxLayout *chatLayout = new QVBoxLayout(m_chatContainer);
+    chatLayout->setContentsMargins(40, 0, 40, 0);
+    chatLayout->setSpacing(0);
+    chatLayout->setAlignment(Qt::AlignTop);
+    m_chatContainer->setLayout(chatLayout);
+    m_chatContainer->setObjectName("chatContainer");
+    m_chatContainer->setStyleSheet("background-color:white;");
+    setWidget(m_chatContainer);
+}
+
+void IChatScrollArea::addMessage(const QString &message,
+                                 const QString &userName,
+                                 const QPixmap &avatar) {
+    IMessageBox *messageWidget =
+        new IMessageBox(userName, avatar.scaledToWidth(30), message, this);
+    m_chatContainer->layout()->addWidget(messageWidget);
+    m_latestMessageWidget = messageWidget;
+
+    QTimer::singleShot(0, this, &IChatScrollArea::scrollToBottom);
+}
+
+bool IChatScrollArea::isNew() const { return m_latestMessageWidget == nullptr; }
+
+IMessageBox *IChatScrollArea::getLatestMessageWidget() const {
+    return m_latestMessageWidget;
+}
+
+void IChatScrollArea::scrollToBottom() {
+    verticalScrollBar()->setValue(verticalScrollBar()->maximum());
+}