ChatMateAppDev

Running

App Files Files Community

FrederickSundeep commited on Jul 1, 2025

Commit

c3a0082

1 Parent(s): cb9ad57

commit 0001

Browse files

Files changed (12) hide show

package-lock.json +0 -0
package.json +10 -1
public/index.html +1 -1
src/App.css +174 -26
src/App.js +4 -19
src/components/ChatApp.jsx +145 -0
src/components/CodeBlock.jsx +90 -0
src/components/MessageBubble.jsx +40 -0
src/components/ThemeProviderWrapper.jsx +33 -0
src/index.js +2 -0
src/styles/prism-lines.css +36 -0
src/utils/languageDetect.js +48 -0

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -1,12 +1,17 @@
 {
-  "name": "react-template",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
@@ -35,5 +40,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
   }
 }

 {
+  "name": "chat-mate",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6"
   }
 }

public/index.html CHANGED Viewed

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <title>ChatMate App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.css CHANGED Viewed

@@ -1,38 +1,186 @@
-.App {
-  text-align: center;
 }
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
 }
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
-.App-link {
-  color: #61dafb;
 }
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }

+/* App.css */
+.chat-container {
+  max-width: 800px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  color: #ffffff;
+  background: #2a2a2a;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
+body {
+  font-family: 'Roboto', sans-serif;
+  background: #121212;
+  color: #ffffff;
 }
+h2 {
+  color: #bb86fc;
+  margin-bottom: 20px;
+  font-weight: 500;
+}
+.header-area {
+   display: flex;
+  justify-content: center;
+   text-align: center;
+      background: #383838;
 }
+   .chat-box {
+      flex-grow: 1;
+      max-height: 420px;
+      overflow-y: auto;
+      padding: 12px;
+      border: 1px solid #2d2d2d;
+  border-radius: 8px;
+  background: #2a2a2a;
+      margin-bottom: 16px;
+      display: flex;
   flex-direction: column;
+    }
+.message {
+  display: block; /* ensures full-width layout */
+  width: fit-content;
+  max-width: 85%;
+  margin-bottom: 12px;
+  padding: 10px 14px;
+  border-radius: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
 }
+.message.user {
+  align-self: flex-end;
+  margin-left: auto;
+  background: #333c4d;
+  color: #e3f2fd;
+  border-bottom-right-radius: 0;
 }
+.message.assistant {
+  align-self: flex-start;
+  margin-right: auto;
+  background: #383838;
+  border-bottom-left-radius: 0;
 }
+.input-area {
+  display: flex;
+  padding: 10px;
+      background: #383838;
+}
+ textarea {
+      flex-grow: 1;
+      padding: 10px 12px;
+      resize: none;
+      border-radius: 6px;
+      background: #2a2a2a;
+      color: #fff;
+      border: 1px solid #444;
+      font-size: 14px;
+    }
+button {
+  margin-left: 10px;
+  padding: 8px 16px;
+}
+.timestamp {
+  font-size: 0.75em;
+  color: #888;
+  margin-top: 4px;
+}
+.formatted-text {
+  white-space: pre-wrap;
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+.language-label {
+  font-weight: bold;
+  font-size: 12px;
+  padding: 4px 0;
+}
+pre.line-numbers {
+  padding-left: 3.8em; /* ensure room for line numbers */
+}
+.code-block-wrapper pre {
+  background: #2d2d2d; /* override if needed */
+  padding: 1em;
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+.code-block-wrapper {
+  margin: 12px 0;
+  background-color: #2d2d2d;
+  border-radius: 8px;
+  overflow: auto;
+}
+ .typing-indicator {
+      display: flex;
+      gap: 6px;
+      margin: 6px 0 12px;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      background-color: #bb86fc;
+      border-radius: 50%;
+      animation: blink 1.4s infinite both;
+    }
+    .dot:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+    .dot:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+    @keyframes blink {
+      0%, 80%, 100% { opacity: 0.2; }
+      40% { opacity: 1; }
+    }
+    /* Base style — minimal/invisible scrollbar */
+* {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: transparent transparent;
+}
+/* Webkit browsers (Chrome, Edge, Safari) */
+*::-webkit-scrollbar {
+  width: 4px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+/* On hover — visible scrollbar */
+*:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(100, 100, 100, 0.5);
+}
+*:hover {
+  scrollbar-color: rgba(100, 100, 100, 0.5) transparent;
+}

src/App.js CHANGED Viewed

@@ -1,25 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
 }
 export default App;

+// App.js
+import React from 'react';
+import ChatApp from './components/ChatApp';
 import './App.css';
 function App() {
+  return <ChatApp />;
 }
 export default App;

src/components/ChatApp.jsx ADDED Viewed

	@@ -0,0 +1,145 @@

+// components/ChatApp.jsx
+import React, { useState, useRef, useEffect } from 'react';
+import MessageBubble from './MessageBubble';
+import { Button , Typography, Box} from '@mui/material';
+import { ChatBubbleOutline } from '@mui/icons-material';
+export default function ChatApp() {
+  const [message, setMessage] = useState('');
+  const [history, setHistory] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const chatEndRef = useRef(null);
+const examples = [
+  "What is Python?",
+  "Write a JavaScript function to reverse a string.",
+  "Explain how transformers work.",
+];
+  const scrollToBottom = () => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+  useEffect(scrollToBottom, [history]);
+  const sendMessage = async () => {
+  if (!message.trim()) return;
+    const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const newHistory = [...history, { role: 'user', content: message, time }];
+    setHistory(newHistory);
+    setMessage('');
+    setLoading(true);
+    //const assistant = { role: 'assistant', content: '', time };
+    //setHistory(h => [...h, assistant]);
+    const response = await fetch('https://fredericksundeep-aichatmate.hf.space/chat-stream', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message, history: newHistory }),
+    });
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let done = false;
+    let content = '';
+   while (!done) {
+  const { value, done: isDone } = await reader.read();
+  if (value) {
+    const chunk = decoder.decode(value);
+    content += chunk;
+    const currentContent = content; // capture safe reference
+    setHistory(h =>
+      h.map((msg, i) =>
+        i === newHistory.length
+          ? { ...msg, content: currentContent }
+          : msg
+      )
+    );
+  }
+  done = isDone;
+}
+setHistory(h => [...h, { role: 'assistant', content, time }]);
+    setLoading(false);
+  };
+  return (
+    <div className="chat-container">
+      <div className="header-area">
+      <Box display="flex" alignItems="center" gap={1} mb={2}>
+  <ChatBubbleOutline color="primary" />
+  <Typography variant="h5" component="h2">
+    Chat Mate
+  </Typography>
+</Box>
+      </div>
+      <div className="chat-box">
+  {history.length === 0 && !loading && (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      gap={2}
+      pt={8}
+    >
+      {examples.map((example, i) => (
+        <Button
+          key={i}
+          variant="outlined"
+          onClick={() => {
+  const selected = example;
+  setMessage(selected);
+  setTimeout(() => {
+    sendMessage(selected);
+  }, 50);
+}}
+          sx={{
+            color: '#fff',
+            borderColor: '#444',
+            backgroundColor: '#1e1e2f',
+            borderRadius: '12px',
+            width: '70%',
+            fontSize: '1rem',
+            fontWeight: 400,
+            textTransform: 'none',
+            '&:hover': {
+              backgroundColor: '#2c2c3e',
+              borderColor: '#666',
+            },
+          }}
+        >
+          {example}
+        </Button>
+      ))}
+    </Box>
+  )}
+  {history.map((msg, i) => (
+    <MessageBubble key={i} {...msg} />
+  ))}
+  {loading && (
+    <div className="typing-indicator">
+      <span className="dot"></span><span className="dot"></span><span className="dot"></span>
+    </div>
+  )}
+  <div ref={chatEndRef} />
+</div>
+      <div className="input-area">
+        <textarea
+          value={message}
+          rows={2}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Ask something..."
+        />
+        <Button  variant="contained"
+  color="primary"
+  sx={{ ml: 1, px: 2, py: 1 }} disabled={!message.trim() || loading} onClick={sendMessage}>Send</Button>
+      </div>
+    </div>
+  );
+}

src/components/CodeBlock.jsx ADDED Viewed

	@@ -0,0 +1,90 @@

+import React, { useEffect, useRef } from 'react';
+import Prism from 'prismjs';
+import { detectLanguage } from '../utils/languageDetect';
+// Prism core styles and plugins
+import 'prismjs/themes/prism-tomorrow.css';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
+// Required languages
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-shell-session';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-markup'; // HTML
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-kotlin';
+import 'prismjs/components/prism-swift';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-scala';
+import 'prismjs/components/prism-dart';
+export default function CodeBlock({ content }) {
+  const codeRef = useRef(null);
+  const lines = content.split('\n');
+  const firstLine = lines[0].trim();
+  const hasLang = /^[a-zA-Z]+$/.test(firstLine);
+  const lang = hasLang ? firstLine.toLowerCase() : detectLanguage(content) || 'markdown';
+  const code = hasLang ? lines.slice(1).join('\n') : content;
+  //const escapedCode = escapeHTML(code);
+    useEffect(() => {
+    if (codeRef.current) {
+      Prism.highlightElement(codeRef.current);
+    }
+  }, [code, lang]);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code).then(() => {
+      alert('Copied to clipboard!');
+    });
+  };
+  return (
+    <div className="code-block-wrapper" style={{ position: 'relative', marginBottom: '1rem' }}>
+      <button
+        onClick={handleCopy}
+        style={{
+          position: 'absolute',
+          right: '10px',
+          top: '10px',
+          zIndex: 5,
+          fontSize: '12px',
+          padding: '4px 8px',
+          cursor: 'pointer',
+        }}
+      >
+        Copy
+      </button>
+      <div style={{ fontSize: '13px', color: '#ccc', paddingBottom: '5px' }}>
+        {lang.toUpperCase()}
+      </div>
+      <pre
+        className={`line-numbers language-${lang}`}
+        style={{ borderRadius: '8px', overflowX: 'auto' }}
+      >
+        <code
+          ref={codeRef}
+          className={`language-${lang}`}
+        >
+          {code}
+        </code>
+      </pre>
+    </div>
+  );
+}

src/components/MessageBubble.jsx ADDED Viewed

	@@ -0,0 +1,40 @@

+import React from 'react';
+import CodeBlock from './CodeBlock';
+const formatText = (text) => {
+  return text
+    .replace(/\n/g, "<br>")
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*(.*?)\*/g, "<em>$1</em>");
+};
+export default function MessageBubble({ role, content, time }) {
+  return (
+    <div className={`message ${role}`}>
+      <div className="bubble">
+        <FormattedContent content={content} />
+        <div className="timestamp">{time}</div>
+      </div>
+    </div>
+  );
+}
+function FormattedContent({ content }) {
+  const blocks = content.split('```');
+  return (
+    <>
+      {blocks.map((block, i) =>
+        i % 2 === 1 ? (
+          <CodeBlock key={i} content={block} />
+        ) : (
+          <div
+            key={i}
+            className="formatted-text"
+            dangerouslySetInnerHTML={{ __html: formatText(block) }}
+          />
+        )
+      )}
+    </>
+  );
+}

src/components/ThemeProviderWrapper.jsx ADDED Viewed

	@@ -0,0 +1,33 @@

+// components/ThemeProviderWrapper.jsx
+import React, { useMemo, useState, createContext } from 'react';
+import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
+export const ColorModeContext = createContext({ toggleColorMode: () => {} });
+export default function ThemeProviderWrapper({ children }) {
+  const [mode, setMode] = useState('light');
+  const colorMode = useMemo(() => ({
+    toggleColorMode: () => {
+      setMode(prev => (prev === 'light' ? 'dark' : 'light'));
+    }
+  }), []);
+  const theme = useMemo(() =>
+    createTheme({
+      palette: {
+        mode,
+        primary: { main: '#1976d2' },
+        secondary: { main: '#9c27b0' }
+      }
+    }), [mode]);
+  return (
+    <ColorModeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </ColorModeContext.Provider>
+  );
+}

src/index.js CHANGED Viewed

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'prismjs/themes/prism-tomorrow.css';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/styles/prism-lines.css ADDED Viewed

	@@ -0,0 +1,36 @@

+prism-lines.css
+pre.line-numbers {
+  padding-left: 3.8em;
+  position: relative;
+  counter-reset: linenumber;
+}
+pre.line-numbers > code {
+  position: relative;
+  white-space: pre-wrap;
+}
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: 0;
+  width: 3em;
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+  user-select: none;
+  padding: 0;
+}
+.line-numbers-rows > span {
+  display: block;
+  counter-increment: linenumber;
+  padding-left: 0.5em;
+}
+.line-numbers-rows > span:before {
+  content: counter(linenumber);
+  display: block;
+  color: #999;
+}

src/utils/languageDetect.js ADDED Viewed

	@@ -0,0 +1,48 @@

+// utils/languageDetect.js
+const escapeRegExp = (string) =>
+  string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+export const detectLanguage = (code = '') => {
+  const language_keywords = {
+    python: ['def ', 'print(', 'import ', 'class '],
+  javascript: ['function ', 'console.log(', 'let ', 'const ', 'document.getElementById'],
+  typescript: ['interface ', 'type ', 'let ', 'const ', ': string', ': number'],
+  java: ['import java.', 'ArrayList<', 'System.out', 'void main(', 'public class', 'new '],
+  c: ['#include <stdio.h>', 'printf(', 'scanf(', 'int main('],
+  cpp: ['#include', 'std::', 'cout <<', 'cin >>'],
+  bash: ['#!/bin/bash', 'echo ', 'cd ', 'ls', 'pwd'],
+  shell: ['#!/bin/sh', 'echo ', 'export ', 'fi'],
+  sql: ['SELECT ', 'INSERT ', 'UPDATE ', 'FROM ', 'WHERE ', 'JOIN ', 'DELETE '],
+  html: ['<!DOCTYPE html>', '<html>', '<div>', '<script>'],
+  css: ['color:', 'font-size:', 'margin:', 'padding:'],
+  go: ['package main', 'fmt.Println', 'func main()'],
+  php: ['<?php', 'echo ', '$_', '->'],
+  ruby: ['def ', 'puts ', 'end', 'class '],
+  kotlin: ['fun main(', 'val ', 'var ', 'println('],
+  swift: ['import SwiftUI', 'struct ', 'var body:', 'Text('],
+  rust: ['fn main()', 'println!', 'let mut'],
+  scala: ['object ', 'def ', 'val ', 'println('],
+  dart: ['void main()', 'print(', 'var ', 'class '],
+  };
+  let bestMatch = 'plaintext';
+  let maxScore = 0;
+  for (const [lang, keywords] of Object.entries(language_keywords)) {
+    let score = 0;
+    for (const keyword of keywords) {
+      const regex = new RegExp(escapeRegExp(keyword), 'g');
+      const matches = (code.match(regex) || []).length;
+      score += matches * Math.max(1, keyword.length / 4);
+    }
+    if (score > maxScore) {
+      maxScore = score;
+      bestMatch = lang;
+    }
+  }
+  return bestMatch;
+};