Initial commit

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc-auto-import.json

@@ -0,0 +1,72 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+  ],
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+.firebaserc

.prettierignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.prettierrc.json

@@ -0,0 +1,20 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": true,
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false,
+  "endOfLine": "lf",
+  "singleAttributePerLine": true
+}

README.md

@@ -0,0 +1,130 @@
+# 🌟 Vue ChatGPT AI
+
+✨ Powered by Modern Technologies
+
+- **Vue 3**: The versatile powerhouse that makes building dynamic user interfaces a breeze.
+- **Vuetify 3**: Elevate your design with the elegance of Material Design, right at your fingertips.
+- **Pinia**: Your go-to state management solution, as easy as pie, and just as satisfying.
+- **Vite**: Lightning-fast build tool that ensures your development experience is as smooth as silk.
+- **Firebase**: Real-time magic for your database and storage needs, ensuring your data is always in sync.
+- **OpenAI**: The brains behind the operation, bringing sophisticated AI chat capabilities to your app.
+
+This project harnesses these cutting-edge technologies to deliver a seamless and responsive chat interface, enriched with AI-driven interactions. Enjoy the power of real-time data, sleek design, and intelligent conversation in one cohesive package.
+
+https://github.com/mustafacagri/vue3-chatgpt-ai-initial/assets/7488394/1fd4179b-f5d6-41a4-b2e4-4f1fc4b91a41
+
+## 🚀 Features
+
+1. **Real-time AI Chat**
+
+   - **OpenAI Integration**: Leverage the power of OpenAI's ChatGPT for intelligent and dynamic conversations.
+   - **Seamless Interaction**: Chat with the AI in real-time, with instant responses and fluid interaction.
+
+2. **Multi-format Support**
+
+   - **Text Messages**: Exchange plain text messages effortlessly.
+   - **Image Support**: Send and receive images directly in the chat.
+   - **Audio Messages**: Record and share audio clips with ease.
+
+3. **Persistent Chat History**
+
+   - **Local Storage**: Messages are saved locally, ensuring chat history is retained even after the page refreshes.
+   - **Firebase Realtime Database**: Store messages in the cloud for access across multiple devices.
+
+4. **User-friendly Interface**
+
+   - **Vuetify 3**: Aesthetic and intuitive design with Material Design components.
+   - **Responsive Layout**: Optimized for both desktop and mobile devices.
+
+5. **State Management**
+
+   - **Pinia**: Simplified and intuitive state management for maintaining the chat application state.
+
+6. **Efficient Development Workflow**
+
+   - **Vite**: Fast build tool for an efficient development experience.
+   - **Modular Code Structure**: Clean and maintainable codebase with Vue 3's Composition API.
+
+7. **Security and Scalability**
+
+   - **Firebase Authentication**: Secure user authentication to protect chat data.
+   - **Scalable Infrastructure**: Firebase backend ensures scalability and reliability as the user base grows.
+
+8. **File Management**
+   - **Firebase Storage**: Store and manage images and audio files securely in the cloud.
+
+## 🛠️ Setup Instructions
+
+### Cloning and Running Locally
+
+To get started, clone the repository and run the development server:
+
+```bash
+git clone https://github.com/your/repository.git
+cd repository-name
+yarn install
+yarn dev
+```
+
+The application will be running at http://localhost:5017/.
+
+### 🔥 Firebase Integration
+
+To fully utilize Firebase features:
+
+1. **Create a Firebase Project:**
+
+   - Navigate to the [Firebase Console](https://console.firebase.google.com/) and create a new project.
+
+2. **Enable Firebase Services:**
+
+   - In your Firebase project settings, enable Firebase Storage to store files like images and audio.
+
+3. **Obtain Firebase Configuration:**
+   - Go to your Firebase project settings and find the Firebase SDK snippet. You'll need to copy the configuration details including:
+     - `apiKey`
+     - `authDomain`
+     - `databaseURL`
+     - `projectId`
+     - `storageBucket`
+     - `messagingSenderId`
+     - `appId`
+4. **Add Firebase Configuration to `.env` File:**
+   - Create a `.env` file in the root directory of your project if it doesn't exist.
+   - Add your Firebase configuration details to the `.env` file using the following format:
+     ```env
+     VITE_FIREBASE_API_KEY=your-firebase-api-key
+     VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
+     VITE_FIREBASE_DATABASE_URL=your-database-url
+     VITE_FIREBASE_PROJECT_ID=your-firebase-project-id
+     VITE_FIREBASE_STORAGE_BUCKET=your-firebase-storage-bucket
+     VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
+     VITE_FIREBASE_APP_ID=your-firebase-app-id
+     ```
+
+### 🗄️ Local Storage
+
+Messages are stored in local storage using the `useStorage` hook from `@vueuse/core`. This ensures that chat history persists even when the page is refreshed.
+
+### 🤖 How to Obtain OpenAI API Key
+
+1. **Sign up for OpenAI API:**
+
+   - Go to the [OpenAI website](https://www.openai.com/) and sign up for an account.
+
+2. **Generate API Key:**
+
+   - After signing in, navigate to your account settings or API section to generate a new API key specifically for ChatGPT.
+   - Copy the generated API key.
+
+3. **Add OpenAI API Key to `.env` File:**
+   - Open or create the `.env` file in your project directory.
+   - Add your OpenAI API key to the `.env` file using the following format:
+     ```env
+     VITE_OPENAI_API_KEY=your-openai-api-key
+     ```
+
+## How can I support? 🌟
+
+- ⭐ Star my GitHub repo
+- 🛠 Create pull requests, submit bugs, suggest new features or updates

database.rules.json

@@ -0,0 +1,7 @@
+{
+  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
+  "rules": {
+    ".read": false,
+    ".write": false
+  }
+}

firebase.json

@@ -0,0 +1,8 @@
+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "storage": {
+    "rules": "storage.rules"
+  }
+}

index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Vue - ChatGPT AI</title>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon-16x16.png"
+    />
+    <link
+      rel="manifest"
+      href="/site.webmanifest"
+    />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script
+      type="module"
+      src="/src/main.js"
+    ></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}