initial web app

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# environment variable
+.env

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -1,13 +1,6 @@
-## [project-title] Changelog
+## Contoso Outdoors Web App Changelog
 
-<a name="x.y.z"></a>
-# x.y.z (yyyy-mm-dd)
+<a name="1.0.0"></a>
+# 1.0.0 (2023-12-01)
 
-*Features*
-* ...
-
-*Bug Fixes*
-* ...
-
-*Breaking Changes*
-* ...
+Initial release of Contoso Outdoors Web App.

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to [project-title]
+# Contributing to Contoso Outdoors Web Application
 
 This project welcomes contributions and suggestions.  Most contributions require you to agree to a
 Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us

Dockerfile

@@ -0,0 +1,70 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+ARG GIT_VERSION_TAG=unspecified
+RUN echo $GIT_VERSION_TAG
+RUN echo "NEXT_PUBLIC_VERSION=$GIT_VERSION_TAG" > .env.production
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci --legacy-peer-deps; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+
+# set version
+ENV NEXT_PUBLIC_VERSION $GIT_VERSION_TAG
+
+# run build
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -1,57 +1,59 @@
-# Project Name
-
-(short, 1-3 sentenced, description of the project)
-
-## Features
-
-This project framework provides the following features:
-
-* Feature 1
-* Feature 2
-* ...
+This is the Contoso Outdoors Company Website shown at Microsoft Ignite. It uses assets created by DALLE-3 and GPT-4. It is built with Next.js and Tailwind CSS.
 
 ## Getting Started
 
-### Prerequisites
+First, run the development server:
 
-(ideally very short, if any)
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-- OS
-- Library version
-- ...
+If you open [http://localhost:3000](http://localhost:3000) with your browser you should get the following result:
 
-### Installation
+![Contoso Outdoors Home Page](images/contosoweb.png "Contoso Outdoors Home Page")
 
-(ideally very short)
+Click on the chat button indicated above to start a chat session. There are three different chat types you can try:
 
-- npm install [package name]
-- mvn install
-- ...
+- Regular Chat using prompt flow (you can set that up using the  [Contoso Chat](https://github.com/Azure-Samples/contoso-chat/) repo). This is the default chat type.
+- Grounded chat using the "Add Your Data" feature inside of the Azure AI Studio playground (if you follow the instructions in the [Contoso Chat](https://github.com/Azure-Samples/contoso-chat/) repo, you will have this set up already). This can be enabled by adding `?type=grounded` to the URL. For example, `http://localhost:3000/?type=grounded`
+- Visual Chat - this is the same UI that was shown at the Microsoft Ignite conference. This can use either video capture or an image upload. This can be enabled by adding `?type=visual` to the URL. For example, `http://localhost:3000/?type=visual`. If you want to use video capture, you can use `?type=video` instead. For example, `http://localhost:3000/?type=video`. (Instructions for how to set this prompt flow up are forthcoming as soon as GPT-4 Turbo with Vision is released).
 
-### Quickstart
-(Add steps to get up and running quickly)
+## Setting up Endpoints
 
-1. git clone [repository clone url]
-2. cd [repository name]
-3. ...
+In order to use the Contoso Outdoors website, you will need to set up the following endpoints in a `.env` file in the root of the project:
 
+```bash
+CONTOSO_SEARCH_ENDPOINT=<YOUR_SEARCH_ENDPOINT>
+CONTOSO_SEARCH_KEY=<YOUR_SEARCH_KEY>
+CONTOSO_AISERVICES_ENDPOINT=<YOUR_AI_SERVICES_ENDPOINT>
+CONTOSO_AISERVICES_KEY=<YOUR_AI_SERVICES_KEY>
+PROMPTFLOW_ENDPOINT=<YOUR_PROMPTFLOW_ENDPOINT>
+PROMPTFLOW_KEY=<YOUR_PROMPTFLOW_KEY>
+VISUAL_ENDPOINT=<YOUR_PROMPTFLOW_VISUAL_ENDPOINT>
+VISUAL_KEY=<YOUR_PROMPTFLOW_VISUAL_KEY>
+```
 
-## Demo
+If you follow the [Contoso Chat](https://github.com/Azure-Samples/contoso-chat/) repo, you will have all of these endpoints set up already. If you want to use the Visual Chat feature, you will need to wait until GPT-4 Turbo with Vision is released.
 
-A demo app is included to show how to use the project.
+## Additional Features
+As part of this site we have added debug statements to the console to see the responses. For the grounded chat, you will see the following:
 
-To run the demo, follow these steps:
+![Grounded Chat Debug](images/grounded.png "Grounded Chat Debug")
 
-(Add steps to start up the demo)
+For the standard prompt flow chat you will see the following:
 
-1.
-2.
-3.
+![Prompt Flow Chat Debug](images/promptflow.png "Prompt Flow Chat Debug")
 
-## Resources
+This is useful for debugging purposes and shows you what is being sent to the individual endpoints.
 
-(Any additional resources or related projects)
+## Things to do
+Couple of things I would like to do with this repo:
 
-- Link to supporting information
-- Link to similar sample
-- ...
+1. Change to streaming chat output instead of waiting for the entire response to come back.
+2. Any other ideas? Let me know!

local.env

@@ -0,0 +1,8 @@
+CONTOSO_SEARCH_ENDPOINT=<YOUR_SEARCH_ENDPOINT>
+CONTOSO_SEARCH_KEY=<YOUR_SEARCH_KEY>
+CONTOSO_AISERVICES_ENDPOINT=<YOUR_AI_SERVICES_ENDPOINT>
+CONTOSO_AISERVICES_KEY=<YOUR_AI_SERVICES_KEY>
+PROMPTFLOW_ENDPOINT=<YOUR_PROMPTFLOW_ENDPOINT>
+PROMPTFLOW_KEY=<YOUR_PROMPTFLOW_KEY>
+VISUAL_ENDPOINT=<YOUR_PROMPTFLOW_VISUAL_ENDPOINT>
+VISUAL_KEY=<YOUR_PROMPTFLOW_VISUAL_KEY>

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+}
+
+module.exports = nextConfig