@lakshmiprasanth/react-voice-to-text/lib/components/ResultsDisplay.js

A modern React package for voice-to-text conversion with real-time speech recognition and file upload support

'use strict';

var jsxRuntime = require('react/jsx-runtime');

function getDefaultExportFromCjs (x) {
	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}

var classnames = {exports: {}};

/*!
	Copyright (c) 2018 Jed Watson.
	Licensed under the MIT License (MIT), see
	http://jedwatson.github.io/classnames
*/

(function (module) {
	/* global define */

	(function () {

		var hasOwn = {}.hasOwnProperty;

		function classNames () {
			var classes = '';

			for (var i = 0; i < arguments.length; i++) {
				var arg = arguments[i];
				if (arg) {
					classes = appendClass(classes, parseValue(arg));
				}
			}

			return classes;
		}

		function parseValue (arg) {
			if (typeof arg === 'string' || typeof arg === 'number') {
				return arg;
			}

			if (typeof arg !== 'object') {
				return '';
			}

			if (Array.isArray(arg)) {
				return classNames.apply(null, arg);
			}

			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
				return arg.toString();
			}

			var classes = '';

			for (var key in arg) {
				if (hasOwn.call(arg, key) && arg[key]) {
					classes = appendClass(classes, key);
				}
			}

			return classes;
		}

		function appendClass (value, newClass) {
			if (!newClass) {
				return value;
			}
		
			if (value) {
				return value + ' ' + newClass;
			}
		
			return value + newClass;
		}

		if (module.exports) {
			classNames.default = classNames;
			module.exports = classNames;
		} else {
			window.classNames = classNames;
		}
	}()); 
} (classnames));

var classnamesExports = classnames.exports;
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);

const ResultsDisplay = ({ results, error, onClear, showClearButton = true, showConfidence = true, showStatus = true, maxResults = 50, className, emptyText = 'No results yet. Start recording or convert a file to see results.', ...props }) => {
    const handleClear = () => {
        onClear?.();
    };
    const formatConfidence = (confidence) => {
        return `${(confidence * 100).toFixed(1)}%`;
    };
    const getStatusIcon = (isFinal) => {
        return isFinal ? '✅' : '⏳';
    };
    const getStatusText = (isFinal) => {
        return isFinal ? 'Final' : 'Interim';
    };
    const getStatusColor = (isFinal) => {
        return isFinal ? '#27ae60' : '#f39c12';
    };
    const displayedResults = results.slice(-maxResults);
    if (error) {
        return (jsxRuntime.jsxs("div", { className: classNames('results-display', 'results-display--error', className), ...props, children: [jsxRuntime.jsxs("div", { className: "results-display__header", children: [jsxRuntime.jsx("h3", { children: "\u274C Error" }), showClearButton && (jsxRuntime.jsx("button", { onClick: handleClear, className: "results-display__clear-button", children: "Clear" }))] }), jsxRuntime.jsx("div", { className: "results-display__error", children: jsxRuntime.jsx("p", { children: error }) })] }));
    }
    if (results.length === 0) {
        return (jsxRuntime.jsx("div", { className: classNames('results-display', 'results-display--empty', className), ...props, children: jsxRuntime.jsxs("div", { className: "results-display__empty", children: [jsxRuntime.jsx("div", { className: "results-display__empty-icon", children: "\uD83D\uDCDD" }), jsxRuntime.jsx("h3", { children: "Results" }), jsxRuntime.jsx("p", { children: emptyText })] }) }));
    }
    return (jsxRuntime.jsxs("div", { className: classNames('results-display', className), ...props, children: [jsxRuntime.jsxs("div", { className: "results-display__header", children: [jsxRuntime.jsxs("h3", { children: ["\uD83D\uDCDD Results (", results.length, ")"] }), showClearButton && (jsxRuntime.jsx("button", { onClick: handleClear, className: "results-display__clear-button", children: "Clear All" }))] }), jsxRuntime.jsxs("div", { className: "results-display__content", children: [jsxRuntime.jsx("div", { className: "results-display__list", children: displayedResults.map((result, index) => (jsxRuntime.jsx("div", { className: classNames('results-display__item', {
                                'results-display__item--final': result.isFinal,
                                'results-display__item--interim': !result.isFinal
                            }), children: jsxRuntime.jsxs("div", { className: "results-display__item-content", children: [jsxRuntime.jsx("div", { className: "results-display__text", children: result.transcript }), jsxRuntime.jsxs("div", { className: "results-display__meta", children: [showStatus && (jsxRuntime.jsxs("div", { className: "results-display__status", style: { color: getStatusColor(result.isFinal) }, children: [jsxRuntime.jsx("span", { className: "results-display__status-icon", children: getStatusIcon(result.isFinal) }), jsxRuntime.jsx("span", { className: "results-display__status-text", children: getStatusText(result.isFinal) })] })), showConfidence && (jsxRuntime.jsxs("div", { className: "results-display__confidence", children: ["Confidence: ", formatConfidence(result.confidence)] })), jsxRuntime.jsxs("div", { className: "results-display__index", children: ["#", results.length - displayedResults.length + index + 1] })] })] }) }, `${result.transcript}-${index}`))) }), results.length > maxResults && (jsxRuntime.jsx("div", { className: "results-display__overflow", children: jsxRuntime.jsxs("p", { children: ["Showing last ", maxResults, " results of ", results.length, " total"] }) }))] })] }));
};

exports.ResultsDisplay = ResultsDisplay;
//# sourceMappingURL=ResultsDisplay.js.map