\r\n ![\"Cognitive](\"/images/search-and-qna.png\")
\r\n
\r\n \r\n Powered by Azure Cognitive Search and QnA Maker
\r\nTry searching \"How do I use fuzzy search?\" or \"When should I use cognitive skills?\"
\r\n\r\n
\r\n );\r\n};\r\n\r\nconst FacetList = styled(List)({\r\n marginTop: '32px !important'\r\n})\r\n","import React, { useEffect, useState } from 'react';\r\nimport axios from 'axios';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport { useLocation, useHistory } from \"react-router-dom\";\r\n\r\nimport Results from '../../components/Results/Results';\r\nimport Pager from '../../components/Pager/Pager';\r\nimport Facets from '../../components/Facets/Facets';\r\nimport SearchBar from '../../components/SearchBar/SearchBar';\r\n\r\nimport \"./Search.css\";\r\n\r\nexport default function Search(props) {\r\n\r\n let location = useLocation();\r\n let history = useHistory();\r\n\r\n const [answer, setAnswer] = useState({});\r\n const [results, setResults] = useState([]);\r\n const [resultCount, setResultCount] = useState(0);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [q, setQ] = useState(new URLSearchParams(location.search).get('q') ?? \"*\");\r\n const [top] = useState(new URLSearchParams(location.search).get('top') ?? 8);\r\n const [skip, setSkip] = useState(new URLSearchParams(location.search).get('skip') ?? 0);\r\n const [filters, setFilters] = useState([]);\r\n const [facets, setFacets] = useState({});\r\n const [isLoading, setIsLoading] = useState(true);\r\n\r\n let resultsPerPage = top;\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n setSkip((currentPage - 1) * top);\r\n const body = {\r\n q: q,\r\n top: top,\r\n skip: skip,\r\n filters: filters,\r\n // only return answer on first page\r\n getAnswer: currentPage === 1 ? true : false\r\n };\r\n\r\n const headers = {\r\n \"x-functions-key\": props.code\r\n };\r\n \r\n const url = props.url + '/api/search';\r\n axios.post(url, body, {headers: headers})\r\n .then(response => {\r\n setResults(response.data.results);\r\n setFacets(response.data.facets);\r\n setResultCount(response.data.count);\r\n\r\n if (currentPage === 1) {\r\n setAnswer(response.data.answers);\r\n }\r\n setIsLoading(false);\r\n })\r\n .catch(error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n });\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [top, skip, filters, currentPage]);\r\n\r\n // pushing the new search term to history when q is updated\r\n // allows the back button to work as expected when coming back from the details page\r\n useEffect(() => {\r\n history.push('/search?q=' + q);\r\n setCurrentPage(1);\r\n setFilters([]);\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [q]);\r\n\r\n\r\n let postSearchHandler = (searchTerm) => {\r\n //console.log(searchTerm);\r\n setQ(searchTerm);\r\n }\r\n\r\n\r\n\r\n var body;\r\n if (isLoading) {\r\n body = (\r\n \r\n \r\n {facets}\r\n \r\n
\r\n \r\n
\r\n - \r\n {filters}\r\n
\r\n
);\r\n } else {\r\n body = (\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {body}\r\n \r\n
\r\n Try searching \"How do I use fuzzy search?\" or \"When should I use cognitive skills?\"
\r\n\r\n \r\n \r\n
\r\n
\r\n );\r\n}","import React from 'react'\r\n\r\nimport './DocumentViewer.css';\r\n\r\nexport default function DocumentViewer(props) {\r\n\r\n const path = props.document.metadata_storage_path + \"?\" + props.sasToken;\r\n const content = props.document.content;\r\n\r\n\r\n var fileContainerHTML;\r\n if (path != null) {\r\n var pathLower = path.toLowerCase();\r\n\r\n if (pathLower.includes(\".pdf\")) {\r\n fileContainerHTML =\r\n ;\r\n }\r\n else if (pathLower.includes(\".txt\") || pathLower.includes(\".json\")) {\r\n var txtHtml = content.trim();\r\n fileContainerHTML = \r\n {ReactHtmlParser(full_content)}\r\n | \r\n
{txtHtml} ;\r\n }\r\n else if (pathLower.includes(\".las\")) {\r\n fileContainerHTML = \r\n ;\r\n }\r\n else if (pathLower.includes(\".jpg\") || pathLower.includes(\".jpeg\") || pathLower.includes(\".gif\") || pathLower.includes(\".png\")) {\r\n fileContainerHTML =\r\n \r\n 
\r\n
;\r\n }\r\n else if (pathLower.includes(\".xml\")) {\r\n fileContainerHTML =\r\n ;\r\n }\r\n else if (pathLower.includes(\".htm\")) {\r\n fileContainerHTML = \r\n ;\r\n }\r\n else if (pathLower.includes(\".mp3\")) {\r\n fileContainerHTML =\r\n ;\r\n }\r\n else if (pathLower.includes(\".mp4\")) {\r\n fileContainerHTML =\r\n ;\r\n }\r\n else if (pathLower.includes(\".doc\") || pathLower.includes(\".ppt\") || pathLower.includes(\".xls\")) {\r\n var src = \"https://view.officeapps.live.com/op/view.aspx?src=\" + encodeURIComponent(path);\r\n\r\n fileContainerHTML =\r\n ;\r\n }\r\n else {\r\n fileContainerHTML =\r\n This file cannot be previewed. Download it here to view: Download
;\r\n }\r\n }\r\n else {\r\n fileContainerHTML =\r\n This file cannot be previewed or downloaded.
;\r\n }\r\n\r\n return fileContainerHTML;\r\n}","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { useParams } from 'react-router-dom';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Transcript from '../../components/Transcript/Transcript';\r\nimport DocumentViewer from '../../components/DocumentViewer/DocumentViewer';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport axios from 'axios';\r\nimport \"./Details.css\";\r\n\r\nexport default function Details(props) {\r\n\r\n let { id } = useParams();\r\n const [document, setDocument] = useState({});\r\n const [sasToken, setSasToken] = useState(\"\");\r\n const [selectedTab, setTab] = useState(0);\r\n const [highlight, setHighlight] = useState(null);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [q, setQ] = useState(\"\");\r\n const searchBar = useRef(null);\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n\r\n const headers = {\r\n \"x-functions-key\": props.code\r\n };\r\n\r\n const url = props.url + '/api/lookup?id=' + id;\r\n console.log(url);\r\n axios.get(url, {headers: headers})\r\n .then(response => {\r\n const doc = response.data.document;\r\n const sas = response.data.sasToken;\r\n setDocument(doc);\r\n setSasToken(sas);\r\n setIsLoading(false);\r\n })\r\n .catch(error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n });\r\n\r\n }, [id]);\r\n\r\n useEffect(() => {\r\n setHighlight(null);\r\n }, [q]);\r\n\r\n function GetTagsHTML(tags) {\r\n\r\n if (!!tags) {\r\n let tagsHtml = tags.map((tagValue, index) => {\r\n if (index < 10) {\r\n\r\n if (tagValue.length > 30) { // check tag name length\r\n // create substring of tag name length if too long\r\n tagValue = tagValue.slice(0, 30);\r\n }\r\n\r\n return ;\r\n } else {\r\n return null;\r\n }\r\n });\r\n\r\n return tagsHtml;\r\n }\r\n\r\n return null;\r\n }\r\n\r\n let tags = GetTagsHTML(document.keyPhrases);\r\n\r\n function GetSnippets(q, content) {\r\n if (!!content && q.trim() !== \"\") {\r\n var regex = new RegExp(q, 'gi');\r\n\r\n let matches = content.match(regex);\r\n\r\n return matches.map((value, index) => {\r\n var startIdx;\r\n var maxLengthOfSnippet = 400;\r\n var ln = maxLengthOfSnippet;\r\n\r\n if (value.length > 150) {\r\n startIdx = content.indexOf(value);\r\n ln = value.length;\r\n }\r\n else {\r\n if (content.indexOf(value) < (maxLengthOfSnippet / 2)) {\r\n startIdx = 0;\r\n }\r\n else {\r\n startIdx = content.indexOf(value) - (maxLengthOfSnippet / 2);\r\n }\r\n\r\n ln = maxLengthOfSnippet + value.length;\r\n }\r\n\r\n var reference = content.slice(startIdx, startIdx + ln);\r\n content = content.replace(value, \"\");\r\n\r\n reference = reference.replace(value, function (str) {\r\n return (`${str}`);\r\n });\r\n\r\n var shortName = value.slice(0, 20).replace(/[^a-zA-Z ]/g, \" \").replace(new RegExp(\" \", 'g'), \"_\");\r\n\r\n return \r\n
;\r\n tab_2_style = \"nav-link active black\";\r\n }\r\n\r\n }\r\n\r\n\r\n\r\n return (\r\n \r\n {JSON.stringify(document, null, 2)}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n","import React, { useState } from \"react\";\r\nimport axios from 'axios';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\n\r\nimport \"./Upload.css\";\r\n\r\nexport default function Upload(props) {\r\n\r\n const [file, setFile] = useState(\"\");\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isSuccess, setIsSuccess] = useState(false);\r\n const [isError, setIsError] = useState(false);\r\n\r\n function onFileChange(event) {\r\n let selectedFile = event.target.files[0];\r\n console.log(selectedFile);\r\n setFile(selectedFile);\r\n\r\n setIsError(false);\r\n setIsSuccess(false);\r\n }\r\n\r\n async function onUploadClick() {\r\n setIsLoading(true);\r\n setIsError(false);\r\n setIsSuccess(false);\r\n\r\n var reader = new FileReader();\r\n\r\n reader.onload = function () {\r\n let base64File = reader.result.replace(/^data:.+;base64,/, '');\r\n\r\n\r\n let body = {\r\n name: file.name,\r\n file: base64File,\r\n fileType: file.type\r\n }\r\n\r\n const headers = {\r\n \"x-functions-key\": props.code\r\n };\r\n\r\n const url = props.url + '/api/upload';\r\n axios.post(url, body, {headers: headers})\r\n .then(response => {\r\n setIsLoading(false);\r\n setIsSuccess(true);\r\n })\r\n .catch(error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n setIsError(true);\r\n });\r\n\r\n console.log(body);\r\n };\r\n reader.onerror = function (error) {\r\n console.log('Error: ', error);\r\n };\r\n\r\n reader.readAsDataURL(file);\r\n\r\n }\r\n\r\n var loading;\r\n if (isLoading) {\r\n loading = (\r\n
\r\n \r\n
\r\n - \r\n
- \r\n \r\n \r\n
- \r\n \r\n \r\n
- \r\n \r\n \r\n
\r\n
\r\n \r\n {body}\r\n
\r\n\r\n \r\n \r\n Document successfully uploaded!\r\n
);\r\n }\r\n\r\n var errorMessage;\r\n if (isError) {\r\n errorMessage = (\r\n Document upload failed :(\r\n
);\r\n }\r\n\r\n var button;\r\n if (file !== \"\") {\r\n button = ();\r\n } else {\r\n button = ();\r\n }\r\n\r\n\r\n return (\r\n \r\n
\r\n\r\n Upload a document
\r\nThis site is a public demo so the ability to upload documents has been disabled.
\r\nIf you deploy your own version of the solution from the repo, you'll be able to upload documents.
\r\n\r\n\r\n
\r\n \r\n onFileChange(e)} />\r\n
\r\n {file.name}
\r\n\r\n\r\n {button}\r\n {loading}\r\n
\r\n
\r\n {successMessage}\r\n {errorMessage}\r\n
\r\n \r\n \r\n \r\n \r\n {/*
\r\n } />\r\n