Spaces:

moelove
/

thinking-model-client

Runtime error

App Files Files Community

moelove commited on Apr 4

Commit

c1944cf

1 Parent(s): 03bd69e

PWA

Browse files

Signed-off-by: Jintao Zhang <zhangjintao9020@gmail.com>

Files changed (11) hide show

index.html +6 -2
public/icons/icon-192x192.png +1 -0
public/icons/icon-512x512.png +1 -0
public/icons/icon-512x512.svg +6 -0
public/manifest.json +59 -0
public/sw.js +71 -0
scripts/generate-icons.js +41 -0
src/App.jsx +21 -2
src/index.css +90 -0
src/main.jsx +5 -1
src/serviceWorkerRegistration.js +134 -0

index.html CHANGED Viewed

@@ -2,8 +2,12 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Thinking Model Client</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
@@ -12,4 +16,4 @@
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-</html>

 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>Thinking Model Client</title>
+    <meta name="description" content="A client for interacting with thinking models" />
+    <meta name="theme-color" content="#3e6ae1" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
+</html>

public/icons/icon-192x192.png ADDED Viewed

public/icons/icon-512x512.png ADDED Viewed

public/icons/icon-512x512.svg ADDED Viewed

public/manifest.json ADDED Viewed

	@@ -0,0 +1,59 @@

+{
+  "name": "Thinking Model Client",
+  "short_name": "Thinking Model",
+  "description": "A client for interacting with thinking models",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#3e6ae1",
+  "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

public/sw.js ADDED Viewed

	@@ -0,0 +1,71 @@

+// Service Worker for Thinking Model Client PWA
+const CACHE_NAME = 'thinking-model-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/icons/icon-192x192.png',
+  '/icons/icon-512x512.png'
+];
+// Install event - cache basic assets
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+// Activate event - clean up old caches
+self.addEventListener('activate', event => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+// Fetch event - serve from cache if available, otherwise fetch from network
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        return fetch(event.request).then(
+          response => {
+            // Check if we received a valid response
+            if (!response || response.status !== 200 || response.type !== 'basic') {
+              return response;
+            }
+            // Clone the response
+            const responseToCache = response.clone();
+            caches.open(CACHE_NAME)
+              .then(cache => {
+                // Don't cache API requests
+                if (!event.request.url.includes('/api/')) {
+                  cache.put(event.request, responseToCache);
+                }
+              });
+            return response;
+          }
+        );
+      })
+  );
+});

scripts/generate-icons.js ADDED Viewed

	@@ -0,0 +1,41 @@

+// This script can be used to generate different sized icons from the SVG source
+// You would need to install sharp: npm install sharp
+// Then run: node scripts/generate-icons.js
+const fs = require('fs');
+const path = require('path');
+const sharp = require('sharp');
+const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
+const svgPath = path.join(__dirname, '../public/icons/icon-512x512.svg');
+const outputDir = path.join(__dirname, '../public/icons');
+async function generateIcons() {
+  try {
+    // Make sure the output directory exists
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+    // Read the SVG file
+    const svgBuffer = fs.readFileSync(svgPath);
+    // Generate each size
+    for (const size of sizes) {
+      const outputPath = path.join(outputDir, `icon-${size}x${size}.png`);
+      await sharp(svgBuffer)
+        .resize(size, size)
+        .png()
+        .toFile(outputPath);
+      console.log(`Generated: ${outputPath}`);
+    }
+    console.log('All icons generated successfully!');
+  } catch (error) {
+    console.error('Error generating icons:', error);
+  }
+}
+generateIcons();

src/App.jsx CHANGED Viewed

@@ -32,6 +32,7 @@ function App() {
   const [showSettings, setShowSettings] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [showProfileDropdown, setShowProfileDropdown] = useState(false);
   const activeProfile = profiles.find(p => p.id === activeProfileId) || profiles[0];
@@ -58,6 +59,18 @@ function App() {
   const toggleSidebar = () => {
     setSidebarCollapsed(!sidebarCollapsed);
   };
   const toggleProfileDropdown = () => {
@@ -72,7 +85,13 @@ function App() {
   return (
     <div className="flex flex-col h-screen w-full overflow-hidden">
       <div className="flex justify-between items-center px-5 h-header border-b border-border bg-background">
-        <div className="flex items-center">
           <h1 className="text-xl font-semibold text-text">Thinking Model Client</h1>
         </div>
         <div className="flex items-center gap-2.5">
@@ -107,7 +126,7 @@ function App() {
       </div>
       <div className="flex flex-1 overflow-hidden">
-        <div className={`w-sidebar border-r border-border flex flex-col transition-[width] duration-300 ease-in-out bg-background ${sidebarCollapsed ? 'w-[50px] overflow-hidden' : ''}`}>
           <div className="flex justify-between items-center py-3 px-4 border-b border-border">
             <h2 className="text-sm font-semibold text-light-text m-0">Conversations</h2>
             <button

   const [showSettings, setShowSettings] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [showProfileDropdown, setShowProfileDropdown] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const activeProfile = profiles.find(p => p.id === activeProfileId) || profiles[0];
   const toggleSidebar = () => {
     setSidebarCollapsed(!sidebarCollapsed);
+    // 在移动设备上，如果侧边栏是展开的，点击收起按钮也应该关闭移动菜单
+    if (window.innerWidth <= 768 && !sidebarCollapsed) {
+      setMobileMenuOpen(false);
+    }
+  };
+  const toggleMobileMenu = () => {
+    setMobileMenuOpen(!mobileMenuOpen);
+    // 如果侧边栏是收起的，则展开它
+    if (sidebarCollapsed) {
+      setSidebarCollapsed(false);
+    }
   };
   const toggleProfileDropdown = () => {
   return (
     <div className="flex flex-col h-screen w-full overflow-hidden">
       <div className="flex justify-between items-center px-5 h-header border-b border-border bg-background">
+        <div className="flex items-center gap-2">
+          <button
+            className="md:hidden bg-transparent border-0 text-base text-lightest-text cursor-pointer flex items-center justify-center z-10 w-8 h-8 hover:text-text"
+            onClick={toggleMobileMenu}
+          >
+            ☰
+          </button>
           <h1 className="text-xl font-semibold text-text">Thinking Model Client</h1>
         </div>
         <div className="flex items-center gap-2.5">
       </div>
       <div className="flex flex-1 overflow-hidden">
+        <div className={`sidebar ${sidebarCollapsed ? 'collapsed' : ''} ${mobileMenuOpen ? 'mobile-open' : ''}`}>
           <div className="flex justify-between items-center py-3 px-4 border-b border-border">
             <h2 className="text-sm font-semibold text-light-text m-0">Conversations</h2>
             <button

src/index.css CHANGED Viewed

@@ -20,6 +20,10 @@
   --assistant-message-color: #1a1a1a;
   --hover-color: #f5f5f5;
   --active-color: #e6f2ff;
 }
 * {
@@ -549,3 +553,89 @@ body {
     @apply bg-gray-400;
   }
 }

   --assistant-message-color: #1a1a1a;
   --hover-color: #f5f5f5;
   --active-color: #e6f2ff;
+  /* Responsive sidebar width */
+  --mobile-sidebar-width: 100%;
+  --tablet-sidebar-width: 250px;
 }
 * {
     @apply bg-gray-400;
   }
 }
+/* Responsive styles */
+@media (max-width: 768px) {
+  .app-header {
+    padding: 0 1rem;
+  }
+  .app-title {
+    font-size: 1rem;
+  }
+  .sidebar {
+    position: fixed;
+    z-index: 50;
+    height: 100%;
+    width: 100%;
+    left: -100%;
+    transition: all 0.3s ease-in-out;
+  }
+  .sidebar.mobile-open {
+    left: 0;
+  }
+  /* 确保在移动设备上收起的侧边栏仍然可见 */
+  .sidebar.collapsed {
+    width: 50px;
+    left: 0;
+  }
+  .message-content {
+    max-width: 100%;
+  }
+  .settings-modal {
+    width: 95%;
+    max-height: 80vh;
+  }
+  .profiles-list {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .chat-input {
+    padding: 0.75rem;
+  }
+  .message-input {
+    font-size: 0.875rem;
+  }
+  .send-button {
+    padding: 0 1rem;
+  }
+}
+/* Small mobile devices */
+@media (max-width: 480px) {
+  .app-header {
+    height: 50px;
+  }
+  .right-section {
+    gap: 0.5rem;
+  }
+  .profile-dropdown-button,
+  .settings-button {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
+  .chat-messages {
+    padding: 0.75rem;
+  }
+  .message-content {
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+  .welcome-screen h2 {
+    font-size: 1.25rem;
+  }
+}

src/main.jsx CHANGED Viewed

@@ -3,9 +3,13 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './tailwind.css'
 import './index.css'
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)

 import App from './App'
 import './tailwind.css'
 import './index.css'
+import { register as registerServiceWorker } from './serviceWorkerRegistration'
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
+)
+// Register service worker for PWA functionality
+registerServiceWorker()

src/serviceWorkerRegistration.js ADDED Viewed

	@@ -0,0 +1,134 @@

+// This optional code is used to register a service worker.
+// register() is not called by default.
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+);
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(import.meta.env.BASE_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if BASE_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+    window.addEventListener('load', () => {
+      const swUrl = `${import.meta.env.BASE_URL}sw.js`;
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://cra.link/PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://cra.link/PWA.'
+              );
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log('No internet connection found. App is running in offline mode.');
+    });
+}
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  }
+}